diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index bf8a36785..4ea5cdf2d 100755
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -80,7 +80,9 @@
                                         <div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
                                 </div>
                         </div>
-                        <div fxLayout="row" class="pt-3" *ngIf="total3 != 0 && total2 != 0 && total1 != 0">
+
+                        <div fxLayout="row" class="pt-3">
+
                                 <div fxFlex.gt-sm="100" fxFlex="100" style="text-align:center">
                                 <ul class="lengend-list">
                                 <li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
index 0853db580..edf72fb72 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
@@ -1,169 +1,322 @@
-
-<mat-card  style="min-height: 550px;">
-    <mat-card-content> 
-        <p>PD Address Details</p>
+<!-- <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate> -->
 <form class="address" [formGroup]="addressForm">
-    <mat-form-field>
-        <input matInput placeholder="Address" formControlName="address" required>
-    </mat-form-field>
 
-    <mat-form-field>
-        <mat-select placeholder="Address Type" formControlName="address_type" required>
-                <mat-option value="{{m_addressType.address_type_id}}"
-                *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
-    </mat-option>
-        </mat-select>
-    </mat-form-field>
-
-    <mat-form-field *ngIf="addressForm.controls['address_type'].value == 12">
-            <input matInput placeholder="Address Type Others" formControlName="address_type_others">
-    </mat-form-field>
- 
-    <mat-form-field>        
-        <mat-select placeholder="Locality" formControlName="locality" required>
-            <mat-option value="{{m_locality.locality_id}}"
-                                *ngFor="let m_locality of localityData">{{m_locality.locality_name}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-
-    <mat-form-field *ngIf="addressForm.controls.locality.value == 'Others'">
-        <input matInput placeholder="Specify Locality"
-               formControlName="locality_others">
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select placeholder="Approach to PD Location" formControlName="pd_location" required>
-            <mat-option value="{{data.pd_location_approach_id}}"
-                        *ngFor="let data of locationdata">{{data.description}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select placeholder="Comment on Locality" formControlName="comment_locality" required>
-            <mat-option value="{{data.comments_on_locality_id}}"
-                        *ngFor="let data of commentData">{{data.rating}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <!--  Don't Remove To replace atlast of the PD Completion and creating new form (Customer Behaviour 221118 review doc : s.no 3.e )
-     <mat-form-field>
-        <mat-select placeholder="Customer Behaviour"
-                    formControlName="customer_behaviour" required>
-            <mat-option value="{{data.customer_behaviour_id}}"
-                        *ngFor="let data of customerData">{{data.description}}
-            </mat-option>
-        </mat-select>
-     </mat-form-field>--(Customer Behaviour)-->
-    <mat-form-field>
-            <mat-select placeholder="Ownership" formControlName="address_ownership">
-                <mat-option value="{{ownerShip.id}}"
-                                    *ngFor="let ownerShip of ownerShipData">
-                            {{ownerShip.name}}
-                        </mat-option>
-            </mat-select>
-    </mat-form-field>
-    
-    <mat-form-field>
-            <mat-select placeholder="Is there any business activity is being run?"
-                        formControlName="bussiness_activity" required>
-                <mat-option value="yes">Yes</mat-option>
-                <mat-option value="no">No</mat-option>
-            </mat-select>
-    </mat-form-field>
-    
-    <mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
-                <mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
-                        <mat-option value="{{m_addressType.address_type_id}}"
-                        *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
-                        </mat-option>
-                </mat-select>
-    </mat-form-field>
-            
-    <mat-form-field *ngIf="addressForm.controls['bussiness_address_type'].value == 12">
-                    <input matInput placeholder="Bussiness Address Type Others" formControlName="bussiness_address_type_others">
-    </mat-form-field>
-
-    <!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
-        <mat-card>
-        <mat-card-header>
-            <p>Neighbourhood</p>     
-        </mat-card-header>
-        <div formArrayName="neighbourhood">
-            <div *ngFor="let item of addressForm.controls.neighbourhood['controls']; let i=index" >
-                <mat-card-content class="matcard" [formGroup]="item">
-                <div>
-                    <mat-form-field>
-                        <input matInput placeholder="Neighbour Name"
-                               formControlName="name" required>
-                    </mat-form-field>
-                </div>
-                <div>
-                    <mat-form-field>
-                        <mat-select placeholder="Do you know"
-                                    formControlName="do_you_know" required>
-                            <mat-option value="{{m_neighbourStatus}}"
-                *ngFor="let m_neighbourStatus of neighbourStatusData">{{m_neighbourStatus}}
-                 </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field>
-
-                            <mat-select placeholder="Is the applicant owner"
-                                        formControlName="is_owner" required>
-                
-                                <mat-option value="{{m_applicantOwner}}"
-                                        *ngFor="let m_applicantOwner of applicantOwnerData">{{m_applicantOwner}}
-                                    </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-                    <!-- <mat-form-field>
-                        <input matInput placeholder="How long do you know the applicant"
-                               formControlName="how_long">
-                    </mat-form-field> ->-
-                    <div>
-                            <label>How long do you know the applicant?</label>
-                            <br>
-                                <mat-form-field>
-                                    <input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
-                                </mat-form-field>
-                        </div>
-
-                    
-                    <button type="button" matTooltip="Add More Neighbour Details" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
-                            (click)="addNeighbour($event)"
-                           color="primary" style="float: right;">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                   <button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
-                             (click)="removeNeighbour(i)"
-                            style="float: right;">
-                        <mat-icon>delete</mat-icon>
-                    </button>
- 
-                </mat-card-content>
-                
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">
+                    {{pageTitle}}
             </div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+        <mat-tab-group>
+            <mat-tab label="Questions">
+                <ng-template matTabContent>
+                    <div fxLayout="row wrap">
+                        <div fxFlex="100">
+                            <mat-card>
+                                <!-- <mat-card-title>Address Details</mat-card-title> -->
+                                <mat-card-content>
+                    
+                                    <mat-form-field>    
+                                                       <!-- <input matInput placeholder="Name" formControlName="name_ans" type="text" required> -->
+                                        <input matInput placeholder="Address" formControlName="address" required>
+                        
+                                    </mat-form-field>
+
+                                    <mat-form-field>
+                                        <mat-select placeholder="Address Type" formControlName="address_type" required>
+                                            <mat-option value="{{m_addressType.address_type_id}}"
+                                                        *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                            
+                                    <mat-form-field *ngIf="addressForm.controls['address_type'].value == 12">
+                                        <input matInput placeholder="Address Type Others" formControlName="address_type_others">
+                                    </mat-form-field>
+                                             
+                                    <mat-form-field>        
+                                        <mat-select placeholder="Locality" formControlName="locality" required>
+                                            <mat-option value="{{m_locality.locality_id}}"
+                                                       *ngFor="let m_locality of localityData">{{m_locality.locality_name}}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                            
+                                    <mat-form-field *ngIf="addressForm.controls.locality.value == 'Others'">
+                                                    <input matInput placeholder="Specify Locality"
+                                                           formControlName="locality_others">
+                                    </mat-form-field>
+                                    
+                                    <mat-form-field>
+                                        <mat-select placeholder="Approach to PD Location" formControlName="pd_location" required>
+                                            <mat-option value="{{data.pd_location_approach_id}}"
+                                                                    *ngFor="let data of locationdata">{{data.description}}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+
+                                    <mat-form-field>
+                                        <mat-select placeholder="Comment on Locality" formControlName="comment_locality" required>
+                                            <mat-option value="{{data.comments_on_locality_id}}"
+                                                                    *ngFor="let data of commentData">{{data.rating}}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+
+                                    <!--  Don't Remove To replace atlast of the PD Completion and creating new form (Customer Behaviour 221118 review doc : s.no 3.e )
+                                    <mat-form-field>
+                                        <mat-select placeholder="Customer Behaviour"
+                                                                formControlName="customer_behaviour" required>
+                                            <mat-option value="{{data.customer_behaviour_id}}"
+                                                                    *ngFor="let data of customerData">{{data.description}}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>--(Customer Behaviour)-->
+
+                                    <mat-form-field>
+                                            <mat-select placeholder="Ownership" formControlName="address_ownership">
+                                                            <mat-option value="{{ownerShip.id}}"
+                                                                                *ngFor="let ownerShip of ownerShipData">
+                                                                        {{ownerShip.name}}
+                                                                    </mat-option>
+                                            </mat-select>
+                                    </mat-form-field>
+                                    
+                                    <mat-form-field *ngIf="addressForm.controls['address_ownership'].value == 4 ">
+                                        <input matInput placeholder="Specify Other Ownership" formControlName="other_ownership">
+                                    </mat-form-field>
+
+                                    <mat-form-field>
+                                        <mat-select placeholder="Is there any business activity is being run?"
+                                                                    formControlName="bussiness_activity" required>
+                                             <mat-option value="yes">Yes</mat-option>
+                                             <mat-option value="no">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                                
+                                    <mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
+                                            <mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
+                                                <mat-option value="{{m_addressType.address_type_id}}"
+                                                                    *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
+                                                </mat-option>
+                                            </mat-select>
+                                    </mat-form-field>
+                                                        
+                                    <mat-form-field *ngIf="addressForm.controls['bussiness_address_type'].value == 12">
+                                        <input matInput placeholder="Bussiness Address Type Others" formControlName="bussiness_address_type_others">
+                                    </mat-form-field>
+                                            
+                                    <!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
+                                    <mat-card>
+                                        <mat-card-header>
+                                                        <p>Neighbourhood</p>     
+                                        </mat-card-header>
+                                        <div formArrayName="neighbourhood">
+                                                        <div *ngFor="let item of addressForm.controls.neighbourhood['controls']; let i=index" >
+                                                            <mat-card-content class="matcard" [formGroup]="item">
+                                                            <div>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Neighbour Name"
+                                                                           formControlName="name" required>
+                                                                </mat-form-field>
+                                                            </div>
+                                                            <div>
+                                                                <mat-form-field>
+                                                                    <mat-select placeholder="Do you know"
+                                                                                formControlName="do_you_know" required>
+                                                                        <mat-option value="{{m_neighbourStatus}}"
+                                                                                    *ngFor="let m_neighbourStatus of neighbourStatusData">{{m_neighbourStatus}}
+                                                                        </mat-option>
+                                                                    </mat-select>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <mat-select placeholder="Is the applicant owner"
+                                                                                    formControlName="is_owner" required>
+                                                            
+                                                                            <mat-option value="{{m_applicantOwner}}"
+                                                                                    *ngFor="let m_applicantOwner of applicantOwnerData">{{m_applicantOwner}}
+                                                                            </mat-option>
+                                                                    </mat-select>
+                                                                </mat-form-field>
+                                                            </div>
+                                                            <!-- <mat-form-field>
+                                                                    <input matInput placeholder="How long do you know the applicant"
+                                                                           formControlName="how_long">
+                                                                  </mat-form-field> ->-
+                                                            <div>
+                                                                <label>How long do you know the applicant?</label>
+                                                                <br>
+                                                                            <mat-form-field>
+                                                                                <input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field>
+                                                                                <input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
+                                                                            </mat-form-field>
+                                                            </div>
+                                            
+                                                                
+                                                            <button type="button" matTooltip="Add More Neighbour Details" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
+                                                                        (click)="addNeighbour($event)"
+                                                                       color="primary" style="float: right;">
+                                                                    <mat-icon>add</mat-icon>
+                                                            </button>
+                                                            <button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
+                                                                         (click)="removeNeighbour(i)"
+                                                                        style="float: right;">
+                                                                    <mat-icon>delete</mat-icon>
+                                                            </button>
+                                                            </mat-card-content>
+                                                            
+                                                        </div>
+                                                    </div>
+                                </mat-card>
+                                End of Neighbourhood Check-->                        
+                                     
+                                    
+                            </mat-card-content>
+                        </mat-card>
+                    </div>
+                </div>
+            </ng-template>
+        </mat-tab>
+            
+        <mat-tab label="Docs">
+                      <ng-template matTabContent>
+                                                        <div fxLayout="row wrap">
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                    
+                                                            </div>
+                                            
+                             </ng-template>
+                    </mat-tab>
+                  
+                  </mat-tab-group>
+    
+    </mat-dialog-content>
+    <mat-dialog-actions>
+
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <mat-form-field appearance="outline" style="width: 100%">
+                            <mat-label>Remarks</mat-label>
+                            <textarea matInput placeholder="Remarks" formControlName="address_form_remark"></textarea>
+                    </mat-form-field>
+                  </div>
+          <div fxFlex="40" align="end">
+            <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button> -->
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit" (click)="onSubmit()"><mat-icon>save</mat-icon></button>     
         </div>
-    </mat-card>
-    End of Neighbourhood Check-->
-    <div fxLayout="row">
-      <div fxFlex="60" class="pb-0 text-sm-left">
-        <mat-form-field appearance="outline" style="width: 100%">
-          <mat-label>Remarks</mat-label>
-          <textarea matInput placeholder="Remarks" formControlName="address_form_remark"></textarea>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="row" style="text-align:right;">
-             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit" (click)="onSubmit()"><mat-icon>save</mat-icon></button>
-          </div>
+    </mat-dialog-actions>
     
 </form>
+<notifier-container></notifier-container>
+
+    
+
+
 
-    </mat-card-content>
-</mat-card>
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
index b14df13c5..35daae966 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
@@ -1,19 +1,103 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
+.paragraph_change {
+  color:  #e00201 !important;
 }
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
 
-.address > * {
-  width: 100%;
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
-.matcard mat-form-field {
-  margin: 0 2%;
-  width:40%;
-}
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
-}
\ No newline at end of file
+  
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
+
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+//   width:40%;
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
index d5bb9f5fb..f993e2c48 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
@@ -1,13 +1,11 @@
 import {
-    Component,
-    OnInit,
-    Inject,
+    Component,OnInit,
+    Inject, Output,
     Input, ElementRef
 } from '@angular/core';
 
 import {
-    FormBuilder,
-    FormGroup,
+    FormBuilder, FormGroup,
     Validators,
     FormArray, FormControl, AbstractControl,
 } from '@angular/forms';
@@ -28,9 +26,17 @@ import {ActivatedRoute, Router} from "@angular/router";
     templateUrl: './address.component.html',
     styleUrls: ['./address.component.scss']
 })
-export class AddressComponent implements OnInit {
-    @Input() pdid: number;
 
+export class AddressComponent implements OnInit {
+    
+    pageTitle: string ="PD Address Details";
+    
+    //@Input() pdid: number;
+    pdid : number;
+    form_id: number;
+    
+    loadDataStatus: boolean=true;
+    
     locationdata: any = [];
     commentData: any = [];
     //customerData: any = []; 221118 review doc s.no 3.e
@@ -44,25 +50,31 @@ export class AddressComponent implements OnInit {
     public currentLoanForm: FormGroup;
     private notifier: NotifierService;
     public addressForm: FormGroup;
-
     public address: AbstractControl;
     public addressType: AbstractControl;
     public locality: AbstractControl;
     public pdLocation: AbstractControl;
     public commentlocality: AbstractControl;
     public customerBehaviour: AbstractControl;
-    
     public ownership: AbstractControl;
+    public other_ownership: AbstractControl;
     public bussinessActivity: AbstractControl;
-    
-    constructor(private el: ElementRef, notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+    //constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService , ) { 
+    constructor(private el: ElementRef, notifier: NotifierService, 
+                private fb: FormBuilder, 
+                private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) 
+    {
+        this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+        this.form_id = 5;
         this.notifier = notifier;
-
     }
+
     ngOnInit() {
         console.clear();
+        
         this.getMasterDetails('PDLOCATIONAPPROACH',1);
         this.getMasterDetails('COMMENTSONLOCALITY',2);
         //this.getMasterDetails('CUSTOMERBEHAVIOUR',3);review doc s.no 3.e
@@ -91,6 +103,7 @@ export class AddressComponent implements OnInit {
                this.addressForm.controls.locality.setValue(data.records.locality);
                this.addressForm.controls.address_form_remark.setValue(data.records.address_form_remark);
                this.addressForm.controls.address_ownership.setValue(data.records.address_ownership);
+               this.addressForm.controls.other_ownership.setValue(data.records.other_ownership);
                this.addressForm.controls.bussiness_activity.setValue(data.records.bussiness_activity);
                if(data.records.bussiness_activity == 'yes') {
                 this.addressForm.controls.bussiness_address_type.setValue(data.records.bussiness_address_type);
@@ -127,6 +140,7 @@ export class AddressComponent implements OnInit {
             //neighbourhood: this.fb.array([]),
             address_form_remark:[''],
             address_ownership:[''],
+            other_ownership:[''],
             bussiness_activity:[''],
             bussiness_address_type:[''],
             bussiness_address_type_others: ['']
@@ -138,6 +152,7 @@ export class AddressComponent implements OnInit {
         this.commentlocality = this.addressForm.controls['comment_locality'];
         //this.customerBehaviour = this.addressForm.controls['customer_behaviour'];
         this.ownership = this.addressForm.controls['address_ownership'];
+        this.other_ownership = this.addressForm.controls['other_ownership'];
         this.bussinessActivity = this.addressForm.controls['bussiness_activity'];
         // this.bussiessAddressType = this.addressForm.controls['bussiness_address_type'];
     }
@@ -207,6 +222,7 @@ export class AddressComponent implements OnInit {
         //records.neighbourhood = this.addressForm.controls.neighbourhood.value;
         records.address_form_remark = this.addressForm.controls.address_form_remark.value;
         records.address_ownership = this.ownership.value;
+        records.other_ownership = this.other_ownership.value;
         records.bussiness_activity = this.bussinessActivity.value;
         if (this.bussinessActivity.value == 'yes') {
             records.bussiness_address_type = this.addressForm.controls.bussiness_address_type.value;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
index e94b46460..f9c8c2402 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
@@ -1,309 +1,408 @@
 <form [formGroup]="_assessedIncomeFormFrom">
-            <!-- house hold expenses start-->
-  <!-- hide table based start -->
-              <!-- <mat-card>
-                  <mat-card-content *ngFor="let tbl of salesMonthWiseTable; let tableIndex=index">
-                      <table>
-                          <caption>{{tbl.salesItem}}</caption>	
-                          <thead>
-                          <tr>
-                            <th *ngFor="let tblHeader of tbl.headerElement; let tableHeaderIndex=index">
-                              {{tblHeader.header}}
-                            </th>
-                          </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td *ngFor="let tblBody of tbl.bodyElements;">
-                                  <table>
-                                      <tbody>
-                                  <tr *ngFor="let tblBodyTr of tblBody.bodyElement;">
-                                    <td>{{tblBodyTr.sales_date | date: 'dd-MM-yyyy'}}</td>
-                                    <td>{{tblBodyTr.sales_value}}</td>
-                                    </tr>
-                                    </tbody>
-                                    <tfoot>
-                                        <tr>
-                                          <td colspan="2">{{tblBody.bodyElementTotal}}</td>
-                                        </tr>
-                                      
-                                       
-                                      </tfoot>
-                                  </table>
-                              </td>
-                              
-                            </tr>
-                         
-                          
-                              
-                          </tbody>
-  
-                          <tfoot>
-                              <tr *ngFor="let parentTabFooter of tbl.parentTableFooter">
-                                <td colspan="parentTabFooter.cols_span_length">{{parentTabFooter.message}}</td>
-                                <td>{{parentTabFooter.value}}</td>
-                              </tr>
-                            
+
+        <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
+                </div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+        </h2>
+        
+        <mat-dialog-content>
+        
+        
+                <mat-tab-group>
+                        <mat-tab label="Questions">
+                          <ng-template matTabContent>
+                                <div fxLayout="row wrap">
+                                        <div fxFlex="100">
                              
-                            </tfoot>
-                          
-                        </table>
-                  </mat-card-content>
-                </mat-card> -->
-            <!-- hide table based end -->
-
-      <mat-card>
-        <mat-card-content>
-            <mat-form-field>
-                <input matInput placeholder="Sales Declared By Customer" formControlName="sales_declared_by_customer">
-            </mat-form-field>
-            <mat-accordion multi="false">
-                <mat-expansion-panel>
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        <small class="expan_table_header">Sales Calculate Item Wise</small>
-                    </mat-panel-title>
-                    <mat-panel-description class="subtitle_message">
-                        {{salesCaluatedItem.length}} &nbsp;Items
-                      </mat-panel-description>
-                  </mat-expansion-panel-header>
-                  <ng-template matExpansionPanelContent>
-                      <div class="example-container mat-elevation-z8">
-                          <table mat-table [dataSource]="salesCaluatedItem">
-                            <!-- Item Column -->
-                            <ng-container matColumnDef="Item">
-                              <th mat-header-cell *matHeaderCellDef>Item</th>
-                              <td mat-cell *matCellDef="let salesItem">{{salesItem.sales_item}} </td>
-                            </ng-container>
-                             <!-- Qty/Uom Column-->
-                             <ng-container matColumnDef="Qty/UOM">
-                                <th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
-                                <td mat-cell *matCellDef="let salesItem">{{salesItem.sales_qty }}/{{salesItem.uom_name }} </td>
-                              </ng-container>
-                               <!-- Rate/Unit Column-->
-                             <ng-container matColumnDef="Rate/Unit">
-                                <th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
-                                <td mat-cell *matCellDef="let salesItem"> {{salesItem.rate_per_unit }} </td>
-                              </ng-container>
-                            <!-- Frequency Name Column -->
-                            
-                            <ng-container matColumnDef="Frequency">
-                              <th mat-header-cell *matHeaderCellDef>Frequency</th>
-                              <td mat-cell *matCellDef="let salesItem"> {{salesItem.frequency_name}} </td>
-                            </ng-container>
-                            <!-- Annual Sale Value Column-->
-                            <ng-container matColumnDef="Annual Sale Value">
-                              <th mat-header-cell *matHeaderCellDef>Annual Sale Value</th>
-                              <td mat-cell *matCellDef="let salesItem"> {{salesItem.annual_sale_value}} </td>
-                            </ng-container>
-                          
-                            <tr mat-header-row *matHeaderRowDef="salesCaluatedItemColumns; sticky: true"></tr>
-                            <tr mat-row *matRowDef="let row; columns: salesCaluatedItemColumns;"></tr>
-                          </table>
-                          </div>
-                    </ng-template>
-                    </mat-expansion-panel>
-                    <mat-expansion-panel>
-                        <mat-expansion-panel-header>
-                          <mat-panel-title>
-                              <small class="expan_table_header">Sales Calculate Month Wise</small>
-                          </mat-panel-title>
-                          <mat-panel-description class="subtitle_message">
-                              {{salesMonthWiseExpandedItems.length}} &nbsp;Items
-                            </mat-panel-description>
-                        </mat-expansion-panel-header>
-                        <ng-template matExpansionPanelContent>
-                            <!-- <mat-accordion multi="true">
-                                <mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems">
-                                  <mat-expansion-panel-header>
-                                    <mat-panel-title>
-                                        <small class="expan_table_header">{{expandDetails.salesItem}}</small>
-                                    </mat-panel-title>
-                                  </mat-expansion-panel-header>
-                                  <ng-template matExpansionPanelContent>
-                                             
-                    
-                                  </ng-template>
-                                  
-                                  <mat-action-row *ngFor="let footer of expandDetails.footerMessage">
-                                          <div fxFlex="50" >
-                                             <small class="expan_footer">{{footer.month_message}}</small>
-                                          </div>
-                                          <div fxFlex="50" >
-                                    <small class="expan_footer">{{footer.year_message}}</small>
-                                          </div>
-                                  </mat-action-row>
-                                </mat-expansion-panel>
-                              </mat-accordion> -->
-                              <mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems">
-                                <mat-card-header>
-                                  <mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title>
-                                      <mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage">
-                                          <div fxFlex="100">
-                                              {{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
-                                          </div>
+                                            <mat-card>
+                                                <mat-card-content>
+                                                    <mat-form-field>
+                                                        <input matInput placeholder="Sales Declared By Customer" formControlName="sales_declared_by_customer">
+                                                    </mat-form-field>
+                                                    <mat-accordion multi="false">
+                                                        <mat-expansion-panel>
+                                                          <mat-expansion-panel-header>
+                                                            <mat-panel-title>
+                                                                <small class="expan_table_header">Sales Calculate Item Wise</small>
+                                                            </mat-panel-title>
+                                                            <mat-panel-description class="subtitle_message">
+                                                                {{salesCaluatedItem.length}} &nbsp;Items
+                                                              </mat-panel-description>
+                                                          </mat-expansion-panel-header>
+                                                          <ng-template matExpansionPanelContent>
+                                                              <div class="example-container mat-elevation-z8">
+                                                                  <table mat-table [dataSource]="salesCaluatedItem">
+                                                                    <!-- Item Column -->
+                                                                    <ng-container matColumnDef="Item">
+                                                                      <th mat-header-cell *matHeaderCellDef>Item</th>
+                                                                      <td mat-cell *matCellDef="let salesItem">{{salesItem.sales_item}} </td>
+                                                                    </ng-container>
+                                                                     <!-- Qty/Uom Column-->
+                                                                     <ng-container matColumnDef="Qty/UOM">
+                                                                        <th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
+                                                                        <td mat-cell *matCellDef="let salesItem">{{salesItem.sales_qty }}/{{salesItem.uom_name }} </td>
+                                                                      </ng-container>
+                                                                       <!-- Rate/Unit Column-->
+                                                                     <ng-container matColumnDef="Rate/Unit">
+                                                                        <th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
+                                                                        <td mat-cell *matCellDef="let salesItem"> {{salesItem.rate_per_unit }} </td>
+                                                                      </ng-container>
+                                                                    <!-- Frequency Name Column -->
+                                                                    
+                                                                    <ng-container matColumnDef="Frequency">
+                                                                      <th mat-header-cell *matHeaderCellDef>Frequency</th>
+                                                                      <td mat-cell *matCellDef="let salesItem"> {{salesItem.frequency_name}} </td>
+                                                                    </ng-container>
+                                                                    <!-- Annual Sale Value Column-->
+                                                                    <ng-container matColumnDef="Annual Sale Value">
+                                                                      <th mat-header-cell *matHeaderCellDef>Annual Sale Value</th>
+                                                                      <td mat-cell *matCellDef="let salesItem"> {{salesItem.annual_sale_value}} </td>
+                                                                    </ng-container>
+                                                                  
+                                                                    <tr mat-header-row *matHeaderRowDef="salesCaluatedItemColumns; sticky: true"></tr>
+                                                                    <tr mat-row *matRowDef="let row; columns: salesCaluatedItemColumns;"></tr>
+                                                                  </table>
+                                                                  </div>
+                                                            </ng-template>
+                                                            </mat-expansion-panel>
+                                                            <mat-expansion-panel>
+                                                                <mat-expansion-panel-header>
+                                                                  <mat-panel-title>
+                                                                      <small class="expan_table_header">Sales Calculate Month Wise</small>
+                                                                  </mat-panel-title>
+                                                                  <mat-panel-description class="subtitle_message">
+                                                                      {{salesMonthWiseExpandedItems.length}} &nbsp;Items
+                                                                    </mat-panel-description>
+                                                                </mat-expansion-panel-header>
+                                                                <ng-template matExpansionPanelContent>
+                                                                    <!-- <mat-accordion multi="true">
+                                                                        <mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems">
+                                                                          <mat-expansion-panel-header>
+                                                                            <mat-panel-title>
+                                                                                <small class="expan_table_header">{{expandDetails.salesItem}}</small>
+                                                                            </mat-panel-title>
+                                                                          </mat-expansion-panel-header>
+                                                                          <ng-template matExpansionPanelContent>
+                                                                                     
+                                                            
+                                                                          </ng-template>
+                                                                          
+                                                                          <mat-action-row *ngFor="let footer of expandDetails.footerMessage">
+                                                                                  <div fxFlex="50" >
+                                                                                     <small class="expan_footer">{{footer.month_message}}</small>
+                                                                                  </div>
+                                                                                  <div fxFlex="50" >
+                                                                            <small class="expan_footer">{{footer.year_message}}</small>
+                                                                                  </div>
+                                                                          </mat-action-row>
+                                                                        </mat-expansion-panel>
+                                                                      </mat-accordion> -->
+                                                                      <mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems">
+                                                                        <mat-card-header>
+                                                                          <mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title>
+                                                                              <mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage">
+                                                                                  <div fxFlex="100">
+                                                                                      {{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
+                                                                                  </div>
+                                                                                
+                                                                              </mat-card-subtitle>
+                                                                          </mat-card-header>
+                                                                          <mat-divider></mat-divider>
+                                                                          <mat-card-content style="display: flex;margin-top: -20px;">
+                                                                              <!-- <div fxLayout="row wrap">
+                                                                                </div> -->
+                                                                                <div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
+                                                                         
+                                                                                    <h4 align="center" class="h4_font">{{eachItem.header}}</h4>
+                                                                                    <table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
+                                                                                        <ng-container matColumnDef="Date">
+                                                                                            <th mat-header-cell *matHeaderCellDef>Date</th>
+                                                                                            <td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
+                                                                                            <td mat-footer-cell *matFooterCellDef> Total </td>
+                                                                                          </ng-container>
+                                                                                           <!-- Value Column-->
+                                                                                           <ng-container matColumnDef="Amount">
+                                                                                              <th mat-header-cell *matHeaderCellDef>Amount</th>
+                                                                                              <td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
+                                                                                              <td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
+                                                                                            </ng-container>
+                                                                                      
+                                                                                          <tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
+                                                                                          <tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
+                                                                                          <tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
+                                                                                   </table>
+                                                                                  </div>
+                                                                                 
+                                                                          </mat-card-content>
+                                            
+                                                                        </mat-card>
                                         
-                                      </mat-card-subtitle>
-                                  </mat-card-header>
-                                  <mat-divider></mat-divider>
-                                  <mat-card-content style="display: flex;margin-top: -20px;">
-                                      <!-- <div fxLayout="row wrap">
-                                        </div> -->
-                                        <div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
-                                 
-                                            <h4 align="center" class="h4_font">{{eachItem.header}}</h4>
-                                            <table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
-                                                <ng-container matColumnDef="Date">
-                                                    <th mat-header-cell *matHeaderCellDef>Date</th>
-                                                    <td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
-                                                    <td mat-footer-cell *matFooterCellDef> Total </td>
-                                                  </ng-container>
-                                                   <!-- Value Column-->
-                                                   <ng-container matColumnDef="Amount">
-                                                      <th mat-header-cell *matHeaderCellDef>Amount</th>
-                                                      <td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
-                                                      <td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
-                                                    </ng-container>
-                                              
-                                                  <tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
-                                                  <tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
-                                                  <tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
-                                           </table>
-                                          </div>
-                                         
-                                  </mat-card-content>
-    
-                                </mat-card>
-
+                                                                  </ng-template>
+                                                                  </mat-expansion-panel>
+                                        
+                                                                  <mat-expansion-panel>
+                                                                      <mat-expansion-panel-header>
+                                                                        <mat-panel-title>
+                                                                            <small class="expan_table_header">Purchase Details</small>
+                                                                        </mat-panel-title>
+                                                                        <mat-panel-description class="subtitle_message">
+                                                                            {{purchaseDetails.length}} &nbsp;Items
+                                                                          </mat-panel-description>
+                                                                      </mat-expansion-panel-header>
+                                                                      <ng-template matExpansionPanelContent>
+                                                                          <div class="example-container mat-elevation-z8">
+                                                                              <table mat-table [dataSource]="purchaseDetails">
+                                                                                  <!-- Item Column -->
+                                                                                  <ng-container matColumnDef="Item">
+                                                                                    <th mat-header-cell *matHeaderCellDef>Item</th>
+                                                                                    <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td>
+                                                                                  </ng-container>
+                                                                                   <!-- Qty/Uom Column-->
+                                                                                   <ng-container matColumnDef="Qty/UOM">
+                                                                                      <th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
+                                                                                      <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_qty }}/{{purchaseItem.uom_name }} </td>
+                                                                                    </ng-container>
+                                                                                     <!-- Rate/Unit Column-->
+                                                                                   <ng-container matColumnDef="Rate/Unit">
+                                                                                      <th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
+                                                                                      <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.rate_per_unit }} </td>
+                                                                                    </ng-container>
+                                                                                  <!-- Frequency Name Column -->
+                                                                                  
+                                                                                  <ng-container matColumnDef="Frequency">
+                                                                                    <th mat-header-cell *matHeaderCellDef>Frequency</th>
+                                                                                    <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.frequency_name}} </td>
+                                                                                  </ng-container>
+                                                                                  <!-- Annual Sale Value Column-->
+                                                                                  <ng-container matColumnDef="Annual Purchase Value">
+                                                                                    <th mat-header-cell *matHeaderCellDef>Annual Purchase Value</th>
+                                                                                    <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.annual_purchase_value}} </td>
+                                                                                  </ng-container>
+                                                                                
+                                                                                  <tr mat-header-row *matHeaderRowDef="purchaseDetailsColumns; sticky: true"></tr>
+                                                                                  <tr mat-row *matRowDef="let row; columns: purchaseDetailsColumns;"></tr>
+                                                                                </table>
+                                                                              </div>
+                                                                        </ng-template>
+                                                                        </mat-expansion-panel>
+                                                                        <mat-expansion-panel>
+                                                                            <mat-expansion-panel-header>
+                                                                              <mat-panel-title>
+                                                                                  <small class="expan_table_header">Business Expenses</small>
+                                                                              </mat-panel-title>
+                                                                              <mat-panel-description class="subtitle_message">
+                                                                                  {{businessExpenses.length}} &nbsp;Items
+                                                                                </mat-panel-description>
+                                                                            </mat-expansion-panel-header>
+                                                                            <ng-template matExpansionPanelContent>
+                                                                                <div class="example-container mat-elevation-z8">
+                                                                                    <table mat-table [dataSource]="businessExpenses">
+                                                                                        <!-- Expense Item Column -->
+                                                                                        <ng-container matColumnDef="Item">
+                                                                                          <th mat-header-cell *matHeaderCellDef>Item</th>
+                                                                                          <td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_item}} </td>
+                                                                                        </ng-container>
+                                                                                      
+                                                                                        <!-- Expense Value Column-->
+                                                                                        <ng-container matColumnDef="Value">
+                                                                                          <th mat-header-cell *matHeaderCellDef>Value</th>
+                                                                                          <td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td>
+                                                                                        </ng-container>
+                                                                                        <!-- Frequency Name Column -->
+                                                                                        <ng-container matColumnDef="Frequency">
+                                                                                          <th mat-header-cell *matHeaderCellDef>Frequency</th>
+                                                                                          <td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td>
+                                                                                        </ng-container>
+                                                                                        <!-- Annual Expenses Value Column-->
+                                                                                        <ng-container matColumnDef="Annual Expenses Value">
+                                                                                          <th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
+                                                                                          <td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td>
+                                                                                        </ng-container>
+                                                                                      
+                                                                                        <tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr>
+                                                                                        <tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr>
+                                                                                      </table>
+                                                                                    </div>
+                                                                              </ng-template>
+                                                                              </mat-expansion-panel>
+                                                                              <mat-expansion-panel>
+                                                                                  <mat-expansion-panel-header>
+                                                                                    <mat-panel-title>
+                                                                                        <small class="expan_table_header">House Hold Expenses</small>
+                                                                                    </mat-panel-title>
+                                                                                    <mat-panel-description class="subtitle_message">
+                                                                                        {{houseHoldExpenses.length}} &nbsp;Items
+                                                                                      </mat-panel-description>
+                                                                                  </mat-expansion-panel-header>
+                                                                                  <ng-template matExpansionPanelContent>
+                                                                                      <div class="example-container mat-elevation-z8">
+                                                                                          <table mat-table [dataSource]="houseHoldExpenses">
+                                                                                              <!-- Item Column -->
+                                                                                              <ng-container matColumnDef="Item">
+                                                                                                <th mat-header-cell *matHeaderCellDef>Item</th>
+                                                                                                <td mat-cell *matCellDef="let householdItem">{{householdItem.expense_item}} </td>
+                                                                                              </ng-container>
+                                                                                               <!-- Value Column-->
+                                                                                               <ng-container matColumnDef="Value">
+                                                                                                  <th mat-header-cell *matHeaderCellDef>Value</th>
+                                                                                                  <td mat-cell *matCellDef="let householdItem">{{householdItem.expense_value }}</td>
+                                                                                                </ng-container>
+                                                                                              <!-- Frequency Name Column -->
+                                                                                              <ng-container matColumnDef="Frequency">
+                                                                                                <th mat-header-cell *matHeaderCellDef>Frequency</th>
+                                                                                                <td mat-cell *matCellDef="let householdItem"> {{householdItem.frequency_name}} </td>
+                                                                                              </ng-container>
+                                                                                              <!-- Annual Expense Value Column-->
+                                                                                              <ng-container matColumnDef="Annual Expenses Value">
+                                                                                                <th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
+                                                                                                <td mat-cell *matCellDef="let householdItem"> {{householdItem.annual_expense_value}} </td>
+                                                                                              </ng-container>
+                                                                                            
+                                                                                              <tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr>
+                                                                                              <tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr>
+                                                                                            </table>
+                                                                                          </div>
+                                                                                    </ng-template>
+                                                                                    </mat-expansion-panel>
+                                                            </mat-accordion>
+                                                      
+                                                </mat-card-content>
+                                              </mat-card>
+                             
+                                        </div>
+                                </div>
                           </ng-template>
-                          </mat-expansion-panel>
-
-                          <mat-expansion-panel>
-                              <mat-expansion-panel-header>
-                                <mat-panel-title>
-                                    <small class="expan_table_header">Purchase Details</small>
-                                </mat-panel-title>
-                                <mat-panel-description class="subtitle_message">
-                                    {{purchaseDetails.length}} &nbsp;Items
-                                  </mat-panel-description>
-                              </mat-expansion-panel-header>
-                              <ng-template matExpansionPanelContent>
-                                  <div class="example-container mat-elevation-z8">
-                                      <table mat-table [dataSource]="purchaseDetails">
-                                          <!-- Item Column -->
-                                          <ng-container matColumnDef="Item">
-                                            <th mat-header-cell *matHeaderCellDef>Item</th>
-                                            <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td>
-                                          </ng-container>
-                                           <!-- Qty/Uom Column-->
-                                           <ng-container matColumnDef="Qty/UOM">
-                                              <th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
-                                              <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_qty }}/{{purchaseItem.uom_name }} </td>
-                                            </ng-container>
-                                             <!-- Rate/Unit Column-->
-                                           <ng-container matColumnDef="Rate/Unit">
-                                              <th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
-                                              <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.rate_per_unit }} </td>
-                                            </ng-container>
-                                          <!-- Frequency Name Column -->
-                                          
-                                          <ng-container matColumnDef="Frequency">
-                                            <th mat-header-cell *matHeaderCellDef>Frequency</th>
-                                            <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.frequency_name}} </td>
-                                          </ng-container>
-                                          <!-- Annual Sale Value Column-->
-                                          <ng-container matColumnDef="Annual Purchase Value">
-                                            <th mat-header-cell *matHeaderCellDef>Annual Purchase Value</th>
-                                            <td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.annual_purchase_value}} </td>
-                                          </ng-container>
+                        </mat-tab>
+                        <mat-tab label="Docs">
+                          <ng-template matTabContent>
+                                                            <div fxLayout="row wrap">
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
                                         
-                                          <tr mat-header-row *matHeaderRowDef="purchaseDetailsColumns; sticky: true"></tr>
-                                          <tr mat-row *matRowDef="let row; columns: purchaseDetailsColumns;"></tr>
-                                        </table>
-                                      </div>
-                                </ng-template>
-                                </mat-expansion-panel>
-                                <mat-expansion-panel>
-                                    <mat-expansion-panel-header>
-                                      <mat-panel-title>
-                                          <small class="expan_table_header">Business Expenses</small>
-                                      </mat-panel-title>
-                                      <mat-panel-description class="subtitle_message">
-                                          {{businessExpenses.length}} &nbsp;Items
-                                        </mat-panel-description>
-                                    </mat-expansion-panel-header>
-                                    <ng-template matExpansionPanelContent>
-                                        <div class="example-container mat-elevation-z8">
-                                            <table mat-table [dataSource]="businessExpenses">
-                                                <!-- Expense Item Column -->
-                                                <ng-container matColumnDef="Item">
-                                                  <th mat-header-cell *matHeaderCellDef>Item</th>
-                                                  <td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_item}} </td>
-                                                </ng-container>
-                                              
-                                                <!-- Expense Value Column-->
-                                                <ng-container matColumnDef="Value">
-                                                  <th mat-header-cell *matHeaderCellDef>Value</th>
-                                                  <td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td>
-                                                </ng-container>
-                                                <!-- Frequency Name Column -->
-                                                <ng-container matColumnDef="Frequency">
-                                                  <th mat-header-cell *matHeaderCellDef>Frequency</th>
-                                                  <td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td>
-                                                </ng-container>
-                                                <!-- Annual Expenses Value Column-->
-                                                <ng-container matColumnDef="Annual Expenses Value">
-                                                  <th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
-                                                  <td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td>
-                                                </ng-container>
-                                              
-                                                <tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr>
-                                                <tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr>
-                                              </table>
-                                            </div>
-                                      </ng-template>
-                                      </mat-expansion-panel>
-                                      <mat-expansion-panel>
-                                          <mat-expansion-panel-header>
-                                            <mat-panel-title>
-                                                <small class="expan_table_header">House Hold Expenses</small>
-                                            </mat-panel-title>
-                                            <mat-panel-description class="subtitle_message">
-                                                {{houseHoldExpenses.length}} &nbsp;Items
-                                              </mat-panel-description>
-                                          </mat-expansion-panel-header>
-                                          <ng-template matExpansionPanelContent>
-                                              <div class="example-container mat-elevation-z8">
-                                                  <table mat-table [dataSource]="houseHoldExpenses">
-                                                      <!-- Item Column -->
-                                                      <ng-container matColumnDef="Item">
-                                                        <th mat-header-cell *matHeaderCellDef>Item</th>
-                                                        <td mat-cell *matCellDef="let householdItem">{{householdItem.expense_item}} </td>
-                                                      </ng-container>
-                                                       <!-- Value Column-->
-                                                       <ng-container matColumnDef="Value">
-                                                          <th mat-header-cell *matHeaderCellDef>Value</th>
-                                                          <td mat-cell *matCellDef="let householdItem">{{householdItem.expense_value }}</td>
-                                                        </ng-container>
-                                                      <!-- Frequency Name Column -->
-                                                      <ng-container matColumnDef="Frequency">
-                                                        <th mat-header-cell *matHeaderCellDef>Frequency</th>
-                                                        <td mat-cell *matCellDef="let householdItem"> {{householdItem.frequency_name}} </td>
-                                                      </ng-container>
-                                                      <!-- Annual Expense Value Column-->
-                                                      <ng-container matColumnDef="Annual Expenses Value">
-                                                        <th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
-                                                        <td mat-cell *matCellDef="let householdItem"> {{householdItem.annual_expense_value}} </td>
-                                                      </ng-container>
-                                                    
-                                                      <tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr>
-                                                      <tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr>
-                                                    </table>
-                                                  </div>
-                                            </ng-template>
-                                            </mat-expansion-panel>
-                    </mat-accordion>
-              
-        </mat-card-content>
-      </mat-card>
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                            <div class="p-list-main mb-2">
+                                                                                                <div class="p-list">
+                                            
+                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                    <div class="bottom">
+                                                                                                        <div class="left">
+                                                                                                            <div class="details">
+                                                                                                                <small>Nivi SKM</small>
+                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                            </div>
+                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                        
+                                                                </div>
+                                                
+                                 </ng-template>
+                        </mat-tab>
+                      
+                      </mat-tab-group>
+        
+        </mat-dialog-content>
+        <mat-dialog-actions>
+                <!-- <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                        <mat-form-field appearance="outline" style="width: 100%">
+                          <mat-label>Remarks</mat-label>
+                          <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                        </mat-form-field>
+                      </div>
+              <div fxFlex="40" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
+            </div> -->
+        </mat-dialog-actions>
+        
         </form>
+        <notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss
index 340230c9f..5e603e032 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss
@@ -33,6 +33,92 @@ tr.mat-footer-row {
     color:#e00201 !important;
   }
 
+
+  .paragraph_change {
+    color:  #e00201 !important;
+  }
+  .mat-card-content {
+      background-color: white;
+    }
+    .mat-card-actions {
+      background-color: white;
+    }
+  
+    mat-form-field {
+      margin: 0 2%;
+    }
+    $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+  $product-bg-color-hover: rgba(103, 58, 183, 0.7);
+  .p-list-main {
+      background: white;
+      margin: auto;
+      position: relative;
+      overflow: hidden !important;
+      border-radius: 10px 10px 10px 10px;
+      box-shadow: $base-card-box-shadow;
+      transform: scale(0.95);
+      transition: box-shadow 0.5s, transform 0.5s;
+      &:hover {
+          transform: scale(1);
+          box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+      }
+      .p-list {
+          position: relative;
+          .top {
+              height: 100%;
+              width: 100%;
+              //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+              -webkit-background-size: 100%;
+              -moz-background-size: 100%;
+              -o-background-size: 100%;
+              background-size: 100%;
+          }
+          .bottom {
+              width: 200%;
+              height: 15%;
+              transition: transform 0.5s;
+              h1 {
+                  margin: 0;
+                  padding: 0;
+              }
+              p {
+                  margin: 0;
+                  padding: 0;
+              }
+              .left {
+                  height: 100%;
+                  width: 50%;
+                  background: #f4f4f4;
+                  position: relative;
+                  float: left;
+                  .details {
+                      padding: 5px;
+                      float: left;
+                      // width: calc(70% - 40px);
+                  }
+                 
+              }
+              .right {
+                  width: 50%;
+                  background: #A6CDDE;
+                  color: white;
+                  float: right;
+                  height: 200%;
+                  overflow: hidden;
+                  .details {
+                      padding: 20px;
+                      float: right;
+                      width: calc(70% - 40px);
+                  }
+                 
+               
+              }
+          }
+      }
+     
+  }
+    
+
 //  table, th, td {
 //     border: 1px solid rgba(0, 0, 0, 0.12);
 //     border-collapse: collapse;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts
index 87470a02e..d65a250c7 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts
@@ -1,6 +1,11 @@
 import {Component,OnInit,Inject,Input, ViewChild } from '@angular/core';
 import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
 import { NotifierService } from 'angular-notifier';
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA
+} from '@angular/material';
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
@@ -13,8 +18,11 @@ import { ActivatedRoute, Router } from "@angular/router";
 export class AssessedIncomeComponent implements OnInit {
   public _assessedIncomeFormFrom: FormGroup;
   private notifier: NotifierService;
-  @Input() pdid: number;
-  @Input() form_id: number;
+    pageTitle: string ="Assessed Income Details";
+    // @Input() pdid: number;
+    // @Input() form_id: number;
+   pdid: number;
+   form_id: number;
   salesCaluatedItemColumns: string[] = ['Item', 'Qty/UOM','Rate/Unit','Frequency','Annual Sale Value'];
   public salesCaluatedItem:any= [];
   salesItemMonthWiseColumns: string[] = ['Item', 'Value','Frequency','Annual Expenses Value'];
@@ -39,9 +47,12 @@ salesMonthWiseExpandedItems: any=[]
 
   constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
     private router: Router,
-    private _pd: PdTrigerService) {
-    
-     }
+    private _pd: PdTrigerService,
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+      this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+      this.notifier = notifier;
+      this.form_id = 16;
+    }
 
   ngOnInit() {
    
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
index c6fdcb566..c07476cda 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
@@ -1,9 +1,26 @@
-<!--<pre> {{ m_group | json}}</pre>-->
+<form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
+
+<h2 mat-dialog-title class="paragraph_change">
+        <div fxFlex="70" align="left">
+                {{pageTitle}}
+        </div>
+        <div fxFlex="30" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+        
+        </div>
+</h2>
+
+<mat-dialog-content>
+
+
+        <mat-tab-group>
+                <mat-tab label="Questions">
+                  <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                                <div fxFlex="100">
 
 <mat-card style="min-height: 550px;">
   <mat-card-content>
-    <p>Assets Details</p>
-    <form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
       <div fxLayout="row" fxLayoutAlign="start none">
         <div formArrayName="assets_details" fxFill>
           <div *ngFor="let sup of _assetsQuesFrom.controls.assets_details['controls']; let i=index">
@@ -272,24 +289,146 @@
           </div>
         </div>
       </div>
-      <div fxLayout="row">
-        <div fxFlex="60" class="pb-0 text-sm-left">
-          <mat-form-field appearance="outline" style="width: 100%">
-            <mat-label>Remarks</mat-label>
-            <textarea matInput placeholder="Remarks" formControlName="assets_form_remark"></textarea>
-          </mat-form-field>
-        </div>
-      </div>
+      
       <div class="row" style="text-align:right;">
         <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Asset Details" matTooltipPosition="above"
           class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
 
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="onReset(); false"><mat-icon>settings_backup_restore</mat-icon></button>
-        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+        
       </div>
-    </form>
+    
   </mat-card-content>
 
 
 
-</mat-card>
\ No newline at end of file
+</mat-card>
+</div>
+</div>
+</ng-template>
+</mat-tab>
+<mat-tab label="Docs">
+    <ng-template matTabContent>
+                                      <div fxLayout="row wrap">
+                                              <div fxFlex="25" class="m-gap p-gap">
+                                                  <div class="p-list-main mb-2">
+                                                      <div class="p-list">
+  
+                                                          <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                          <div class="bottom">
+                                                              <div class="left">
+                                                                  <div class="details">
+                                                                      <small>Nivi SKM</small>
+                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                  </div>
+                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                  </div>
+                                              </div>
+                                              <div fxFlex="25" class="m-gap p-gap">
+                                                      <div class="p-list-main mb-2">
+                                                          <div class="p-list">
+      
+                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                              <div class="bottom">
+                                                                  <div class="left">
+                                                                      <div class="details">
+                                                                          <small>Nivi SKM</small>
+                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                      </div>
+                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                  </div>
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                          <div class="p-list-main mb-2">
+                                                              <div class="p-list">
+          
+                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                  <div class="bottom">
+                                                                      <div class="left">
+                                                                          <div class="details">
+                                                                              <small>Nivi SKM</small>
+                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                          </div>
+                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                      <div fxFlex="25" class="m-gap p-gap">
+                                                              <div class="p-list-main mb-2">
+                                                                  <div class="p-list">
+              
+                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                      <div class="bottom">
+                                                                          <div class="left">
+                                                                              <div class="details">
+                                                                                  <small>Nivi SKM</small>
+                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                              </div>
+                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                          <div fxFlex="25" class="m-gap p-gap">
+                                                                  <div class="p-list-main mb-2">
+                                                                      <div class="p-list">
+                  
+                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                          <div class="bottom">
+                                                                              <div class="left">
+                                                                                  <div class="details">
+                                                                                      <small>Nivi SKM</small>
+                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                  </div>
+                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+  
+                                          </div>
+                          
+           </ng-template>
+</mat-tab>
+</mat-tab-group>
+</mat-dialog-content>
+<mat-dialog-actions>
+
+    <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+            <mat-form-field appearance="outline" style="width: 100%">
+                    <mat-label>Remarks</mat-label>
+                    <textarea matInput placeholder="Remarks" formControlName="assets_form_remark"></textarea>
+            </mat-form-field>
+          </div>
+  <div fxFlex="40" align="end">
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+</div>
+</mat-dialog-actions>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
index e69de29bb..295f68262 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
@@ -0,0 +1,83 @@
+.paragraph_change {
+    color:  #e00201 !important;
+  }
+  .mat-card-content {
+      background-color: white;
+    }
+    .mat-card-actions {
+      background-color: white;
+    }
+  
+    mat-form-field {
+      margin: 0 2%;
+    }
+    $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+  $product-bg-color-hover: rgba(103, 58, 183, 0.7);
+  .p-list-main {
+      background: white;
+      margin: auto;
+      position: relative;
+      overflow: hidden !important;
+      border-radius: 10px 10px 10px 10px;
+      box-shadow: $base-card-box-shadow;
+      transform: scale(0.95);
+      transition: box-shadow 0.5s, transform 0.5s;
+      &:hover {
+          transform: scale(1);
+          box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+      }
+      .p-list {
+          position: relative;
+          .top {
+              height: 100%;
+              width: 100%;
+              //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+              -webkit-background-size: 100%;
+              -moz-background-size: 100%;
+              -o-background-size: 100%;
+              background-size: 100%;
+          }
+          .bottom {
+              width: 200%;
+              height: 15%;
+              transition: transform 0.5s;
+              h1 {
+                  margin: 0;
+                  padding: 0;
+              }
+              p {
+                  margin: 0;
+                  padding: 0;
+              }
+              .left {
+                  height: 100%;
+                  width: 50%;
+                  background: #f4f4f4;
+                  position: relative;
+                  float: left;
+                  .details {
+                      padding: 5px;
+                      float: left;
+                      // width: calc(70% - 40px);
+                  }
+                 
+              }
+              .right {
+                  width: 50%;
+                  background: #A6CDDE;
+                  color: white;
+                  float: right;
+                  height: 200%;
+                  overflow: hidden;
+                  .details {
+                      padding: 20px;
+                      float: right;
+                      width: calc(70% - 40px);
+                  }
+                 
+               
+              }
+          }
+      }
+     
+  }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
index 517054410..47119531b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
@@ -28,9 +28,10 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
   styleUrls: ['./assets-info.component.scss']
 })
 export class AssetsInfoComponent implements OnInit {
-
-  @Input() pdid: number;
-
+  pageTitle: string ="Assets Details";
+  //@Input() pdid: number;
+  pdid:string;
+  
   public _assetsQuesFrom: FormGroup;
   public submitted = false;
   public m_assets_type = [];
@@ -163,9 +164,13 @@ public m_investmentType = [];
   constructor(
     notifier: NotifierService,
     private _formBuilder: FormBuilder,
-    private pdTrigerService: PdTrigerService) {
-    this.notifier = notifier;
-  }
+    private pdTrigerService: PdTrigerService, 
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+      this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+      this.notifier = notifier;
+    }
+    
+  
 
   ngOnInit() {
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
index adf960547..c39bc3442 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
@@ -67,10 +67,20 @@
 <!--</form>-->
 <!--</mat-card>-->
 <!--=======-->
-<mat-card style="min-height: 550px;">
-    <mat-card-content>
-        <p>Banking Information</p>
-            <form [formGroup]="bankingForm" class="bankForm">
+<form [formGroup]="bankingForm" class="bankForm">
+<h2 mat-dialog-title class="paragraph_change">
+    <div fxFlex="70" align="left">{{pageTitle}}</div>
+    <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                                
+    </div>
+</h2>
+<mat-dialog-content>
+<mat-tab-group>
+            
+<mat-tab label="Questions">
+<mat-card>
+    <mat-card-content>    
                     <div formArrayName="itemRows" autocomplete="off">
                         <mat-accordion 
                                 *ngFor="let itemrow of bankingForm.controls.itemRows['controls']; let i=index"
@@ -175,24 +185,139 @@
         </button></div>
                         </mat-accordion>
                     </div>
-                    <div fxLayout="row" class="pt-1">
-                            <div fxFlex="60" class="pb-0 text-sm-left">
-                              <mat-form-field appearance="outline" style="width: 100%">
-                                <mat-label>Remarks</mat-label>
-                                <textarea matInput placeholder="Remarks" formControlName="banking_form_remark" required></textarea>
-                              </mat-form-field>
-                            </div>
-                          </div>
-                    <div style="text-align: right;" class="pt-1">
-                            <!-- <button  class="mr-1 mb-1" color="primary" mat-raised-button mat-icon-button matTooltip="Add More Banking Details" matTooltipPosition="above"  (click)="addBankdetails(i)">
-                                    <mat-icon >add</mat-icon>
-        </button> -->
-                            <button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="bankSubmit()"><mat-icon>save</mat-icon>
-                            </button>
-                   </div>
-                </form>
-                <notifier-container></notifier-container>
+                    
     </mat-card-content>
 </mat-card>
+</mat-tab>
+<mat-tab label="Docs">
+        <ng-template matTabContent>
+                                            <div fxLayout="row wrap">
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                      <div class="p-list-main mb-2">
+                                                          <div class="p-list">
+      
+                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                              <div class="bottom">
+                                                                  <div class="left">
+                                                                      <div class="details">
+                                                                          <small>Nivi SKM</small>
+                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                      </div>
+                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                  </div>
 
-  
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                          <div class="p-list-main mb-2">
+                                                              <div class="p-list">
+          
+                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                  <div class="bottom">
+                                                                      <div class="left">
+                                                                          <div class="details">
+                                                                              <small>Nivi SKM</small>
+                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                          </div>
+                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                  </div>
+
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                              <div class="p-list-main mb-2">
+                                                                  <div class="p-list">
+              
+                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                      <div class="bottom">
+                                                                          <div class="left">
+                                                                              <div class="details">
+                                                                                  <small>Nivi SKM</small>
+                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                              </div>
+                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                  </div>
+
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                  <div class="p-list-main mb-2">
+                                                                      <div class="p-list">
+                  
+                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                          <div class="bottom">
+                                                                              <div class="left">
+                                                                                  <div class="details">
+                                                                                      <small>Nivi SKM</small>
+                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                  </div>
+                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                  </div>
+
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                  </div>
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                  </div>
+      
+                                              </div>
+                              
+        </ng-template>
+</mat-tab>
+
+</mat-tab-group>
+</mat-dialog-content>
+<mat-dialog-actions>
+        <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                <mat-form-field appearance="outline" style="width: 100%">
+                  <mat-label>Remarks</mat-label>
+                  <textarea matInput placeholder="Remarks" formControlName="banking_form_remark" required></textarea>
+                </mat-form-field>
+              </div>
+      <div fxFlex="40" align="end">
+            <button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="bankSubmit()"><mat-icon>save</mat-icon>
+            </button>
+      </div>
+</mat-dialog-actions>
+
+</form>
+<notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
index bb27e4477..08086044f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
@@ -7,4 +7,89 @@
   width: 10px;
   background: #62B013;
   color: white;
-}
\ No newline at end of file
+}
+
+
+.paragraph_change {
+  color:  #e00201 !important;
+}
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
index 868d57c9f..885aba086 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
@@ -28,8 +28,8 @@ import {ActivatedRoute, Router} from "@angular/router";
     styleUrls: ['./banking-details.component.scss']
 })
 export class BankingDetailsComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() pd_all_details:any;
+     pdid: number;
+     pageTitle: string ="Banking Information";
     public bankingForm: FormGroup;
     step: number;
     private notifier: NotifierService;
@@ -40,22 +40,29 @@ export class BankingDetailsComponent implements OnInit {
 
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
+                    this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
+                    this.applicants = this.pd_all_details.pdapplicants_detials;
+                    this.notifier = notifier;
+                    
+                  }
 
-    }
+    
 
     ngOnInit() { 
         this.step = 0;
         this.initBankingForm();
         this.getM_AccountType();
         this.getM_BTLenderList();
-        this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
-        // console.log("(0,3): "   + this.pd_cus_segment.substring(0,3)); 
-        // console.log(this.pd_all_details.pdmaster_details);
-        // console.log(this.pd_cus_segment);
-        this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
-        this.applicants = this.pd_all_details.pdapplicants_detials;
+        // this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
+        // // console.log("(0,3): "   + this.pd_cus_segment.substring(0,3)); 
+        // // console.log(this.pd_all_details.pdmaster_details);
+        // // console.log(this.pd_cus_segment);
+        // this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
+        // this.applicants = this.pd_all_details.pdapplicants_detials;
         let params: any = {};
         params.pd_id = this.pdid;
         params.pd_form_id = '7';
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
index 863f0db6f..8304e99af 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
@@ -1,378 +1,519 @@
-<mat-card style="padding: 12px;">
-<p>Business Details</p>
 <form [formGroup]="businessForm" class="address">
-    <mat-form-field>
-        <input matInput placeholder="Name of Business / Profession" formControlName="profession_name" required>
-    </mat-form-field>
-    
-        <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
-            <mat-form-field>
-                <input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'>
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
-            </mat-form-field>
-        </div>
-    
-    <mat-form-field>
-        <mat-select placeholder="Industry"
-                    formControlName="industry" required>
-            <mat-option value="{{list.industry_classification_id}}" *ngFor="let list of industryData">{{list.name}}</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select placeholder="Type of Activity"
-                    formControlName="type_of_activity" requried>
-            <mat-option value="{{type.type_of_activity_id}}" *ngFor="let type of activityData">{{type.name}}</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="businessForm.controls['type_of_activity'].value == 5">
-            <input matInput placeholder="Specify Other Activity"
-                   formControlName="other_activity_type">
-    </mat-form-field>
-    <mat-form-field>
-        <!-- <input matInput placeholder="Seasonality" formControlName="seasonality" required> -->
-        <mat-select placeholder="Is the business Seasonal?"
-        formControlName="seasonality" required>
-     <mat-option value="yes">Yes</mat-option>
-     <mat-option value="no">No</mat-option>
- </mat-select>
-    </mat-form-field>
-    
-    <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
-        <input matInput placeholder="How many months in a year does the business run?" formControlName="month_of_business_run">
-    </mat-form-field>
 
-    <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
-        <mat-select multiple placeholder="What is the peak period of business ? "
-                    formControlName="peak_period_of_business" required>
-            <mat-option value="1">January</mat-option>
-            <mat-option value="2">February</mat-option>
-            <mat-option value="3">March</mat-option>
-            <mat-option value="4">April</mat-option>
-            <mat-option value="5">May</mat-option>
-            <mat-option value="6">June</mat-option>
-            <mat-option value="7">July</mat-option>
-            <mat-option value="8">August</mat-option>
-            <mat-option value="9">September</mat-option>
-            <mat-option value="10">October</mat-option>
-            <mat-option value="11">November</mat-option>
-            <mat-option value="12">December</mat-option>
+    <h2 mat-dialog-title class="paragraph_change">
+        <div fxFlex="70" align="left">{{pageTitle}}</div>
+        <div fxFlex="30" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                        
+        </div>
+    </h2>
+                
+    <mat-dialog-content>
+                
+        <mat-tab-group>
             
-        </mat-select>
-    </mat-form-field>
+            <mat-tab label="Questions">
+                <ng-template matTabContent>
+                                      
+                    <div fxLayout="row wrap">
+                        <div fxFlex="100">
+                            <mat-card style="padding: 12px;">
 
-    <!--<mat-card>
-        <mat-card-header>
-            <p>Designation
-            </p>
-        </mat-card-header>
-        <div formArrayName="designation">
-            <div *ngFor="let members of businessForm.controls.designation['controls']; let i=index"
-                 [formGroupName]="i">
-                <mat-card-content class="card">
-                    <mat-form-field>
-                        <input matInput placeholder="Name" formControlName="sec_name" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Designation" formControlName="sec_designation" required>
-                    </mat-form-field>
-                    <button type="button"  class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()"
-                    matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                    <button type="button"  class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)"
-                    matTooltip="Delete" matTooltipPosition="above"  *ngIf="i>0">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>-->
-    <mat-form-field>
-        <mat-select placeholder="Who started the business / professions"
-                    formControlName="who_started" required>
-            <mat-option value="applicant">Started by Applicants</mat-option>
-            <mat-option value="family_business">Family Business</mat-option>
-            <mat-option value="others">Others</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'">
-            <input matInput placeholder="Specify Other Bussiness Started"
-                   formControlName="other_bussiness_who_started">
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select placeholder="Main person running the businesss"
-                    formControlName="main_person" required>
-            <!-- <mat-option value="applicants">One of the applicants</mat-option> -->
-            <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
-            <mat-option value="Relative">Relative of an applicant</mat-option>
-            <mat-option value="Others">Others</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="businessForm.controls['main_person'].value == 'Others'">
-        <input matInput placeholder="Specify other person"
-               formControlName="other_main_person">
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select multiple placeholder="Other family members invovled"
-                    formControlName="family_members_involved"  (selectionChange)="relationChanged($event)" required>
-            <mat-option value="{{member.relationship_id}}" *ngFor="let member of relationData">{{member.name}}</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-        <!-- <input matInput placeholder="Any other business before"
-               formControlName="before_business" required> -->
-               <mat-select placeholder="Were the loan applicants involved in any other business before starting this business?"
-               formControlName="before_business" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="businessForm.controls['before_business'].value == 'yes'">
-            <input matInput placeholder="Description for before starting this business"
-                   formControlName="before_business_description">
-        </mat-form-field>
-    <mat-form-field>
-        <input matInput placeholder="Any delays"
-               formControlName="any_delays" required>
-    </mat-form-field>
-    <mat-card>
-        <mat-card-header>
-            <p>Partners / Directors / Shareholders
-            </p>
-        </mat-card-header>
-        <div formArrayName="partners">
-            <div *ngFor="let members of businessForm.controls.partners['controls']; let i=index"
-                 [formGroupName]="i">
-                <mat-card-content class="card">
-                    <mat-form-field>
-                        <input matInput placeholder="Name"
-                               formControlName="partner_name" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Share of Profit / Shareholding (%)" (keypress)="keyPress($event)"
-                               formControlName="shareholding" required>
-                    </mat-form-field>
-                    <div>
-                        <label>How many years and month in this business</label>
-                        <br>
-                        <div fxLayout="col" fxLayoutGap="2px" fxLayoutAlign="start none">
-                            <mat-form-field>
-                                <input matInput type="number" placeholder="Year" formControlName="current_business_experiance_year"  required min='0'>
-                            </mat-form-field>
-                            <mat-form-field>
-                                <input matInput type="number" placeholder="Month" formControlName="current_business_experiance_month" required min='0' max='12'>
-                            </mat-form-field>
+                                <mat-form-field>
+                                    <input matInput placeholder="Name of Business / Profession" formControlName="profession_name" required>
+                                </mat-form-field>
+                                
+                                    <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                        <mat-form-field>
+                                            <input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
+                                        </mat-form-field>
+                                    </div>
+                                
+                                <mat-form-field>
+                                    <mat-select placeholder="Industry"
+                                                formControlName="industry" required>
+                                        <mat-option value="{{list.industry_classification_id}}" *ngFor="let list of industryData">{{list.name}}</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <mat-select placeholder="Type of Activity"
+                                                formControlName="type_of_activity" requried>
+                                        <mat-option value="{{type.type_of_activity_id}}" *ngFor="let type of activityData">{{type.name}}</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field *ngIf="businessForm.controls['type_of_activity'].value == 5">
+                                        <input matInput placeholder="Specify Other Activity"
+                                            formControlName="other_activity_type">
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <!-- <input matInput placeholder="Seasonality" formControlName="seasonality" required> -->
+                                    <mat-select placeholder="Is the business Seasonal?"
+                                    formControlName="seasonality" required>
+                                <mat-option value="yes">Yes</mat-option>
+                                <mat-option value="no">No</mat-option>
+                            </mat-select>
+                                </mat-form-field>
+                                
+                                <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
+                                    <input matInput placeholder="How many months in a year does the business run?" formControlName="month_of_business_run">
+                                </mat-form-field>
+
+                                <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
+                                    <mat-select multiple placeholder="What is the peak period of business ? "
+                                                formControlName="peak_period_of_business" required>
+                                        <mat-option value="1">January</mat-option>
+                                        <mat-option value="2">February</mat-option>
+                                        <mat-option value="3">March</mat-option>
+                                        <mat-option value="4">April</mat-option>
+                                        <mat-option value="5">May</mat-option>
+                                        <mat-option value="6">June</mat-option>
+                                        <mat-option value="7">July</mat-option>
+                                        <mat-option value="8">August</mat-option>
+                                        <mat-option value="9">September</mat-option>
+                                        <mat-option value="10">October</mat-option>
+                                        <mat-option value="11">November</mat-option>
+                                        <mat-option value="12">December</mat-option>
+                                        
+                                    </mat-select>
+                                </mat-form-field>
+
+                                <!--<mat-card>
+                                    <mat-card-header>
+                                        <p>Designation
+                                        </p>
+                                    </mat-card-header>
+                                    <div formArrayName="designation">
+                                        <div *ngFor="let members of businessForm.controls.designation['controls']; let i=index"
+                                            [formGroupName]="i">
+                                            <mat-card-content class="card">
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Name" formControlName="sec_name" required>
+                                                </mat-form-field>
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Designation" formControlName="sec_designation" required>
+                                                </mat-form-field>
+                                                <button type="button"  class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()"
+                                                matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0">
+                                                    <mat-icon>add</mat-icon>
+                                                </button>
+                                                <button type="button"  class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)"
+                                                matTooltip="Delete" matTooltipPosition="above"  *ngIf="i>0">
+                                                    <mat-icon>delete</mat-icon>
+                                                </button>
+                                            </mat-card-content>
+                                        </div>
+                                    </div>
+                                </mat-card>-->
+                                <mat-form-field>
+                                    <mat-select placeholder="Who started the business / professions"
+                                                formControlName="who_started" required>
+                                        <mat-option value="applicant">Started by Applicants</mat-option>
+                                        <mat-option value="family_business">Family Business</mat-option>
+                                        <mat-option value="others">Others</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'">
+                                        <input matInput placeholder="Specify Other Bussiness Started"
+                                            formControlName="other_bussiness_who_started">
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <mat-select placeholder="Main person running the businesss"
+                                                formControlName="main_person" required>
+                                        <!-- <mat-option value="applicants">One of the applicants</mat-option> -->
+                                        <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
+                                        <mat-option value="Relative">Relative of an applicant</mat-option>
+                                        <mat-option value="Others">Others</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field *ngIf="businessForm.controls['main_person'].value == 'Others'">
+                                    <input matInput placeholder="Specify other person"
+                                        formControlName="other_main_person">
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <mat-select multiple placeholder="Other family members invovled"
+                                                formControlName="family_members_involved"  (selectionChange)="relationChanged($event)" required>
+                                        <mat-option value="{{member.relationship_id}}" *ngFor="let member of relationData">{{member.name}}</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <!-- <input matInput placeholder="Any other business before"
+                                        formControlName="before_business" required> -->
+                                        <mat-select placeholder="Were the loan applicants involved in any other business before starting this business?"
+                                        formControlName="before_business" required>
+                                        <mat-option value="yes">Yes</mat-option>
+                                        <mat-option value="no">No</mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                                <mat-form-field *ngIf="businessForm.controls['before_business'].value == 'yes'">
+                                        <input matInput placeholder="Description for before starting this business"
+                                            formControlName="before_business_description">
+                                    </mat-form-field>
+                                <mat-form-field>
+                                    <input matInput placeholder="Any delays"
+                                        formControlName="any_delays" required>
+                                </mat-form-field>
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>Partners / Directors / Shareholders
+                                        </p>
+                                    </mat-card-header>
+                                    <div formArrayName="partners">
+                                        <div *ngFor="let members of businessForm.controls.partners['controls']; let i=index"
+                                            [formGroupName]="i">
+                                            <mat-card-content class="card">
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Name"
+                                                        formControlName="partner_name" required>
+                                                </mat-form-field>
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Share of Profit / Shareholding (%)" (keypress)="keyPress($event)"
+                                                        formControlName="shareholding" required>
+                                                </mat-form-field>
+                                                <div>
+                                                    <label>How many years and month in this business</label>
+                                                    <br>
+                                                    <div fxLayout="col" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                        <mat-form-field>
+                                                            <input matInput type="number" placeholder="Year" formControlName="current_business_experiance_year"  required min='0'>
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                            <input matInput type="number" placeholder="Month" formControlName="current_business_experiance_month" required min='0' max='12'>
+                                                        </mat-form-field>
+                                                    </div>
+                                                </div>
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Total Business Experience"
+                                                        formControlName="total_business_experiance" required>
+                                                </mat-form-field>
+                                                <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addPartnerDetails()"
+                                                matTooltip="Add More Partners / Directors / Shareholders" matTooltipPosition="above" color="primary"  *ngIf="i==0">
+                                                    <mat-icon>add</mat-icon>
+                                                </button>
+                                                <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deletePartnerDetails(i)"
+                                                matTooltip="Delete" matTooltipPosition="above"   *ngIf="i>0">
+                                                    <mat-icon>delete</mat-icon>
+                                                </button>
+                                            </mat-card-content>
+                                        </div>
+                                    </div>
+                                </mat-card>
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>Employees As per applicant
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcard">
+                                        <mat-form-field>
+                                            <input matInput placeholder="Total"
+                                                formControlName="employees_total" required>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Permanent"
+                                                formControlName="employees_permanent" required>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Temporary"
+                                                formControlName="employees_temporary" required>
+                                        </mat-form-field>
+                                    </mat-card-content>
+                                </mat-card>
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>No of Employees sighted by PD officer during his visit
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcard">
+                                        <mat-form-field>
+                                            <input matInput placeholder="Total"
+                                                formControlName="officer_total" required>
+                                        </mat-form-field>
+                                        <!-- <mat-form-field>
+                                            <input matInput placeholder="Permanent"
+                                                formControlName="officer_permanent" required>
+                                        </mat-form-field> -->
+                                        <!-- <mat-form-field>
+                                            <input matInput placeholder="Temporary"
+                                                formControlName="officer_temporary" required>
+                                        </mat-form-field> -->
+                                    </mat-card-content>
+                                </mat-card>
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>Investment in business by Applicants
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcard">
+                                        <mat-form-field>
+                                            <input matInput placeholder="Amount Invested by Applicant"
+                                                formControlName="invested_amount" required>
+                                        </mat-form-field>
+                                        <!-- <mat-form-field>
+                                            <input matInput placeholder="Monthly Working Capital Needed"
+                                                formControlName="working_capital" required>
+                                        </mat-form-field> -->
+                                    </mat-card-content>
+                                </mat-card>
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>Location
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcards">
+                                        <mat-form-field>
+                                            <mat-select
+                                                        placeholder="Is the location of the business / profession suited to the nature of business / service provided? "
+                                                        formControlName="is_service_provided" required>
+                                                <mat-option value="well_suited.">Well Suited.</mat-option>
+                                                <mat-option value="fairly_suited">Fairly Suited</mat-option>
+                                                <mat-option value="not_suited">Not Suited</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </mat-card-content>
+                                </mat-card>
+                                <!-- <mat-card>
+                                    <mat-card-header>
+                                        <p>Business Setup
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcards">
+                                        <mat-form-field>
+                                            <mat-select  placeholder="What is the ownership of the setup ?"
+                                                        formControlName="ownership_setup" required>
+                                                <mat-option value="self_owned">self owned</mat-option>
+                                                <mat-option value="rented">Rented</mat-option>
+                                                <mat-option value="family_owned">Family Owned</mat-option>
+                                                <mat-option value="others">others</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'others'">
+                                            <input matInput placeholder="Please Specify"
+                                                formControlName="ownership_others">
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'rented'">
+                                            <input matInput placeholder="Provide Rent Paid?"
+                                                formControlName="rent_paid" (keypress)="keyPress($event)">
+                                        </mat-form-field>
+                                    </mat-card-content>
+                                </mat-card> -->
+                                <mat-card>
+                                    <mat-card-header>
+                                        <p>Documents Sighted
+                                        </p>
+                                    </mat-card-header>
+                                    <mat-card-content class="matcard">
+                                        <mat-form-field>
+                                            <mat-select  placeholder="Shop and Eat Act Cert"
+                                                        formControlName="shop_eat_act_cert" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="GST Regn Cert"
+                                                        formControlName="gst_Regn_cert" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="Export / Import cert"
+                                                        formControlName="export_import_cert" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="Factory Cert"
+                                                        formControlName="factory_cert" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="Cert of Practice"
+                                                        formControlName="practice_cert" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="PF Regn"
+                                                        formControlName="pf_regn" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="ESIC Regn"
+                                                        formControlName="esic_regn" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select  placeholder="Do you want to add other documents?"
+                                                        formControlName="other_documents" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                                <mat-option value="not applicable">Not Applicable</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <div formArrayName="documents" *ngIf="businessForm.controls['other_documents'].value == 'yes'">
+                                            <div *ngFor="let members of businessForm.controls.documents['controls']; let i=index"
+                                                [formGroupName]="i">
+                                                <mat-form-field style="width:86%">
+                                                    <input matInput placeholder="Specify Document Details"
+                                                        formControlName="document">
+                                                </mat-form-field>
+                                                <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDocuments()"
+                                                matTooltip="Add More Document Details" matTooltipPosition="above" color="primary" *ngIf="i==0">
+                                                    <mat-icon>add</mat-icon>
+                                                </button>
+                                                <button type="button" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button (click)="deleteDocuments(i)"
+                                                matTooltip="Delete" matTooltipPosition="above"   *ngIf="i>0">
+                                                    <mat-icon>delete</mat-icon>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </mat-card-content>
+                                </mat-card>
+                            </mat-card>
                         </div>
                     </div>
-                    <mat-form-field>
-                        <input matInput placeholder="Total Business Experience"
-                               formControlName="total_business_experiance" required>
+                </ng-template>
+            </mat-tab>
+
+            <mat-tab label="Docs">
+                    <ng-template matTabContent>
+                                                        <div fxLayout="row wrap">
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                  <div class="p-list-main mb-2">
+                                                                      <div class="p-list">
+                  
+                                                                          <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                          <div class="bottom">
+                                                                              <div class="left">
+                                                                                  <div class="details">
+                                                                                      <small>Nivi SKM</small>
+                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                  </div>
+                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                              </div>
+
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                              </div>
+
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                              <div class="p-list-main mb-2">
+                                                                                  <div class="p-list">
+                              
+                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                      <div class="bottom">
+                                                                                          <div class="left">
+                                                                                              <div class="details">
+                                                                                                  <small>Nivi SKM</small>
+                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                              </div>
+                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                              </div>
+
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                                  <div class="p-list-main mb-2">
+                                                                                      <div class="p-list">
+                                  
+                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                          <div class="bottom">
+                                                                                              <div class="left">
+                                                                                                  <div class="details">
+                                                                                                      <small>Nivi SKM</small>
+                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                  </div>
+                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                              </div>
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                                      <div class="p-list-main mb-2">
+                                                                                          <div class="p-list">
+                                      
+                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                              <div class="bottom">
+                                                                                                  <div class="left">
+                                                                                                      <div class="details">
+                                                                                                          <small>Nivi SKM</small>
+                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                      </div>
+                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                              </div>
+                  
+                                                          </div>
+                                          
+                    </ng-template>
+            </mat-tab>
+
+        </mat-tab-group>
+    </mat-dialog-content>
+
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <mat-form-field appearance="outline" style="width: 100%">
+                      <mat-label>Remarks</mat-label>
+                      <textarea matInput placeholder="Remarks" formControlName="business_remarks" required></textarea>
                     </mat-form-field>
-                    <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addPartnerDetails()"
-                    matTooltip="Add More Partners / Directors / Shareholders" matTooltipPosition="above" color="primary"  *ngIf="i==0">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                    <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deletePartnerDetails(i)"
-                    matTooltip="Delete" matTooltipPosition="above"   *ngIf="i>0">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>
-    <mat-card>
-        <mat-card-header>
-            <p>Employees As per applicant
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcard">
-            <mat-form-field>
-                <input matInput placeholder="Total"
-                       formControlName="employees_total" required>
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="Permanent"
-                       formControlName="employees_permanent" required>
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="Temporary"
-                       formControlName="employees_temporary" required>
-            </mat-form-field>
-        </mat-card-content>
-    </mat-card>
-    <mat-card>
-        <mat-card-header>
-            <p>No of Employees sighted by PD officer during his visit
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcard">
-            <mat-form-field>
-                <input matInput placeholder="Total"
-                       formControlName="officer_total" required>
-            </mat-form-field>
-            <!-- <mat-form-field>
-                <input matInput placeholder="Permanent"
-                       formControlName="officer_permanent" required>
-            </mat-form-field> -->
-            <!-- <mat-form-field>
-                <input matInput placeholder="Temporary"
-                       formControlName="officer_temporary" required>
-            </mat-form-field> -->
-        </mat-card-content>
-    </mat-card>
-    <mat-card>
-        <mat-card-header>
-            <p>Investment in business by Applicants
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcard">
-            <mat-form-field>
-                <input matInput placeholder="Amount Invested by Applicant"
-                       formControlName="invested_amount" required>
-            </mat-form-field>
-            <!-- <mat-form-field>
-                <input matInput placeholder="Monthly Working Capital Needed"
-                       formControlName="working_capital" required>
-            </mat-form-field> -->
-        </mat-card-content>
-    </mat-card>
-    <mat-card>
-        <mat-card-header>
-            <p>Location
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcards">
-            <mat-form-field>
-                <mat-select
-                            placeholder="Is the location of the business / profession suited to the nature of business / service provided? "
-                            formControlName="is_service_provided" required>
-                    <mat-option value="well_suited.">Well Suited.</mat-option>
-                    <mat-option value="fairly_suited">Fairly Suited</mat-option>
-                    <mat-option value="not_suited">Not Suited</mat-option>
-                </mat-select>
-            </mat-form-field>
-        </mat-card-content>
-    </mat-card>
-    <!-- <mat-card>
-        <mat-card-header>
-            <p>Business Setup
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcards">
-            <mat-form-field>
-                <mat-select  placeholder="What is the ownership of the setup ?"
-                            formControlName="ownership_setup" required>
-                    <mat-option value="self_owned">self owned</mat-option>
-                    <mat-option value="rented">Rented</mat-option>
-                    <mat-option value="family_owned">Family Owned</mat-option>
-                    <mat-option value="others">others</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'others'">
-                <input matInput placeholder="Please Specify"
-                       formControlName="ownership_others">
-            </mat-form-field>
-            <mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'rented'">
-                <input matInput placeholder="Provide Rent Paid?"
-                       formControlName="rent_paid" (keypress)="keyPress($event)">
-            </mat-form-field>
-        </mat-card-content>
-    </mat-card> -->
-    <mat-card>
-        <mat-card-header>
-            <p>Documents Sighted
-            </p>
-        </mat-card-header>
-        <mat-card-content class="matcard">
-            <mat-form-field>
-                <mat-select  placeholder="Shop and Eat Act Cert"
-                            formControlName="shop_eat_act_cert" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="GST Regn Cert"
-                            formControlName="gst_Regn_cert" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="Export / Import cert"
-                            formControlName="export_import_cert" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="Factory Cert"
-                            formControlName="factory_cert" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="Cert of Practice"
-                            formControlName="practice_cert" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="PF Regn"
-                            formControlName="pf_regn" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="ESIC Regn"
-                            formControlName="esic_regn" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select  placeholder="Do you want to add other documents?"
-                            formControlName="other_documents" required>
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                    <mat-option value="not applicable">Not Applicable</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <div formArrayName="documents" *ngIf="businessForm.controls['other_documents'].value == 'yes'">
-                <div *ngFor="let members of businessForm.controls.documents['controls']; let i=index"
-                     [formGroupName]="i">
-                    <mat-form-field style="width:86%">
-                        <input matInput placeholder="Specify Document Details"
-                               formControlName="document">
-                    </mat-form-field>
-                    <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDocuments()"
-                    matTooltip="Add More Document Details" matTooltipPosition="above" color="primary" *ngIf="i==0">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                    <button type="button" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button (click)="deleteDocuments(i)"
-                    matTooltip="Delete" matTooltipPosition="above"   *ngIf="i>0">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </div>
-            </div>
-        </mat-card-content>
-    </mat-card>
-    <div fxLayout="row">
-        <div fxFlex="60" class="pb-0 text-sm-left">
-            <mat-form-field appearance="outline" style="width: 100%">
-                <mat-label>Remarks</mat-label>
-                <textarea matInput placeholder="Remarks" formControlName="business_remarks" required></textarea>
-            </mat-form-field>
-        </div>
-    </div>
-    <div style="text-align: right;">
-        <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
-        </button>
-     </div>
-</form>
-</mat-card>
\ No newline at end of file
+                  </div>
+          <div fxFlex="40" align="end">
+                <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
+                </button>
+          </div>
+    </mat-dialog-actions>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss
index c1a248bc2..34bdc26e8 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss
@@ -27,4 +27,91 @@
   width: 10px;
   background: #62B013;
   color: white;
-}
\ No newline at end of file
+}
+
+
+
+
+.paragraph_change {
+  color:  #e00201 !important;
+}
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts
index e5ae10d50..cfd137a6b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts
@@ -29,9 +29,9 @@ import {ActivatedRoute, Router} from "@angular/router";
     styleUrls: ['./business-info.component.scss']
 })
 export class BusinessInfoComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() form_id: number;
-    @Input() applicant_details: any;
+    pdid: number;
+    form_id: number;
+    pageTitle: string ="Business Details";
     relationData: any = [];
     industryData: any = [];
     activityData: any = [];
@@ -40,13 +40,20 @@ export class BusinessInfoComponent implements OnInit {
     public businessForm: FormGroup;
     private notifier: NotifierService;
 
-    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
-                private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
-    }
+    constructor(notifier: NotifierService,
+         private fb: FormBuilder,
+         private route: ActivatedRoute,
+         private router: Router,
+         private _pd: PdTrigerService,
+         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+            this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+            this.applicants = this.pd_all_details.pdapplicants_detials;
+            this.form_id = 13;
+            this.notifier = notifier;        
+          }
+        
     ngOnInit() {
-        this.applicants = this.applicant_details.pdapplicants_detials;
+        
         this.getRelation();
         this.getIndustry();
         this.getActivity();
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
index d27fe4526..77ee86f38 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
@@ -1,4 +1,245 @@
-<!--<pre> {{ m_group | json}}</pre>-->
+<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
+
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">{{pageTitle}}</div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+            
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+    
+            <mat-tab-group>
+
+                    <mat-tab label="Questions">
+                      <ng-template matTabContent>
+                          
+                            <div fxLayout="row wrap">
+                              <div fxFlex="100">
+                                 <mat-card>
+                                    <!-- <mat-card-title></mat-card-title> -->
+                                      <mat-card-content formArrayName="client_details" fxFill>
+                                        <div *ngFor="let sup of _clientQuesFrom.controls.client_details['controls']; let i=index" [formGroupName]="i">
+                                            <!-- <div [formGroupName]="i"> -->
+                                                <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                                  <div>
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Client Name" formControlName="client_name" required>
+                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div>
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
+                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div>
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
+                                                      <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
+                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
+                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
+                                                    </mat-form-field>
+                                                  </div>
+                                                </div>
+                                                <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                                  <div>
+                                                    <mat-form-field>
+                                                      <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
+                                                        <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                                      </mat-select>
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
+                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Credit Period" formControlName="credit_period">
+                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                                    </mat-form-field>
+                                                  </div>
+                                                </div>
+                                                <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                                  <div>
+                                                    <mat-form-field>
+                                                      <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
+                                                        <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
+                                                      </mat-select>
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('frequency_of_purchase').value == 8">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
+                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                                    </mat-form-field>
+                                                  </div>
+                                    
+                                                  <div fxFlex="20">
+                                                    <span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
+                                                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                       </span>
+                                                  </div>
+                                                </div>
+                                              <!-- </div> -->
+                                        </div>  
+                                      </mat-card-content>
+
+                                      <mat-card-actions align="end">
+                                            <!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                            </span> -->
+                                      </mat-card-actions>
+                                        
+                                 </mat-card>                
+                              </div>
+                            </div>
+                      </ng-template>
+                    </mat-tab>
+
+                    <mat-tab label="Docs">
+                      <ng-template matTabContent>
+                                                          <div fxLayout="row wrap">
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                </div>
+                    
+                                                            </div>
+                                            
+                      </ng-template>
+                    </mat-tab>
+                  
+            </mat-tab-group>
+    
+    </mat-dialog-content>
+
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <!-- <mat-form-field appearance="outline" style="width: 100%">
+                      <mat-label>Remarks</mat-label>
+                      <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                    </mat-form-field> -->
+                  </div>
+          <div fxFlex="40" align="end">
+                  <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
+                           class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+          </div>
+    </mat-dialog-actions>
+    
+</form>
+<notifier-container></notifier-container>
+
+<!--<pre> {{ m_group | json}}</pre>--
 <mat-card style="padding: 12px;">
 	<p>Client Details</p>
   <form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
@@ -10,19 +251,19 @@
               <div>
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="Client Name" formControlName="client_name" required>
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
                 </mat-form-field>
               </div>
               <div>
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
                 </mat-form-field>
               </div>
               <div>
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
-                  <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
+                  <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  --
                   <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
                   <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
                 </mat-form-field>
@@ -39,13 +280,13 @@
               <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
                 </mat-form-field>
               </div>
               <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="Credit Period" formControlName="credit_period">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
                 </mat-form-field>
               </div>
             </div>
@@ -60,7 +301,7 @@
               <div *ngIf="sup.get('frequency_of_purchase').value == 8">
                 <mat-form-field class="ml-xs example-full-width">
                   <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
                 </mat-form-field>
               </div>
 
@@ -82,4 +323,4 @@
       <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
     </div>
   </form>
-</mat-card>
\ No newline at end of file
+</mat-card>-->
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss
index e69de29bb..6dbbafcf7 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss
@@ -0,0 +1,83 @@
+.paragraph_change {
+    color:  #e00201 !important;
+  }
+  .mat-card-content {
+      background-color: white;
+    }
+    .mat-card-actions { 
+      background-color: white;
+    }
+  
+    mat-form-field {
+      margin: 0 2%;
+    }
+    $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+  $product-bg-color-hover: rgba(103, 58, 183, 0.7);
+  .p-list-main {
+      background: white;
+      margin: auto;
+      position: relative;
+      overflow: hidden !important;
+      border-radius: 10px 10px 10px 10px;
+      box-shadow: $base-card-box-shadow;
+      transform: scale(0.95);
+      transition: box-shadow 0.5s, transform 0.5s;
+      &:hover {
+          transform: scale(1);
+          box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+      }
+      .p-list {
+          position: relative;
+          .top {
+              height: 100%;
+              width: 100%;
+              //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+              -webkit-background-size: 100%;
+              -moz-background-size: 100%;
+              -o-background-size: 100%;
+              background-size: 100%;
+          }
+          .bottom {
+              width: 200%;
+              height: 15%;
+              transition: transform 0.5s;
+              h1 {
+                  margin: 0;
+                  padding: 0;
+              }
+              p {
+                  margin: 0;
+                  padding: 0;
+              }
+              .left {
+                  height: 100%;
+                  width: 50%;
+                  background: #f4f4f4;
+                  position: relative;
+                  float: left;
+                  .details {
+                      padding: 5px;
+                      float: left;
+                      // width: calc(70% - 40px);
+                  }
+                 
+              }
+              .right {
+                  width: 50%;
+                  background: #A6CDDE;
+                  color: white;
+                  float: right;
+                  height: 200%;
+                  overflow: hidden;
+                  .details {
+                      padding: 20px;
+                      float: right;
+                      width: calc(70% - 40px);
+                  }
+                 
+               
+              }
+          }
+      }
+     
+  }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
index 683297014..dc3036915 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
@@ -30,7 +30,14 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 })
 export class ClientInfoComponent implements OnInit {
 
-  @Input() pdid: number;
+  pageTitle: string ="Client Details";
+    
+  //@Input() pdid: number;
+  pdid : number;
+  form_id: number;
+  
+  loadDataStatus: boolean=true;
+
 
   public _clientQuesFrom: FormGroup;
   public submitted = false;
@@ -88,10 +95,14 @@ export class ClientInfoComponent implements OnInit {
 private notifier: NotifierService;
 
   constructor(
-notifier: NotifierService,
+    notifier: NotifierService,
     private _formBuilder: FormBuilder,
-    private pdTrigerService: PdTrigerService) { 
-this.notifier = notifier;}
+    private pdTrigerService: PdTrigerService,
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+      this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+      this.form_id = 2;
+      this.notifier = notifier;
+}
 
   ngOnInit() {
     this.getM_FreqOfPurchase();
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
index 0c4442a89..cc87f6dc9 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
@@ -1,29 +1,272 @@
-<mat-card  style="min-height: 550px;">
+<form [formGroup]="currentLoanForm" class="address">
+
+        <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">{{pageTitle}}</div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+        </h2>
+        
+        <mat-dialog-content>
+        
+                <mat-tab-group>
+    
+                        <mat-tab label="Questions">
+                          <ng-template matTabContent>
+                              
+                                <div fxLayout="row wrap">
+                                  <div fxFlex="100">
+                                     <mat-card>
+                                        <!-- <mat-card-title></mat-card-title> -->
+                                          <mat-card-content>
+                                                <mat-form-field style="width:60% !important;">
+                                                        <mat-select  (selectionChange)="selectedLoanChanges($event)" placeholder="Do you have any other existing loan"
+                                                                    formControlName="existing_loan" required>
+                                                            <mat-option value="Yes">Yes</mat-option>
+                                                            <mat-option value="No">No</mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>  
+
+                                                    <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
+                                                            <mat-card-header>
+                                                                <p>Loan Details<p>
+                                                            </mat-card-header>
+                                                            <div formArrayName="loan_details">
+                                                                <div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
+                                                                     [formGroupName]="i">
+                                                                     <!-- {{frequencyData | json}} -->
+                                                                    <mat-card-content class="matcard">
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                                <mat-select (selectionChange)="selectedfrequency($event.value,i)" placeholder="Frequency"
+                                                                                formControlName="frequency" required>
+                                                                                    <mat-option *ngFor="let freq of frequencyData" value="{{freq.frequency_id}}">{{freq.name}}</mat-option>
+                                                                                </mat-select>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                            <input matInput [placeholder]="placeholderName[i] != ''  ? placeholderName[i] : 'Instalment Amount' " formControlName="emi" (keypress)="keyPress($event)" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Loan Type" formControlName="loan_type" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                            <mat-select placeholder="Loan Taken By" formControlName="loan_taken_by" required>
+                                                                                    <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
+                                                                                    <mat-option value="Others">Others</mat-option>
+                                                                            </mat-select>   
+                                                                        </mat-form-field>
+                                                                        <mat-form-field *ngIf="details.get('loan_taken_by').value == 'Others'">
+                                                                            <input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                                <mat-select placeholder="Lender" formControlName="lender" required>
+                                                                                        <mat-option *ngFor="let btLen of lenderData" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
+                                                                                </mat-select>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field *ngIf="details.get('lender').value == 3">
+                                                                            <input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
+                                                                        </mat-form-field>
+                                                                        <!-- <mat-form-field>
+                                                                            <input matInput placeholder="Lender" formControlName="lender" required>
+                                                                        </mat-form-field> -->
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Current Balance Tenure in Months" formControlName="current_balance_tenure" required>
+                                                                        </mat-form-field>
+                                                                        <button type="button" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button matTooltip="Add More Loan Details" matTooltipPosition="above" color="primary" (click)="addLoanDetails()"
+                                                                                *ngIf="i==0">
+                                                                            <mat-icon>add</mat-icon>
+                                                                        </button>
+                                                                        <button type="button" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="deleteLoanDetails(i)"
+                                                                                *ngIf="i>0">
+                                                                            <mat-icon>delete</mat-icon>
+                                                                        </button>
+                                                                    </mat-card-content>
+                                                                </div>
+                                                            </div>
+                                                        </mat-card>
+
+                                          </mat-card-content>
+    
+                                          <mat-card-actions align="end">
+                                                <!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                                                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                </span> -->
+                                          </mat-card-actions>
+                                            
+                                     </mat-card>                
+                                  </div>
+                                </div>
+                          </ng-template>
+                        </mat-tab>
+    
+                        <mat-tab label="Docs">
+                          <ng-template matTabContent>
+                                                              <div fxLayout="row wrap">
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+    
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                    </div>
+    
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                    </div>
+    
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                    </div>
+    
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                            <div class="p-list-main mb-2">
+                                                                                                <div class="p-list">
+                                            
+                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                    <div class="bottom">
+                                                                                                        <div class="left">
+                                                                                                            <div class="details">
+                                                                                                                <small>Nivi SKM</small>
+                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                            </div>
+                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                    </div>
+                        
+                                                                </div>
+                                                
+                          </ng-template>
+                        </mat-tab>
+                      
+                </mat-tab-group>
+        
+        </mat-dialog-content>
+    
+        <mat-dialog-actions>
+                <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                        <mat-form-field appearance="outline" style="width: 100%">
+                          <mat-label>Remarks</mat-label>
+                          <textarea matInput placeholder="Remarks" formControlName="currentloan_remarks" required></textarea>
+                        </mat-form-field>
+                      </div>
+              <div fxFlex="40" align="end">
+                    <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"   (click)="submitCurrentloan()"><mat-icon>save</mat-icon>
+                    </button>
+              </div>
+        </mat-dialog-actions>
+        
+</form>
+<notifier-container></notifier-container>
+    
+
+<!-- <mat-card  style="min-height: 550px;">
     <mat-card-content>
             <p>Existing Loan Obligations</p>
-            <form [formGroup]="currentLoanForm" class="address">
+            <form [formGroup]="currentLoanForm" class="address"> -->
             <!-- <div fxLayout="row">
               <div fxFlex="60" class="pb-0 text-sm-left"> -->
-                <mat-form-field style="width:60% !important;">
+                <!-- <mat-form-field style="width:60% !important;">
                     <mat-select  (selectionChange)="selectedLoanChanges($event)" placeholder="Do you have any other existing loan"
                                 formControlName="existing_loan" required>
                         <mat-option value="Yes">Yes</mat-option>
                         <mat-option value="No">No</mat-option>
                     </mat-select>
-                </mat-form-field>
+                </mat-form-field> -->
             <!-- </div>
             </div> -->
             
              
-                <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
+                <!-- <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
                     <mat-card-header>
                         <p>Loan Details<p>
                     </mat-card-header>
                     <div formArrayName="loan_details">
                         <div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
-                             [formGroupName]="i">
+                             [formGroupName]="i"> -->
                              <!-- {{frequencyData | json}} -->
-                            <mat-card-content class="matcard">
+                            <!-- <mat-card-content class="matcard">
                                 <mat-form-field>
                                     <input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required>
                                 </mat-form-field>
@@ -55,11 +298,11 @@
                                 </mat-form-field>
                                 <mat-form-field *ngIf="details.get('lender').value == 3">
                                     <input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
-                                </mat-form-field>
+                                </mat-form-field> -->
                                 <!-- <mat-form-field>
                                     <input matInput placeholder="Lender" formControlName="lender" required>
                                 </mat-form-field> -->
-                                <mat-form-field>
+                                <!-- <mat-form-field>
                                     <input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required>
                                 </mat-form-field>
                                 <mat-form-field>
@@ -92,5 +335,5 @@
                  
             </form>
     </mat-card-content>
- </mat-card>   
+ </mat-card>    -->
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
index 345378a3b..cd0448ed0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
@@ -1,19 +1,103 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+//   width:26%;
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%;
-  width:26%;
-}
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions { 
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
index d4cffafc9..8051e3cd6 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
@@ -31,21 +31,27 @@ import { ActivatedRoute, Router } from "@angular/router";
 export class CurrentLoanComponent implements OnInit {
     public currentLoanForm: FormGroup;
     private notifier: NotifierService;
-    @Input() pdid: number;
-    @Input() form_id: number;
-    @Input() applicant_details: any;
+    pageTitle: string ="Existing Loan Obligations";
+    pdid : number;
+    form_id: number;
+    applicant_details: any;
+    // @Input() pdid: number;
+    // @Input() form_id: number;
+    //@Input() applicant_details: any;
     lenderData: any = [];
     frequencyData: any = [];
     applicants: any;
     placeholderName : any = [];
-    holder: any = 'amount';
     IDXval : any;
 
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
         private router: Router,
-        private _pd: PdTrigerService) {
-        this.notifier = notifier;
-
+        private _pd: PdTrigerService,
+        @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+            this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+            this.form_id = 8;
+            this.notifier = notifier;
+            this.applicants = this.pd_all_details.pdapplicants_detials;
     }
     ngOnInit() {
         this.getMasterDetails('BTLENDERLIST',1);
@@ -54,7 +60,7 @@ export class CurrentLoanComponent implements OnInit {
         let params: any = {};
         params.pd_id = this.pdid;
         params.pd_form_id = this.form_id;
-        this.applicants = this.applicant_details.pdapplicants_detials;
+        
         this._pd.retriveForm(params).subscribe(value => {
             console.log('value', value);
             const control = <FormArray>this.currentLoanForm.controls['loan_details'];
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
index afb0576b1..985d7b252 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
@@ -1,122 +1,257 @@
-<mat-card style="padding: 12px;">
-    <p>Employement Information</p>
 <form [formGroup]="employmentForm" class="address">
-    <mat-form-field>
-        <input matInput placeholder="Name of Employer" formControlName="employer_name" required>
-    </mat-form-field>
-    <div>
-        <label>Since how long working with this employer?</label>
-        <br>
-        <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
-            <mat-form-field>
-                <input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
-            </mat-form-field>
-        </div>
-    </div>
-    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
-        <mat-select placeholder="Was the employer met?"
-                    formControlName="was_met" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none" *ngIf="employmentForm.controls['was_met'].value == 'yes'">
-        <mat-form-field fxFlex="50">
-            <input matInput placeholder="Name of Person Met" formControlName="name_person_met" required>
-        </mat-form-field>
-        <mat-form-field fxFlex="50">
-            <input matInput placeholder="Designation of Person Met" formControlName="designation_person_met" required>
-        </mat-form-field>
-    </div>
-    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
-        <mat-select placeholder="Salary amount confirmed ?"
-                    formControlName="confirm_salary" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="employmentForm.controls['confirm_salary'].value == 'yes'">
-        <input matInput placeholder="What is the salary amount confirmed?" formControlName="confirm_salary_amount" (keypress)="keyPress($event)">
-    </mat-form-field>
-    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
-        <mat-select placeholder="Attendance register  seen ?"
-                    formControlName="attendance_seen" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
-        <mat-select placeholder="Salary register  seen ?"
-                    formControlName="sal_reg_seen" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-card>
-        <mat-card-header>
-            <p>Salary Details<p>
-        </mat-card-header>
-        <mat-card-content class="matcard">
-                <mat-form-field>
-                  <input matInput placeholder="Date of Salary" formControlName="which_date_the_salary_is_rcv" type="number" min='1' max='31'>
-                </mat-form-field>
-            <mat-form-field>
-                  <input matInput placeholder="Gross Monthly Salary" formControlName="gross_monthly_salary" (keypress)="keyPress($event)" required>
-            </mat-form-field>
+        <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
+                </div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
+                </div>
+        </h2>
+        
+        <mat-dialog-content>
+            <mat-tab-group>
+                <mat-tab label="Questions">
+                    <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                            <div fxFlex="100">
+                                <mat-card>
+                                    
+                                    <mat-form-field>
+                                        <input matInput placeholder="Name of Employer" formControlName="employer_name" required>
+                                    </mat-form-field>
+                                    <div>
+                                        <label>Since how long working with this employer?</label>
+                                        <br>
+                                        <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                            <mat-form-field>
+                                                <input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
+                                            </mat-form-field>
+                                            <mat-form-field>
+                                                <input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
+                                            </mat-form-field>
+                                        </div>
+                                    </div>
+                                    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
+                                        <mat-select placeholder="Was the employer met?"
+                                                    formControlName="was_met" required>
+                                            <mat-option value="yes">Yes</mat-option>
+                                            <mat-option value="no">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none" *ngIf="employmentForm.controls['was_met'].value == 'yes'">
+                                        <mat-form-field fxFlex="50">
+                                            <input matInput placeholder="Name of Person Met" formControlName="name_person_met" required>
+                                        </mat-form-field>
+                                        <mat-form-field fxFlex="50">
+                                            <input matInput placeholder="Designation of Person Met" formControlName="designation_person_met" required>
+                                        </mat-form-field>
+                                    </div>
+                                    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
+                                        <mat-select placeholder="Salary amount confirmed ?"
+                                                    formControlName="confirm_salary" required>
+                                            <mat-option value="yes">Yes</mat-option>
+                                            <mat-option value="no">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field *ngIf="employmentForm.controls['confirm_salary'].value == 'yes'">
+                                        <input matInput placeholder="What is the salary amount confirmed?" formControlName="confirm_salary_amount" (keypress)="keyPress($event)">
+                                    </mat-form-field>
+                                    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
+                                        <mat-select placeholder="Attendance register  seen ?"
+                                                    formControlName="attendance_seen" required>
+                                            <mat-option value="yes">Yes</mat-option>
+                                            <mat-option value="no">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
+                                        <mat-select placeholder="Salary register  seen ?"
+                                                    formControlName="sal_reg_seen" required>
+                                            <mat-option value="yes">Yes</mat-option>
+                                            <mat-option value="no">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <mat-card>
+                                        <mat-card-header>
+                                            <p>Salary Details<p>
+                                        </mat-card-header>
+                                        <mat-card-content class="matcard">
+                                                <mat-form-field>
+                                                <input matInput placeholder="Date of Salary" formControlName="which_date_the_salary_is_rcv" type="number" min='1' max='31'>
+                                                </mat-form-field>
+                                            <mat-form-field>
+                                                <input matInput placeholder="Gross Monthly Salary" formControlName="gross_monthly_salary" (keypress)="keyPress($event)" required>
+                                            </mat-form-field>
 
-            <mat-form-field>
-                <input matInput placeholder="Net Monthly Salary"
-                       formControlName="net_monthly_salary" (keypress)="keyPress($event)" required>
-                <!-- <input matInput placeholder="Net Take Home"
-                       formControlName="net_take_home"> -->
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="Bonus or Incentive"
-                       formControlName="bonus_incentive" (keypress)="keyPress($event)" required>
-            </mat-form-field>
+                                            <mat-form-field>
+                                                <input matInput placeholder="Net Monthly Salary"
+                                                    formControlName="net_monthly_salary" (keypress)="keyPress($event)" required>
+                                                <!-- <input matInput placeholder="Net Take Home"
+                                                    formControlName="net_take_home"> -->
+                                            </mat-form-field>
+                                            <mat-form-field>
+                                                <input matInput placeholder="Bonus or Incentive"
+                                                    formControlName="bonus_incentive" (keypress)="keyPress($event)" required>
+                                            </mat-form-field>
 
-            <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">            
-                            <mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency">
-                                             <mat-option  *ngFor="let fd of frequency_data"  [value]="fd.frequency_id">{{ fd.name }}</mat-option>
-                            </mat-select>
-            </mat-form-field>
+                                            <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">            
+                                                            <mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency">
+                                                                            <mat-option  *ngFor="let fd of frequency_data"  [value]="fd.frequency_id">{{ fd.name }}</mat-option>
+                                                            </mat-select>
+                                            </mat-form-field>
 
-            <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">            
-                    <mat-select  placeholder="Type of Bonus" 
-                                formControlName="bonus_type">
-                        <mat-option value="fixed">Fixed</mat-option>
-                        <mat-option value="variable depending on performance">Variable depending on performance</mat-option>
-                        <mat-option value="others">Others</mat-option>
-                    </mat-select>
-            </mat-form-field>
-             <mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'">
-                    <input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other">
-            </mat-form-field> 
-             <mat-form-field>
-                <mat-select placeholder="Any Delays"
-                    formControlName="any_delays">
-                    <mat-option value="yes">Yes</mat-option>
-                    <mat-option value="no">No</mat-option>
-                </mat-select>
-                <!-- <input matInput placeholder="Any Delays"
-                       formControlName="any_delays"> -->
-            </mat-form-field>
-        </mat-card-content>
-    </mat-card>
-    <div fxLayout="row">
-        <div fxFlex="60" class="pb-0 text-sm-left">
-            <mat-form-field appearance="outline" style="width: 100%">
-                <mat-label>Remarks</mat-label>
-                <textarea matInput placeholder="Remarks" formControlName="employment_remarks" required></textarea>
-            </mat-form-field>
-        </div>
-    </div>
-    <div style="text-align: right;">
-        <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
-        </button>
-     </div>    
+                                            <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">            
+                                                    <mat-select  placeholder="Type of Bonus" 
+                                                                formControlName="bonus_type">
+                                                        <mat-option value="fixed">Fixed</mat-option>
+                                                        <mat-option value="variable depending on performance">Variable depending on performance</mat-option>
+                                                        <mat-option value="others">Others</mat-option>
+                                                    </mat-select>
+                                            </mat-form-field>
+                                            <mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'">
+                                                    <input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other">
+                                            </mat-form-field> 
+                                            <mat-form-field>
+                                                <mat-select placeholder="Any Delays"
+                                                    formControlName="any_delays">
+                                                    <mat-option value="yes">Yes</mat-option>
+                                                    <mat-option value="no">No</mat-option>
+                                                </mat-select>
+                                                <!-- <input matInput placeholder="Any Delays"
+                                                    formControlName="any_delays"> -->
+                                            </mat-form-field>
+                                        </mat-card-content>
+                                    </mat-card>
+                                </mat-card>
+                            </div>
+                        </div>
+                    </ng-template>
+                </mat-tab>
+                <mat-tab label="Docs">
+                        <ng-template matTabContent>
+                                                          <div fxLayout="row wrap">
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div fxFlex="25" class="m-gap p-gap">
+                                                                              <div class="p-list-main mb-2">
+                                                                                  <div class="p-list">
+                              
+                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                      <div class="bottom">
+                                                                                          <div class="left">
+                                                                                              <div class="details">
+                                                                                                  <small>Nivi SKM</small>
+                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                              </div>
+                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                          <div fxFlex="25" class="m-gap p-gap">
+                                                                                  <div class="p-list-main mb-2">
+                                                                                      <div class="p-list">
+                                  
+                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                          <div class="bottom">
+                                                                                              <div class="left">
+                                                                                                  <div class="details">
+                                                                                                      <small>Nivi SKM</small>
+                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                  </div>
+                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                                      <div class="p-list-main mb-2">
+                                                                                          <div class="p-list">
+                                      
+                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                              <div class="bottom">
+                                                                                                  <div class="left">
+                                                                                                      <div class="details">
+                                                                                                          <small>Nivi SKM</small>
+                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                      </div>
+                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                                          <div class="p-list-main mb-2">
+                                                                                              <div class="p-list">
+                                          
+                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                  <div class="bottom">
+                                                                                                      <div class="left">
+                                                                                                          <div class="details">
+                                                                                                              <small>Nivi SKM</small>
+                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                          </div>
+                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                      </div>
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                      
+                                                              </div>
+                                              
+                               </ng-template>
+                </mat-tab>
+            </mat-tab-group>
+        </mat-dialog-content>
+        <mat-dialog-actions>
+                <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                        <mat-form-field appearance="outline" style="width: 100%">
+                                <mat-label>Remarks</mat-label>
+                                <textarea matInput placeholder="Remarks" formControlName="employment_remarks" required></textarea>
+                            </mat-form-field>
+                      </div>
+              <div fxFlex="40" align="end">
+                
+                <!-- <button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="submitFamily()"><mat-icon>save</mat-icon></button>      -->
+                <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
+                </button>
+                
+            </div>
+        </mat-dialog-actions>
 </form>
-</mat-card>
\ No newline at end of file
+<notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss
index 8c61eec1d..9e5a3eaf8 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss
@@ -18,4 +18,87 @@
   width: 10px;
   background: #62B013;
   color: white;
-}
\ No newline at end of file
+}
+
+.paragraph_change {
+  color:  #e00201 !important;
+}
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts
index 860bad2e9..71724ff1f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts
@@ -29,9 +29,11 @@ import {ActivatedRoute, Router} from '@angular/router';
     styleUrls: ['./employment-info.component.scss']
 })
 export class EmploymentInfoComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() form_id: number;
-    @Input() pd_all_details:any;
+    
+    pageTitle: string ="Employement Information";
+     pdid: number;
+     form_id: number;
+     //pd_all_details:any;
 
     public employmentForm: FormGroup;
     private notifier: NotifierService;
@@ -40,11 +42,14 @@ export class EmploymentInfoComponent implements OnInit {
 
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
-        //getAllMasterDatas();
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.form_id = 12;
+                    this.notifier = notifier;
+       
+            }
        
-    }
     ngOnInit() {
         this.pd_cus_segment=this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
         this.initemploymentForm();
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
index 2142bd66d..bcbbef8eb 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
@@ -1,8 +1,316 @@
+<form class="address" [formGroup]="familyForm">
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">
+                    {{pageTitle}}
+            </div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+        <mat-tab-group>
+            <mat-tab label="Questions">
+                <ng-template matTabContent>
+                    <div fxLayout="row wrap">
+                        <div fxFlex="100">
+                            <mat-card>
+                                <!-- <mat-card-title>Address Details</mat-card-title> -->
+                                <mat-card-content>
+                    
+                                    <mat-form-field>
+                                        <input matInput placeholder="Number Of Family Members" formControlName="members" required>
+                                    </mat-form-field>
+                                    <mat-card>
+                                        <mat-card-header>
+                                            <p>Earning Members
+                                            </p>
+                                        </mat-card-header> 
+                                        <div formArrayName="earningMembers">
+                                            <div *ngFor="let item of familyForm.controls.earningMembers['controls']; let i=index"
+                                                 [formGroupName]="i">
+                                                <mat-card-content class="matcards">
+                                                        <mat-form-field>
+                                                                <input matInput placeholder="Name"
+                                                                       formControlName="earning_member_name" required>
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                                    <input matInput placeholder="Age" (keypress)="keyPress($event)"
+                                                                           formControlName="earning_member_age" required>
+                                                        </mat-form-field>
+                                                    <mat-form-field>
+                                                        <mat-select placeholder="Relation" formControlName="relation" required>
+                                                            <mat-option value="{{relations.relationship_id}}"
+                                                                        *ngFor="let relations of relationData">
+                                                                {{relations.name}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <mat-select placeholder="Segment" formControlName="segment" required>
+                                                                <mat-option value="{{cusSeg.customer_segment_id}}"
+                                                                *ngFor="let cusSeg of customerSegData">
+                                                        {{cusSeg.name}}
+                                                    </mat-option>
+                                
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <input matInput placeholder="Income / Revenue"
+                                                               formControlName="income" required>
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <input matInput placeholder="Name of Employer / Business"
+                                                               formControlName="employer_name" required>
+                                                    </mat-form-field>
+                                                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0" color="primary"
+                                                    matTooltip="Add More Earning Members" matTooltipPosition="above"  (click)="addearningMembers()">
+                                                        <mat-icon>add</mat-icon>
+                                                    </button>
+                                                    <button type="button" mat-raised-button mat-icon-button
+                                                    matTooltip="Delete" matTooltipPosition="above"  (click)="deleteEarningMembers(i)" *ngIf="i>0">
+                                                        <mat-icon>delete</mat-icon>
+                                                    </button>
+                                                </mat-card-content>
+                                            </div>
+                                        </div>
+                                    </mat-card>
+                                    <mat-card>
+                                        <mat-card-header>
+                                            <p>Non Earning Members
+                                            </p>
+                                        </mat-card-header>
+                                        <div formArrayName="nonEarningMembers">
+                                            <div *ngFor="let members of familyForm.controls.nonEarningMembers['controls']; let i=index"
+                                                 [formGroupName]="i">
+                                                <mat-card-content class="matcard">
+                                                        <mat-form-field>
+                                                                <input matInput placeholder="Name"
+                                                                       formControlName="non_earning_member_name" required>
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                                    <input matInput placeholder="Age" (keypress)="keyPress($event)"
+                                                                           formControlName="non_earning_member_age" required>
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                            <mat-select placeholder="Relation"
+                                                                    formControlName="relationship" required>
+                                                                <mat-option value="{{relation.relationship_id}}"
+                                                                        *ngFor="let relation of relationData">
+                                                                {{relation.name}}
+                                                                </mat-option>
+                                                            </mat-select>
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                            <mat-select placeholder="Occupation"
+                                                                    formControlName="occupation" required>
+                                                                <mat-option value="{{occupation.occupation_non_earning_member_id}}"
+                                                                        *ngFor="let occupation of occupationData">{{occupation.name}}
+                                                                </mat-option>
+                                                            </mat-select>
+                                                        </mat-form-field>
+                                                    <mat-form-field *ngIf="members['controls'].occupation.value==3">
+                                                        <input matInput placeholder="Retired From"
+                                                               formControlName="retired">
+                                                    </mat-form-field>
+                                                    <mat-form-field *ngIf="members['controls'].occupation.value==9">
+                                                            <input matInput placeholder="Specify Others Occupation"
+                                                                   formControlName="others_occupation">
+                                                        </mat-form-field>
+                                                    <button type="button" mat-raised-button mat-icon-button (click)="addMembers()" color="primary"
+                                                    matTooltip="Add More Non Earning Members" matTooltipPosition="above"  *ngIf="i==0">
+                                                        <mat-icon>add</mat-icon>
+                                                    </button>
+                                                    <button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
+                                                    matTooltip="Delete" matTooltipPosition="above"  *ngIf="i>0">
+                                                        <mat-icon>delete</mat-icon>
+                                                    </button>
+                                                </mat-card-content>
+                                            </div>
+                                        </div>
+                                    </mat-card>
+                                    <mat-card>
+                                        <mat-card-header>
+                                            <p>Residence </p>
+                                        </mat-card-header>
+                                        <mat-card-content class="matcard">
+                                            <mat-form-field>
+                                                <input matInput placeholder="Residence Address"
+                                                       formControlName="residence" required>
+                                            </mat-form-field>
+                                            <mat-form-field> 
+                                                <input matInput placeholder="Number of yrs" formControlName="years" required>
+                                            </mat-form-field>
+                                            <mat-form-field>
+                                                <mat-select placeholder="Ownership" formControlName="ownership" required>
+                                                    <mat-option value="{{ownerShip.id}}"
+                                                                        *ngFor="let ownerShip of ownerShipData">
+                                                                {{ownerShip.name}}
+                                                            </mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                            <mat-form-field *ngIf="ownership.value ==4">
+                                                <input matInput placeholder="Please specify" formControlName="ownershipOther">
+                                            </mat-form-field>
+                                            <mat-form-field *ngIf="ownership.value ==3">
+                                                <input matInput placeholder="Rent Amount"
+                                                       formControlName="rent">
+                                            </mat-form-field>
+                                        </mat-card-content>
+                                    </mat-card>
+                                    
+                                     
+                                    
+                            </mat-card-content>
+                        </mat-card>
+                    </div>
+                </div>
+            </ng-template>
+        </mat-tab>
+            
+        <mat-tab label="Docs">
+                      <ng-template matTabContent>
+                                                        <div fxLayout="row wrap">
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                    
+                                                            </div>
+                                            
+                             </ng-template>
+                    </mat-tab>
+                  
+                  </mat-tab-group>
+    
+    </mat-dialog-content>
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <mat-form-field appearance="outline" style="width: 100%">
+                            <mat-label>Remarks</mat-label>
+                            <textarea matInput placeholder="Remarks" formControlName="family_details_form_remark"></textarea>
+                    </mat-form-field>
+                  </div>
+          <div fxFlex="40" align="end">
+            <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button> -->
+            <button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="submitFamily()"><mat-icon>save</mat-icon></button>     
+        </div>
+    </mat-dialog-actions>
+    
+</form>
+<notifier-container></notifier-container>
 
-<mat-card  style="min-height: 550px;">
+    
+
+
+
+
+
+
+
+
+<!-- <mat-card  style="min-height: 550px;">
     <mat-card-content>
         <p>Family Details</p>
-<form class="address" [formGroup]="familyForm">
+<form class="address" [formGroup]="familyForm"> -->
     <!-- <mat-form-field>
         <mat-select placeholder="Person Met" formControlName="person" required>
             <mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id">
@@ -13,7 +321,7 @@
     <mat-form-field *ngIf="person.value ==8">
         <input matInput placeholder="Enter the relationship" formControlName="personOther">
     </mat-form-field> -->
-    <mat-form-field>
+    <!-- <mat-form-field>
         <input matInput placeholder="Number Of Family Members" formControlName="members" required>
     </mat-form-field>
     <mat-card>
@@ -169,4 +477,4 @@
   
 
     </mat-card-content>
-</mat-card>
+</mat-card> -->
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
index c97e4d992..197f8353a 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
@@ -1,23 +1,108 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%; 
+//   width:27%;
+// }
+// .matcards mat-form-field {
+//   margin: 0 2%;
+//   width:40%; 
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%; 
-  width:27%;
-}
-.matcards mat-form-field {
-  margin: 0 2%;
-  width:40%; 
-}
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
index a4697dd3b..510290b23 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
@@ -2,7 +2,7 @@ import {
     Component,
     OnInit,
     Inject,
-    Input
+    Input, Output
 } from '@angular/core';
 
 import {
@@ -29,7 +29,10 @@ import {ActivatedRoute, Router} from "@angular/router";
     styleUrls: ['./family-details.component.scss']
 })
 export class FamilyDetailsComponent implements OnInit {
-    @Input() pdid: number;
+    //@Input() pdid: number;
+    pageTitle: string ="Family Details";
+    pdid : string;
+    form_id : number;
 
     public currentLoanForm: FormGroup;
     private notifier: NotifierService;
@@ -54,8 +57,11 @@ export class FamilyDetailsComponent implements OnInit {
     count : number;
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.form_id = 6;
+                    this.notifier = notifier;
     }
     ngOnInit() {
         this.getMasterDetails('RELATIONSHIPS',1);
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
index 98c3e5155..b5f22eecf 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
@@ -1,4 +1,245 @@
-<mat-card style="padding: 12px;">
+<!-- <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate> -->
+     <form [formGroup]="financialForm" class="address">
+
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">
+                    {{pageTitle}}
+            </div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+            
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+    
+    
+            <mat-tab-group>
+                    <mat-tab label="Questions">
+                      <ng-template matTabContent>
+                            <div fxLayout="row wrap">
+                                    <div fxFlex="100">
+                                            <mat-card>
+                                                    <mat-card-header>
+                                                        <p>Data as Per Financial Statements<p>
+                                                    </mat-card-header>
+                                                    <div formArrayName="date_per_financial">
+                                                        <div *ngFor="let details of financialForm.controls.date_per_financial['controls']; let i=index"
+                                                             [formGroupName]="i">
+                                                            <mat-card-content class="matcard">
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Year (format: 2015-16)" formControlName="financial_year" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Annual Sale" formControlName="financial_annual_sale" (change)="calMargin(i, details)" type="number" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Net Profit / Loss" formControlName="financial_net_profit" (change)="calMargin( i, details); calYearVariation( i, details)" type="number" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput  placeholder="Net Profit to Sales %" formControlName="financial_margin" (keypress)="keyPress($event)" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field *ngIf="i != 0">
+                                                                    <input matInput [ngClass]="{'highlight': (details.controls['financial_variation'].value > 40) || (details.controls['financial_variation'].value < -40)}" placeholder="Variation from Previous Year" formControlName="financial_variation" (keypress)="keyPress($event)">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Reason For Major Difference" formControlName="financial_reason" required>
+                                                                </mat-form-field>
+                                        
+                                                                <button type="button" mat-raised-button mat-icon-button (click)="addDate()"
+                                                                matTooltip="Add More Financial Statements" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
+                                                                    <mat-icon>add</mat-icon>
+                                                                </button>
+                                                                <button type="button" mat-raised-button mat-icon-button (click)="deleteDate(i)"
+                                                                matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
+                                                                    <mat-icon>delete</mat-icon>
+                                                                </button>
+                                                            </mat-card-content>
+                                                        </div>
+                                                    </div>
+                                                </mat-card>
+                                    </div>
+                                    </div>
+                                    <div fxLayout="row wrap">
+                                        <div fxFlex="100">
+                                                   <!-- start co applicant form details -->                 
+                                                   <mat-card>
+                                                        <mat-card-header>
+                                                            <p>Actual Values as per Customer<p>
+                                                        </mat-card-header>
+                                                        <div formArrayName="estimated_value">
+                                                            <div *ngFor="let details of financialForm.controls.estimated_value['controls']; let i=index"
+                                                                 [formGroupName]="i">
+                                                                <mat-card-content class="matcard">
+                                                                    <mat-form-field>
+                                                                        <input matInput placeholder="Year (format: 2015-16)" formControlName="estimate_year" required>
+                                                                    </mat-form-field>
+                                                                    <mat-form-field>
+                                                                        <input matInput placeholder="Annual Sale" formControlName="estimate_annual_sale" (change)="calMarginVal( i, details)" type="number" required>
+                                                                    </mat-form-field>
+                                                                    <mat-form-field>
+                                                                        <input matInput placeholder="Net Profit / Loss" formControlName="estimate_net_profit" (change)="calMarginVal( i, details); calVariation( i, details)" type="number" required>
+                                                                    </mat-form-field>
+                                                                    <mat-form-field>
+                                                                        <input matInput disabled placeholder="Margin" formControlName="estimate_margin"  (keypress)="keyPress($event)" required>
+                                                                    </mat-form-field>
+                                                                    <mat-form-field *ngIf="i != 0">
+                                                                        <input matInput [ngClass]="{'highlight': details.controls['estimate_variation'].value >= 40 || details.controls['estimate_variation'].value >= -40}" placeholder="Variation from Previous Year" formControlName="estimate_variation" (keypress)="keyPress($event)">
+                                                                    </mat-form-field>
+                                                                    <!--<mat-form-field>
+                                                                        <input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
+                                                                    </mat-form-field>-->
+                                                                    <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
+                                                                    matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
+                                                                        <mat-icon>add</mat-icon>
+                                                                    </button>
+                                                                    <button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
+                                                                    matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"    *ngIf="i>0">
+                                                                        <mat-icon>delete</mat-icon>
+                                                                    </button>
+                                                                </mat-card-content>
+                                                            </div>
+                                                        </div>
+                                                    </mat-card>
+                                                    <!-- end co apllicant -->      
+                                                        
+                                        </div>
+                                    </div>
+                      </ng-template>
+                    </mat-tab>
+                    <mat-tab label="Docs">
+                      <ng-template matTabContent>
+                                                        <div fxLayout="row wrap">
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                    
+                                                            </div>
+                                            
+                             </ng-template>
+                    </mat-tab>
+                  
+                  </mat-tab-group>
+    
+    </mat-dialog-content>
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <mat-form-field appearance="outline" style="width: 100%">
+                      <mat-label>Remarks</mat-label>
+                      <textarea matInput placeholder="Remarks" formControlName="financial_remarks" required></textarea>
+                    </mat-form-field>
+                  </div>
+          <div fxFlex="40" align="end">
+                <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
+                </button>
+        </div>
+    </mat-dialog-actions>
+    
+    </form>
+    <notifier-container></notifier-container>
+    
+
+
+<!-- <mat-card style="padding: 12px;">
     <p>Financial Information</p>
     <form [formGroup]="financialForm" class="address">
         <mat-card>
@@ -66,7 +307,7 @@
                         <!--<mat-form-field>
                             <input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
                         </mat-form-field>-->
-                        <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
+                        <!-- <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
                         matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
                             <mat-icon>add</mat-icon>
                         </button>
@@ -90,5 +331,5 @@
             <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
             </button>
          </div> 
-    </form>
-</mat-card>
\ No newline at end of file
+    </form> 
+</mat-card> -->
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss
index 833488467..41f2bb3ed 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss
@@ -1,22 +1,108 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+//   width:26%
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+// .highlight {
+//   color: red;
+// }
+
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%;
-  width:26%
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
-}
-.highlight {
-  color: red;
-}
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts
index 65290ff7d..07628db74 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts
@@ -29,18 +29,25 @@ import {ActivatedRoute, Router} from '@angular/router';
     styleUrls: ['./financial-info.component.scss']
 })
 export class FinancialInfoComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() form_id: number;
+    pageTitle: string ="Financial Information";
+     pdid: string;
+     form_id: number;
     public financialForm: FormGroup;
     private notifier: NotifierService;
     marginVal: any = [] ;
     setmargin: AbstractControl;
-    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+    constructor(notifier: NotifierService, 
+                private fb: FormBuilder, 
+                private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.form_id = 14;
+                    this.notifier = notifier;
     }
     ngOnInit() {
+
         this.initstockForm();
         let params: any = {};
         params.pd_id = this.pdid;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
index 3c07f06f8..58085ce20 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
@@ -1,43 +1,181 @@
-<mat-card  style="min-height: 550px;">
-  <mat-card-content>
-          <p>Lender Representative Details</p>
-          <form [formGroup]="representativeForm" class="address">
-              <mat-form-field>
-                  <mat-select  (selectionChange)="selectedLoanChanges($event)" placeholder="Did the lender representative accompany the PD officer for PD?"
-                              formControlName="lender_representative_accompany">
-                      <mat-option value="Yes">Yes</mat-option>
-                      <mat-option value="No">No</mat-option>
-                  </mat-select>
-              </mat-form-field>
-              <div *ngIf="representativeForm.controls.lender_representative_accompany.value == 'Yes'">
-                <div formArrayName="lender_representative_details">
-                  <div *ngFor="let details of representativeForm.get('lender_representative_details').controls; let i=index"
-                       [formGroupName]="i">
-                          <mat-form-field>
-                              <input matInput placeholder="What is the name of lender representative who accompanies the PD officer, If any?" formControlName="lender_representative_who_accompanies" required>
-                          </mat-form-field>
-                          <mat-form-field>
-                              <input matInput placeholder="Did the lender representative carry the loan file during PD?" formControlName="lender_representative_carry_loan_files" required>
-                          </mat-form-field>
-                  </div>
-              </div>
-              </div>
-              
-              <div fxLayout="row">
-                  <div fxFlex="60" class="pb-0 text-sm-left">
-                      <mat-form-field appearance="outline" style="width: 100%">
-                          <mat-label>Remarks</mat-label>
-                          <textarea matInput placeholder="Remarks" formControlName="representative_remarks"></textarea>
-                      </mat-form-field>
-                  </div>
-              </div>
-              <div style="text-align: right;">
-                      <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above" type="button" (click)="submitLRForm()"><mat-icon>save</mat-icon>
-                      </button>
-               </div>
-               
-          </form>
-  </mat-card-content>
-</mat-card>   
+<form [formGroup]="representativeForm" class="address">
+  <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
+                </div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+  </h2>
 
+  <mat-dialog-content>
+    
+        <mat-tab-group>
+                <mat-tab label="Questions">
+                  <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                                <div fxFlex="100">
+                                    <mat-card>
+                                        <mat-card-content>
+                                                    <mat-form-field>
+                                                        <mat-select  (selectionChange)="selectedLoanChanges($event)" placeholder="Did the lender representative accompany the PD officer for PD?"
+                                                                    formControlName="lender_representative_accompany">
+                                                            <mat-option value="Yes">Yes</mat-option>
+                                                            <mat-option value="No">No</mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                    <div *ngIf="representativeForm.controls.lender_representative_accompany.value == 'Yes'">
+                                                        <div formArrayName="lender_representative_details">
+                                                        <div *ngFor="let details of representativeForm.get('lender_representative_details').controls; let i=index"
+                                                            [formGroupName]="i">
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="What is the name of lender representative who accompanies the PD officer, If any?" formControlName="lender_representative_who_accompanies" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Did the lender representative carry the loan file during PD?" formControlName="lender_representative_carry_loan_files" required>
+                                                                </mat-form-field>
+                                                        </div>
+                                                    </div>
+                                                    </div>
+                                                    
+                                                    
+                                                    
+                                                
+                                        </mat-card-content>
+                                    </mat-card>
+                                </div>
+                        </div>
+                </ng-template>
+                </mat-tab>
 
+                <mat-tab label="Docs">
+                        <ng-template matTabContent>
+                                                          <div fxLayout="row wrap">
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div fxFlex="25" class="m-gap p-gap">
+                                                                              <div class="p-list-main mb-2">
+                                                                                  <div class="p-list">
+                              
+                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                      <div class="bottom">
+                                                                                          <div class="left">
+                                                                                              <div class="details">
+                                                                                                  <small>Nivi SKM</small>
+                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                              </div>
+                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                          <div fxFlex="25" class="m-gap p-gap">
+                                                                                  <div class="p-list-main mb-2">
+                                                                                      <div class="p-list">
+                                  
+                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                          <div class="bottom">
+                                                                                              <div class="left">
+                                                                                                  <div class="details">
+                                                                                                      <small>Nivi SKM</small>
+                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                  </div>
+                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                                      <div class="p-list-main mb-2">
+                                                                                          <div class="p-list">
+                                      
+                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                              <div class="bottom">
+                                                                                                  <div class="left">
+                                                                                                      <div class="details">
+                                                                                                          <small>Nivi SKM</small>
+                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                      </div>
+                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                                          <div class="p-list-main mb-2">
+                                                                                              <div class="p-list">
+                                          
+                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                  <div class="bottom">
+                                                                                                      <div class="left">
+                                                                                                          <div class="details">
+                                                                                                              <small>Nivi SKM</small>
+                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                          </div>
+                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                      </div>
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                      
+                                                              </div>
+                                              
+                               </ng-template>
+                </mat-tab>
+        </mat-tab-group>
+  </mat-dialog-content>
+
+    <mat-dialog-actions>
+            
+                    <div fxFlex="60" class="pb-0 text-sm-left">
+                        <mat-form-field appearance="outline" style="width: 100%">
+                            <mat-label>Remarks</mat-label>
+                            <textarea matInput placeholder="Remarks" formControlName="representative_remarks"></textarea>
+                        </mat-form-field>
+                    </div>
+            
+                
+          <div fxFlex="40" align="end">
+                <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above" type="button" (click)="submitLRForm()"><mat-icon>save</mat-icon>
+                </button>
+        </div>
+    </mat-dialog-actions>
+
+</form> 
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss
index c6a0fa9d7..d422798d3 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss
@@ -1,5 +1,5 @@
 .mat-form-field {
-    width: 100%;
+    width: 97%;
   }
   
 //   .address > * {
@@ -8,4 +8,88 @@
 //   .matcard mat-form-field {
 //     margin: 0 2%;
 //     width:100%;
-//   }
\ No newline at end of file
+//   }
+
+.paragraph_change {
+  color:  #e00201 !important;
+}
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts
index bd095dc38..47d33a058 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts
@@ -1,6 +1,11 @@
 import {Component,OnInit,Inject,Input } from '@angular/core';
 import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
 import { NotifierService } from 'angular-notifier';
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
@@ -13,15 +18,21 @@ import { ActivatedRoute, Router } from "@angular/router";
 export class LenderRepresentativeComponent implements OnInit {
   public representativeForm: FormGroup;
   private notifier: NotifierService;
-  @Input() pdid: number;
-  @Input() form_id: number;
+  pageTitle: string ="Lender Representative Details";
+  pdid: number;
+  form_id: number;
 
-  constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
-      private router: Router,
-      private _pd: PdTrigerService) {
+  constructor(notifier: NotifierService, 
+    private fb: FormBuilder, 
+    private route: ActivatedRoute,
+    private router: Router,
+    private _pd: PdTrigerService,
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+      this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+      this.form_id = 15;
       this.notifier = notifier;
-
   }
+  
   ngOnInit() {
       this.initRepresentative();
       let params: any = {};
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
index bbef40e0a..7d9d47cbd 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
@@ -1,71 +1,87 @@
-<mat-card style="padding: 12px;">
-    <p>Loan Details</p>
 <form [formGroup]="loanDetailsForm" class="address">
-    <mat-form-field>
-        <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required >
-        <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
-            <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
-        </mat-select>
-        <!--<mat-select multiple placeholder="What is the end use"
-                    formControlName="end_use" (selectionChange)="endUserChange($event)">
-            <mat-option value="purchase_of_property"> Puchase of property</mat-option>
-            <mat-option value="construction">Construction</mat-option>
-            <mat-option value="extention">Extention</mat-option>
-            <mat-option value="improvement">Improvement</mat-option>
-            <mat-option value="working_capital">Working capital</mat-option>
-            <mat-option value="purchase_of_business_asset">Purchase of business asset</mat-option>
-            <mat-option value="to_close_an_existing_debt">to close an existing debt</mat-option>
-            <mat-option value="other">Other purpose</mat-option>
-        </mat-select>-->
-    </mat-form-field>
-    <mat-form-field *ngIf="isOtherPurpose">
-        <input matInput placeholder="Specify End Use" formControlName="end_use_other">
-    </mat-form-field>
-    <mat-form-field>
-        <mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
-                    formControlName="is_transfer" required>
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    
-    <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
-            <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
-              <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
-        </mat-form-field>
-    <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
-        <mat-select  placeholder="Is there a Top Up"
-                    formControlName="is_topup" required> 
-            <mat-option value="yes">Yes</mat-option>
-            <mat-option value="no">No</mat-option>
-        </mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
-            <mat-select placeholder="Lender from where balance transfer done" 
-            formControlName="lender">
-    <mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
-    
-</mat-select>
-    </mat-form-field>
-    <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
-            <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
-    </mat-form-field>
-    <mat-form-field  *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
-        <input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
-        <mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
-    </mat-form-field>
-    <mat-form-field>
-        <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
-        <mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
-    </mat-form-field>
+        <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
+                </div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+  </h2>
 
-    <mat-form-field>
-        <mat-select placeholder="Source" formControlName="source" required>
-            <mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option>
-        </mat-select>
+  <mat-dialog-content>
+    
+        <mat-tab-group>
+                <mat-tab label="Questions">
+                  <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                                <div fxFlex="100">
+                                    <mat-card>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required >
+                                            <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
+                                                <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
+                                            </mat-select>
+                                            <!--<mat-select multiple placeholder="What is the end use"
+                                                        formControlName="end_use" (selectionChange)="endUserChange($event)">
+                                                <mat-option value="purchase_of_property"> Puchase of property</mat-option>
+                                                <mat-option value="construction">Construction</mat-option>
+                                                <mat-option value="extention">Extention</mat-option>
+                                                <mat-option value="improvement">Improvement</mat-option>
+                                                <mat-option value="working_capital">Working capital</mat-option>
+                                                <mat-option value="purchase_of_business_asset">Purchase of business asset</mat-option>
+                                                <mat-option value="to_close_an_existing_debt">to close an existing debt</mat-option>
+                                                <mat-option value="other">Other purpose</mat-option>
+                                            </mat-select>-->
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="isOtherPurpose">
+                                            <input matInput placeholder="Specify End Use" formControlName="end_use_other">
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
+                                                        formControlName="is_transfer" required>
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
+                                                <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
+                                                <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
+                                            </mat-form-field>
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
+                                            <mat-select  placeholder="Is there a Top Up"
+                                                        formControlName="is_topup" required> 
+                                                <mat-option value="yes">Yes</mat-option>
+                                                <mat-option value="no">No</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
+                                                <mat-select placeholder="Lender from where balance transfer done" 
+                                                formControlName="lender">
+                                        <mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
+                                        
+                                    </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
+                                                <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
+                                        </mat-form-field>
+                                        <mat-form-field  *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
+                                            <input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
+                                            <mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
+                                            <mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
+                                        </mat-form-field>
+
+                                        <mat-form-field>
+                                            <mat-select placeholder="Source" formControlName="source" required>
+                                                <mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option>
+                                            </mat-select>
 
         <!--<mat-select placeholder="Source"
                     formControlName="source">
@@ -123,46 +139,172 @@
             
             <mat-form-field>
 
-                <mat-select placeholder="Status of Construction" formControlName="construction_status" required>
-                    <mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option>
-                </mat-select>
-            </mat-form-field>
 
-                <mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4">
-                        <input matInput placeholder="What is the approximate stage of construction (%)?"
-                               formControlName="percentage_of_construction" (keypress)="keyPress($event)" required>
-                </mat-form-field>
+                                                    <mat-select placeholder="Status of Construction" formControlName="construction_status" required>
+                                                        <mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option>
+                                                    </mat-select>
+                                                </mat-form-field>
 
-                <!--<mat-select placeholder="Status of construction"
-                            formControlName="construction_status">
-                    <mat-option value="other_purpose">Under-construction</mat-option>
-                    <mat-option value="other_purpose">Complete</mat-option>
-                    <mat-option value="other_purpose">Vacant Land</mat-option>
-                </mat-select>-->
+                                                    <mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4">
+                                                            <input matInput placeholder="What is the approximate stage of construction (%)?"
+                                                                formControlName="percentage_of_construction" (keypress)="keyPress($event)" required>
+                                                    </mat-form-field>
+
+                                                    <!--<mat-select placeholder="Status of construction"
+                                                                formControlName="construction_status">
+                                                        <mat-option value="other_purpose">Under-construction</mat-option>
+                                                        <mat-option value="other_purpose">Complete</mat-option>
+                                                        <mat-option value="other_purpose">Vacant Land</mat-option>
+                                                    </mat-select>-->
+                                                
+                                                <mat-form-field>
+                                                    <input matInput placeholder="Estimate Market Value as Per Customer"
+                                                        formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
+                                                </mat-form-field>
+                                                <!-- <mat-form-field>
+                                                    <input matInput placeholder="Value as Per Agreement"
+                                                        formControlName="value_per_agreement" (keypress)="keyPress($event)" required (keyup)="inWords($event,3)">
+                                                        <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint>
+                                                </mat-form-field> -->
+                                                <mat-form-field>
+                                                        <input matInput placeholder="Estimate Market Value as Per Customer"
+                                                               formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
+                                                </mat-form-field>
+                                            </mat-card-content>
+                                        </mat-card>
+                                    </mat-card>
+                                </div>
+                        </div>
+                  </ng-template>
+                </mat-tab>
+                <mat-tab label="Docs">
+                        <ng-template matTabContent>
+                                                          <div fxLayout="row wrap">
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div fxFlex="25" class="m-gap p-gap">
+                                                                              <div class="p-list-main mb-2">
+                                                                                  <div class="p-list">
+                              
+                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                      <div class="bottom">
+                                                                                          <div class="left">
+                                                                                              <div class="details">
+                                                                                                  <small>Nivi SKM</small>
+                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                              </div>
+                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                          <div fxFlex="25" class="m-gap p-gap">
+                                                                                  <div class="p-list-main mb-2">
+                                                                                      <div class="p-list">
+                                  
+                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                          <div class="bottom">
+                                                                                              <div class="left">
+                                                                                                  <div class="details">
+                                                                                                      <small>Nivi SKM</small>
+                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                  </div>
+                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                                      <div class="p-list-main mb-2">
+                                                                                          <div class="p-list">
+                                      
+                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                              <div class="bottom">
+                                                                                                  <div class="left">
+                                                                                                      <div class="details">
+                                                                                                          <small>Nivi SKM</small>
+                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                      </div>
+                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                                                                                  </div>
+                                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                                          <div class="p-list-main mb-2">
+                                                                                              <div class="p-list">
+                                          
+                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                  <div class="bottom">
+                                                                                                      <div class="left">
+                                                                                                          <div class="details">
+                                                                                                              <small>Nivi SKM</small>
+                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                          </div>
+                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                      </div>
+                                                                                                  </div>
+                                                                                              </div>
+                                                                                          </div>
+                                                                                      </div>
+                      
+                                                              </div>
+                                              
+                               </ng-template>
+                </mat-tab>
+        </mat-tab-group>
+  </mat-dialog-content>
+  <mat-dialog-actions>
             
-            <mat-form-field>
-                <input matInput placeholder="Estimate Market Value as Per Customer"
-                       formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
-            </mat-form-field>
-            <!-- <mat-form-field>
-                <input matInput placeholder="Value as Per Agreement"
-                       formControlName="value_per_agreement" (keypress)="keyPress($event)" required (keyup)="inWords($event,3)">
-                       <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint>
-            </mat-form-field> -->
-        </mat-card-content>
-    </mat-card>
-<!-- </div> -->
-    <div fxLayout="row">
         <div fxFlex="60" class="pb-0 text-sm-left">
             <mat-form-field appearance="outline" style="width: 100%">
                 <mat-label>Remarks</mat-label>
+                
                 <textarea matInput placeholder="Remarks" formControlName="loandetails_remarks" required></textarea>
             </mat-form-field>
         </div>
-    </div>
-    <div style="text-align: right;">
+
+    
+<div fxFlex="40" align="end">
         <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitLoanDetails()"><mat-icon>save</mat-icon>
         </button>
-     </div> 
-</form>
-</mat-card>
\ No newline at end of file
+</div>
+</mat-dialog-actions>
+
+  </form>
+  <notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
index fce74bbc3..aade5c39e 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
@@ -19,4 +19,89 @@
   width: 10px;
   background: #62B013;
   color: white;
+}
+
+
+.paragraph_change {
+  color:  #e00201 !important;
+}
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
index 77d16fe25..a0776c18b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
@@ -31,9 +31,10 @@ import {ActivatedRoute, Router} from '@angular/router';
 export class LoanDetailsComponent implements OnInit {
     public loanDetailsForm: FormGroup;
     private notifier: NotifierService;
-    @Input() pdid: number;
-    @Input() form_id: number;
-    @Input() applicant_details: any;
+     pdid: number;
+     form_id: number;
+     exist_loan_amt: any;
+     
     applicants: any;
     productAbbr: any;
     isOtherPurpose: boolean = false;
@@ -52,19 +53,24 @@ export class LoanDetailsComponent implements OnInit {
     valAsPerAgmtInWords : any;
     ownContributionInWords : any;
     topUpAmtInWords: any;
+    pageTitle: string ="Loan Details";
 
-    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
-                private router: Router,
-                private _pd: PdTrigerService) {
-
-        this.notifier = notifier;
+    constructor(notifier: NotifierService, 
+        private fb: FormBuilder, 
+        private route: ActivatedRoute,
+        private router: Router,
+        private _pd: PdTrigerService,
+        @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+            this.applicants = this.pd_all_details.pdapplicants_detials;
+            this.productAbbr = this.pd_all_details.pdmaster_details.product_abbr;
+            this.exist_loan_amt = this.pd_all_details.pdmaster_details.loan_amount != '' ? this.pd_all_details.pdmaster_details.loan_amount :'';
+            this.loanAmtInWords = this._pd.convertNumberToWords(this.exist_loan_amt);
+            this.form_id = 10;
+            this.pdid= this.pd_all_details.pdmaster_details.pd_id;
+            this.notifier = notifier;
     }
-    ngOnInit() {
-        
-        console.log(this.applicant_details.pdapplicants_detials);
-        console.log(this.applicant_details);
-        this.applicants = this.applicant_details.pdapplicants_detials;
-        this.productAbbr = this.applicant_details.pdmaster_details.product_abbr;
+
+    ngOnInit() { 
 
         this.initloanDetailsForm();
         this.getM_EndUseofLoad();
@@ -176,10 +182,9 @@ getM_sourceofamount() {
     // this._pd.getAllMasterDatas('MORTAGEPROPERTYTYPE').subscribe(
     this._pd.getAllMasterDatas('MORTAGEPROPERTIES').subscribe(    
       data => {
-          console.log('sadfdfads',this.productAbbr);
+        //  console.log('sadfdfads',this.productAbbr);
         this.m_mortageTypeProperty = data.records.filter(data => data.isactive == 1);
-        this.m_mortageTypeProperty = data.records.filter(data => data.group == this.productAbbr);
-        
+        this.m_mortageTypeProperty = data.records.filter(data => data.group_name == this.productAbbr);
       },
       error => {
         // this.notifier.notify('warning', 'No Category Records Found.!');
@@ -211,7 +216,8 @@ getM_sourceofamount() {
 // ==================
     public initloanDetailsForm(): void {
         this.loanDetailsForm = this.fb.group({
-            loan_amount: [this.applicant_details.loan_amount, Validators.compose([Validators.required])],
+
+            loan_amount: [this.exist_loan_amt, Validators.compose([Validators.required])],
             end_use: ['', Validators.compose([Validators.required])],
             end_use_other: [''],
             is_transfer: ['', Validators.compose([Validators.required])],
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
index e0f533de5..71651f88f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
@@ -1,3 +1,225 @@
+<form [formGroup]="otherIncomeForm" class="address">
+
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">
+                    {{pageTitle}}
+            </div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+        
+        <mat-tab-group>
+            <mat-tab label="Questions">
+                <ng-template matTabContent>
+                    <div fxLayout="row wrap">
+                        <div fxFlex="100">
+                        
+                            <mat-card>
+                                    <!-- <mat-card-title></mat-card-title> -->
+                                <mat-card-content>
+                                    <mat-form-field style="width:25% !important;">
+                                        <mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Other Income"
+                                                    formControlName="other_income">
+                                            <mat-option value="Yes">Yes</mat-option>
+                                            <mat-option value="No">No</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                </mat-card-content>
+                            </mat-card>
+
+                            <mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
+                                <mat-card-header><p>Income Details<p></mat-card-header>
+                                <div formArrayName="income_details">
+                                    <div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index"
+                                         [formGroupName]="i">
+                                        <mat-card-content class="matcard">
+                                            <mat-form-field>
+                                                <mat-select placeholder="Source"
+                                                            formControlName="source" required>
+                                                    <mat-option value="rental_income">Rental Income</mat-option>
+                                                    <mat-option value="interest_income">Interest Income</mat-option>
+                                                    <mat-option value="agricultural_income">Agricultural Income</mat-option>
+                                                    <mat-option value="dividend_income">Dividend Income</mat-option>
+                                                    <mat-option value="others">Others</mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+
+                                            <mat-form-field *ngIf="details.get('source').value == 'others'">     
+                                                <input matInput placeholder="Specify Others Source"
+                                                formControlName="others_source">
+                                            </mat-form-field>
+        
+                                            <mat-form-field>
+                                                <input matInput placeholder="Amount" formControlName="amount" (keypress)="keyPress($event)" required>  
+                                            </mat-form-field>
+
+                                            <mat-form-field>
+                                                    <mat-select placeholder="Frequency" formControlName="frequency" required>
+                                                        <mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option>
+                                                    </mat-select>
+                                            </mat-form-field>
+                                            
+                                            <!-- {{otherIncomeForm.controls.frequency.value}} -->
+                                            
+                                            <mat-form-field *ngIf="details.get('frequency').value == 8">     
+                                                        <input matInput placeholder="Specify Others Frequency"
+                                                        formControlName="others_frequency">
+                                            </mat-form-field>
+
+                                            <button type="button" matTooltip="Add More Income Details" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button   (click)="addIncomeDetails()"
+                                                   color="primary" *ngIf="i==0">
+                                                <mat-icon>add</mat-icon>
+                                            </button>
+
+                                            <button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)"
+                                                    *ngIf="i>0">
+                                                <mat-icon>delete</mat-icon>
+                                            </button>
+                                        </mat-card-content>
+                                    </div>
+                                </div>
+                            </mat-card>
+                        
+                           
+                           
+                        </div>
+                    </div>
+                                   
+                </ng-template>
+            </mat-tab>
+
+            <mat-tab label="Docs">
+                <ng-template matTabContent>
+                    <div fxLayout="row wrap">
+                        <div fxFlex="25" class="m-gap p-gap">
+                            <div class="p-list-main mb-2">
+                                <div class="p-list">
+                                    <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                    <div class="bottom">
+                                            <div class="left">
+                                                <div class="details">
+                                                    <small>Nivi SKM</small>
+                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                </div>
+                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                            </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                        </div>
+                        <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                        </div>
+                        <div fxFlex="25" class="m-gap p-gap">
+                            <div class="p-list-main mb-2">
+                                <div class="p-list">                                
+                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                    <div class="bottom">
+                                        <div class="left">
+                                            <div class="details">
+                                                <small>Nivi SKM</small>
+                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                            </div>
+                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div fxFlex="25" class="m-gap p-gap">
+                            <div class="p-list-main mb-2">
+                                <div class="p-list">
+                                    
+                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                    <div class="bottom">
+                                        <div class="left">
+                                            <div class="details">
+                                                <small>Nivi SKM</small>
+                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                            </div>
+                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div fxFlex="25" class="m-gap p-gap">
+                            <div class="p-list-main mb-2">
+                                <div class="p-list">
+
+                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                    <div class="bottom">
+                                        <div class="left">
+                                            <div class="details">
+                                                <small>Nivi SKM</small>
+                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                            </div>
+                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>                            
+                </ng-template>
+            </mat-tab>
+                  
+        </mat-tab-group>
+    
+    </mat-dialog-content>
+
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <mat-form-field appearance="outline" style="width: 100%">
+                      <mat-label>Remarks</mat-label>
+                      <textarea matInput placeholder="Remarks" formControlName="otherincome_remarks" required></textarea>
+                    </mat-form-field>
+            </div>
+            <div fxFlex="40" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above" (click)="submitCurrentDetails()"><mat-icon>save</mat-icon></button>
+            
+            </div>
+    </mat-dialog-actions>
+    
+</form>
+<notifier-container></notifier-container>
+    
+
+
 <!--<mat-card style="padding: 12px;">-->
 <!--<form [formGroup]="otherIncomeForm" class="address">-->
     <!--<mat-form-field>-->
@@ -16,7 +238,7 @@
                  <!--[formGroupName]="i">-->
                 <!--<mat-card-content class="matcard">-->
 
-<mat-card style="min-height: 550px;">
+<!--<mat-card style="min-height: 550px;">
     <mat-card-content>
         <p>Other Income Details</p>
             <form [formGroup]="otherIncomeForm" class="address">
@@ -26,7 +248,7 @@
                             <mat-option value="Yes">Yes</mat-option>
                             <mat-option value="No">No</mat-option>
                         </mat-select>
-                    </mat-form-field>
+                    </mat-form-field>-->
 
                     <!--<mat-form-field>-->
                         <!--<input matInput placeholder="Amount" formControlName="amount">-->
@@ -55,7 +277,7 @@
 <!--</form>-->
 <!--</mat-card>-->
 
-                    <mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
+                    <!--<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
                         <mat-card-header>
                             <p>Income Details<p>
                         </mat-card-header>
@@ -74,7 +296,7 @@
                                             <mat-option value="agricultural_income">Agricultural Income</mat-option>
                                             <mat-option value="dividend_income">Dividend Income</mat-option>
                                             <mat-option value="others">Others</mat-option> -->
-                                        </mat-select>
+                                        <!-- </mat-select>
                                     </mat-form-field>
                                     <mat-form-field *ngIf="details.get('source').value == 5 ">     
                                         <input matInput placeholder="Specify Others Source"
@@ -87,12 +309,12 @@
                                     <mat-form-field>
                                             <mat-select placeholder="Frequency" formControlName="frequency" required>
                                                 <mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option>
-                                            </mat-select>
-                                    </mat-form-field>
+                                            </mat-select> --
+                                    </mat-form-field>-->
                                     
                                     <!-- {{otherIncomeForm.controls.frequency.value}} -->
                                     
-                                        <mat-form-field *ngIf="details.get('frequency').value == 8">     
+                                    <!--    <mat-form-field *ngIf="details.get('frequency').value == 8">     
                                                 <input matInput placeholder="Specify Others Frequency"
                                                 formControlName="others_frequency">
                                         </mat-form-field>
@@ -122,4 +344,4 @@
                      </div>
                 </form>
     </mat-card-content>
-</mat-card>
+</mat-card>-->
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
index db319b869..b4ffad50d 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
@@ -1,18 +1,103 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%;
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
-}
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
index edce1547b..53760597b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
@@ -2,7 +2,7 @@ import {
     Component,
     OnInit,
     Inject,
-    Input
+    Input, Output
 } from '@angular/core';
 
 import {
@@ -19,6 +19,7 @@ import {
     MatDialogRef,
     MAT_DIALOG_DATA
 } from '@angular/material';
+
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -28,20 +29,35 @@ import {ActivatedRoute, Router} from '@angular/router';
     templateUrl: './other-income.component.html',
     styleUrls: ['./other-income.component.scss']
 })
+
 export class OtherIncomeComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() form_id: number;
+    pageTitle: string ="Other Income Details";
+    loadDataStatus: boolean=true;
+
+    // @Input() pdid: number;
+    // @Input() form_id: number;
+       pdid : string;
+       form_id:number;
+
     public otherIncomeForm: FormGroup;
     private notifier: NotifierService;
     frequencyData: any = [];
     sourceData : any = [];
 
-    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+    constructor(notifier: NotifierService, 
+                private fb: FormBuilder, 
+                private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
+                private _pd: PdTrigerService,
+                @Inject(MAT_DIALOG_DATA) public pd_all_details: any) 
+                {
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.form_id = 9;
+                    this.notifier = notifier;
     }
+
     ngOnInit() {
+        console.clear();
         this.getFrequency();
         this.getSourceOtherIncome();
         this.initOtherincomeForm();
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
index 62e80b5f4..a71ce6ed1 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
@@ -1,145 +1,267 @@
-   <mat-card style="padding: 12px;"> 
-    <p>Personal Details</p>
-   <form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
-    <!-- start main applicant -->
-        <mat-card>
-            <mat-card-title>Main Applicant</mat-card-title>
-        <mat-card-content formArrayName="main_applicant_details">
-            <div *ngFor="let mainDetails of _personalForm.controls.main_applicant_details['controls']; let i = index;" [formGroupName]="i">
+<form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
 
-                    <mat-form-field style="width: 35%">
-                            <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
-
-                        </mat-form-field>
-                        <mat-form-field style="width: 10%">
-
-                                <input matInput placeholder="Age" formControlName="age_ans" type="text" required (keypress)="keyPress($event)">
-                                <mat-error *ngIf="mainDetails['controls'].age_ans.hasError('pattern') || mainDetails['controls'].age_ans.hasError('maxlength') || mainDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>  
-
-                            </mat-form-field>
-                            <mat-form-field style="width: 42%">
-
-                                    <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
-                                </mat-form-field>
-                                <mat-form-field style="width: 49%">
-                                        <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
-                                            <mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
-                                            {{earning.earning_member_status}}
-                                            </mat-option>
-                                    </mat-select>
-                                    </mat-form-field>  
-                            <mat-form-field style="width: 42%">
-
-                                    <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
-                                        <mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
-                                        {{education.qualification_name}}
-                                        </mat-option>
-                                </mat-select>
-                                
-                                </mat-form-field>
-
-                                        
+<h2 mat-dialog-title class="paragraph_change">
+        <div fxFlex="70" align="left">
+                {{pageTitle}}
         </div>
-            
-            </mat-card-content>
-        </mat-card>
-    <!-- end main applicant -->
+        <div fxFlex="30" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+        
+        </div>
+</h2>
 
-    <!-- start co applicant form details -->                 
-            <mat-card>
-                <mat-card-title>Co Applicant</mat-card-title>
-              <mat-card-content formArrayName="co_applicant_details">
-                <mat-card *ngFor="let coDetails of _personalForm.controls.co_applicant_details['controls']; let c = index;" [formGroupName]="c">
-                  <mat-card-content>
-                        <mat-form-field style="width: 20%">
-                                <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
-                            </mat-form-field>
-                            <mat-form-field style="width: 10%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-      
-                                    <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
-                                    <mat-error *ngIf="coDetails['controls'].age_ans.hasError('pattern') || coDetails['controls'].age_ans.hasError('maxlength') || coDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>  
+<mat-dialog-content>
 
-                                </mat-form-field>
-                                <mat-form-field style="width: 20%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-      
-                                    <input matInput placeholder="Entity" formControlName="entity_ans"  type="text" required>
-                                </mat-form-field>
-                                <mat-form-field style="width: 34%">
-                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                        <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
-                                            <mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
-                                            {{earning.earning_member_status}}
-                                            </mat-option>
-                                    </mat-select>
-                                      </mat-form-field>
-                                <mat-form-field style="width: 34%">
-                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-          
-                                        <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
-                                            <mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
-                                            {{education.qualification_name}}
-                                            </mat-option>
-                                    </mat-select>
-                                    
-                                      </mat-form-field>
-                               
+
+        <mat-tab-group>
+                <mat-tab label="Questions">
+                  <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                                <div fxFlex="100">
+                                       <!-- start main applicant -->
+                        <mat-card>
+                                <mat-card-title>Main Applicant</mat-card-title>
+                            <mat-card-content formArrayName="main_applicant_details">
+                                <div *ngFor="let mainDetails of _personalForm.controls.main_applicant_details['controls']; let i = index;" [formGroupName]="i">
+                    
+                                        <mat-form-field style="width: 20%">
+                                                <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
+                    
+                                            </mat-form-field>
+                                            <mat-form-field style="width: 5%">
+                    
+                                                    <input matInput placeholder="Age" formControlName="age_ans" type="text" required (keypress)="keyPress($event)">
+                                                    <mat-error *ngIf="mainDetails['controls'].age_ans.hasError('pattern') || mainDetails['controls'].age_ans.hasError('maxlength') || mainDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>  
+                    
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 15%">
+                    
+                                                        <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
+                                                    </mat-form-field>
+                                                    <mat-form-field style="width: 20%">
+                                                            <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                                                <mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
+                                                                {{earning.earning_member_status}}
+                                                                </mat-option>
+                                                        </mat-select>
+                                                        </mat-form-field>  
+                                                <mat-form-field style="width: 20%">
+                    
+                                                        <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                                            <mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
+                                                            {{education.qualification_name}}
+                                                            </mat-option>
+                                                    </mat-select>
+                                                    
+                                                    </mat-form-field>
+                    
+                                                            
+                            </div>
                                 
-                                  <mat-form-field style="width: 48%">
-                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                        <mat-select placeholder="Relationship With Main Applicant" formControlName="relation_ans" required>
-                                                <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
-                                                        {{rel.name}}
-                                                        </mat-option>
-                                    </mat-select>
-                                      </mat-form-field>
-                                      <button type="button" mat-raised-button mat-icon-button (click)="removeCoApplicant(c)"
-                                      matTooltip="Remove Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="coDetails.controls.current_added_status.value==1">
-                                          <mat-icon>delete</mat-icon>
-                                      </button>
+                                </mat-card-content>
+                            </mat-card>
+                        <!-- end main applicant -->
+                                </div>
+                                </div>
+                                <div fxLayout="row wrap">
+                                    <div fxFlex="100">
+                                               <!-- start co applicant form details -->                 
+                            <mat-card>
+                                    <mat-card-title>Co Applicant</mat-card-title>
+                                  <mat-card-content formArrayName="co_applicant_details">
+                                    <mat-card *ngFor="let coDetails of _personalForm.controls.co_applicant_details['controls']; let c = index;" [formGroupName]="c">
+                                      <mat-card-content>
+                                            <mat-form-field style="width: 20%">
+                                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                                    <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 10%">
+                                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                          
+                                                        <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
+                                                        <mat-error *ngIf="coDetails['controls'].age_ans.hasError('pattern') || coDetails['controls'].age_ans.hasError('maxlength') || coDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>  
+                    
+                                                    </mat-form-field>
+                                                    <mat-form-field style="width: 25%">
+                                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                          
+                                                        <input matInput placeholder="Entity" formControlName="entity_ans"  type="text" required>
+                                                    </mat-form-field>
+                                                    <mat-form-field style="width: 25%">
+                                                            <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                                            <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                                                <mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
+                                                                {{earning.earning_member_status}}
+                                                                </mat-option>
+                                                        </mat-select>
+                                                          </mat-form-field>
+                                                    <mat-form-field style="width: 34%">
+                                                            <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                              
+                                                            <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                                                <mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
+                                                                {{education.qualification_name}}
+                                                                </mat-option>
+                                                        </mat-select>
+                                                        
+                                                          </mat-form-field>
+                                                   
+                                                    
+                                                      <mat-form-field style="width: 40%">
+                                                            <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                                            <mat-select placeholder="Relationship With Main Applicant" formControlName="relation_ans" required>
+                                                                    <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
+                                                                            {{rel.name}}
+                                                                            </mat-option>
+                                                        </mat-select>
+                                                          </mat-form-field>
+                                                          <button type="button" mat-raised-button mat-icon-button (click)="removeCoApplicant(c)"
+                                                          matTooltip="Remove Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="coDetails.controls.current_added_status.value==1">
+                                                              <mat-icon>delete</mat-icon>
+                                                          </button>
+                                                      
+                                        </mat-card-content>  
+                                  </mat-card>
                                   
-                    </mat-card-content>  
-              </mat-card>
-              
-               
-                </mat-card-content>
-                <mat-card-actions align="end">
-                        <button type="button" mat-raised-button mat-icon-button (click)="addCoApplicant()"
-                        matTooltip="Add More Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
-                            <mat-icon>add</mat-icon>
-                        </button>
-
-                </mat-card-actions>
+                                   
+                                    </mat-card-content>
+                                    <mat-card-actions align="end">
+                                            <button type="button" mat-raised-button mat-icon-button (click)="addCoApplicant()"
+                                            matTooltip="Add More Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
+                                                <mat-icon>add</mat-icon>
+                                            </button>
+                    
+                                    </mat-card-actions>
+                                    
+                                </mat-card>
+                             <!-- end co apllicant -->      
+                                                    
+                                        </div>
+                                    </div>
+                  </ng-template>
+                </mat-tab>
+                <mat-tab label="Docs">
+                  <ng-template matTabContent>
+                                                    <div fxLayout="row wrap">
+                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                <div class="p-list-main mb-2">
+                                                                    <div class="p-list">
                 
-            </mat-card>
-            
+                                                                        <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                        <div class="bottom">
+                                                                            <div class="left">
+                                                                                <div class="details">
+                                                                                    <small>Nivi SKM</small>
+                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                </div>
+                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                
+                                                        </div>
+                                        
+                         </ng-template>
+                </mat-tab>
+              
+              </mat-tab-group>
 
-         <!-- end co apllicant -->
-
-               <!-- <div fxLayout="row">
-      <div fxFlex="60" class="pb-0 text-sm-left">
-        <mat-form-field appearance="outline" style="width: 100%">
-          <mat-label>Remarks</mat-label>
-          <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
-        </mat-form-field>
-      </div>
-    </div> -->
-        <!-- end co applicant form details -->
-        <!-- </mat-card-content> -->
-     
-      <mat-card-actions>
-            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
-                    <mat-form-field appearance="outline" style="width: 100%">
-                      <mat-label>Remarks</mat-label>
-                      <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
-                    </mat-form-field>
-                  </div>
-          <div fxFlex="40" align="end">
-            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
-        </div>
-    </mat-card-actions>
-
-      </form>
-</mat-card>
\ No newline at end of file
+</mat-dialog-content>
+<mat-dialog-actions>
+        <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                <mat-form-field appearance="outline" style="width: 100%">
+                  <mat-label>Remarks</mat-label>
+                  <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                </mat-form-field>
+              </div>
+      <div fxFlex="40" align="end">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
+    </div>
+</mat-dialog-actions>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
index 5ebd7c76e..b7f235278 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
@@ -1,3 +1,6 @@
+.paragraph_change {
+  color:  #e00201 !important;
+}
 .mat-card-content {
     background-color: white;
   }
@@ -8,4 +11,75 @@
   mat-form-field {
     margin: 0 2%;
   }
+
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
   
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
index a6618c718..ca6d166ea 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit , Input, Output } from '@angular/core';
+import { Component, OnInit, Input, Output, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
 import { NotifierService } from 'angular-notifier';
 import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
 import { Key } from 'protractor';
@@ -9,8 +10,10 @@ import { Key } from 'protractor';
   templateUrl: './personal-info.component.html',
   styleUrls: ['./personal-info.component.scss']
 })
+
 export class PersonalInfoComponent implements OnInit {
 
+  pageTitle: string ="Personal Details";
   //qualifications:any=["Graduate","Under Graduate","Post Graduate","Professional"];
   //earningStatus:any=["Earning Member","House Wife","Student","Retired","Pensioner","Other Non earning member"];
   loadDataStatus: boolean=true;
@@ -18,8 +21,9 @@ export class PersonalInfoComponent implements OnInit {
   qualifications:any=[];
   relationShipList:any=[];
 
-  @Input() pdid : string;
-  @Input() pd_all_details:any;
+  // @Input() pdid : string;
+  // @Input() pd_all_details:any;
+  pdid : string;
   form_id:number;
   private notifier: NotifierService;
   public _personalForm: FormGroup;
@@ -47,7 +51,9 @@ export class PersonalInfoComponent implements OnInit {
   public coApplicantDetails :any=[];
   errorMessage:any;
 
- constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService) { 
+
+ constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService , @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+   this.pdid = this.pd_all_details.pdmaster_details.pd_id;
    this.notifier = notifier;
    this.form_id = 3;
  }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
index 7b1483da8..9ac753a5a 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
@@ -1,190 +1,330 @@
-<mat-card  style="min-height: 550px;">
-    <mat-card-content>
-        <p>Rental Information Form</p>
-        <form class="address" [formGroup]="rentalForm">
-            <mat-form-field>
-                <input matInput placeholder="Person Met / Shown the Property(if he is not applicant or co-applicant)" formControlName="person_met">
-            </mat-form-field>
+<form class="address" [formGroup]="rentalForm">
 
-            <mat-form-field>
-                <mat-select placeholder="Property Owner" formControlName="property_own">
-                    <mat-option value="applicant">Applicant</mat-option>
-                    <mat-option value="co_applicant">co-applicant</mat-option>
-                    <mat-option value="parental">Parental</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select placeholder="Nature of the let out property" formControlName="nature_property">
-                    <mat-option value="residentail/commercial">Residential/commercial</mat-option>
-                    <mat-option value="other">other</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-
-            <div formArrayName="rental_home">
-            <mat-accordion
-                    *ngFor="let item of rentalForm.controls.rental_home['controls']; let i=index"
-                    [formGroupName]="i">
-                <mat-expansion-panel class="fields" [expanded]="step == i">
-                    <mat-expansion-panel-header>
-                        <mat-panel-title>
-                            <h5>{{i+1}}  Rental Home Details</h5>
-                        </mat-panel-title>
-                        <button type="button"  class="mr-1 mb-1 hover-icon" matTooltip="Add More Property" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
-                                color="primary" style="float: right;" (click)="addProperty($event)">
-                            <mat-icon>add</mat-icon>
-                        </button>
-                        <button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
-                                style="float: right;" (click)="deleteProperty(i)">
-                            <mat-icon>delete</mat-icon>
-                        </button>
-                    </mat-expansion-panel-header>
-
-                <mat-form-field appearance="outline" style="width: 100%">
-                    <mat-label>Complete address of the property</mat-label>
-                    <textarea matInput placeholder="Address" formControlName="complete_add"></textarea>
-                </mat-form-field>
-                <mat-form-field style="width: 100%">
-                    <input matInput placeholder="Area of the Property(in sq yd or Sq ft)"
-                           formControlName="area_of_property">
-                </mat-form-field>
-                <mat-form-field style="width: 100%">
-                    <input matInput placeholder="Structure of the let out property (eg. No of floors in total,G,FF,SF etc, let out floors from them)"
-                           formControlName="structure_property">
-                </mat-form-field>
-                <mat-form-field style="width: 100%">
-                    <input type="number" matInput placeholder="Total rooms let out (eg single room,2 BHK, let out rooms on each floor)"
-                           formControlName="total_room">
-                </mat-form-field>
-
-                <mat-form-field>
-                    <mat-select placeholder="Is Rent Agreement Available"
-                                formControlName="is_rent">
-                        <mat-option value="yes">Yes</mat-option>
-                        <mat-option value="no">No</mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <div *ngIf="item.controls['is_rent'].value == 'yes'">
-                    <mat-form-field>
-                        <input matInput [matDatepicker]="picker" formControlName="date_agreement"
-                               placeholder="Date of Agreement">
-                        <mat-datepicker-toggle matSuffix
-                                               [for]="picker"></mat-datepicker-toggle>
-                        <mat-datepicker #picker></mat-datepicker>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Validity"
-                               formControlName="date_validity">
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input type="number" matInput placeholder="Rent as per Agreement"
-                               formControlName="rent_agreement">
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input type="number" matInput placeholder="Actual Rent"
-                               formControlName="actual_rent">
-                    </mat-form-field>
-                    <mat-form-field>
-                        <mat-select placeholder="Photo of agreement taken ?"
-                                    formControlName="photo_areegment">
-                            <mat-option value="yes">Yes</mat-option>
-                            <mat-option value="no">No</mat-option>
-                        </mat-select>
-                    </mat-form-field>
+<h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
                 </div>
-                <mat-card>
-                    <mat-card-header>
-                        <p>How is rent received? (Is it in bank or cash, how much in which mode)</p>
-                    </mat-card-header>
-                    <mat-card-content>
-                        <mat-form-field>
-                            <input type="number" matInput placeholder="Bank"
-                                   formControlName="bank">
-                        </mat-form-field>
-                        <mat-form-field>
-                            <input type="number" matInput placeholder="Cash"
-                                   formControlName="cash">
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-form-field style="width: 100%">
-                    <input  matInput placeholder="Rent received from each floor and or Rooms (eg FF has 4 rooms, rent per room are Rs 2500, Rs 4000 and Rs 3200 respectively)"
-                            formControlName="rent_each_floor">
-                </mat-form-field>
-                <mat-form-field style="width: 100%">
-                    <input  matInput placeholder="Total rent received (Total montly rental from property/ies, with break up)"
-                            formControlName="total_rent">
-                </mat-form-field>
-                <mat-form-field style="width: 100%">
-                    <input  matInput placeholder="Property paper or other related document to prove ownership (eg. Property registry etc)"
-                            formControlName="related_doc_owner">
-                </mat-form-field>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+</h2>
+        
+<mat-dialog-content>
+        
+        
+    <mat-tab-group>
+            <mat-tab label="Questions">
+                    <ng-template matTabContent>
+                        <div fxLayout="row wrap">
+                            <div fxFlex="100">
 
-                <mat-card>
-                    <mat-card-header>
-                        <p>Details of the tenants (eg Name and Mobile No and other details)</p>
-                    </mat-card-header>
-                    <div formArrayName="details_tenants">
-                        <div *ngFor="let deatil of item.controls.details_tenants['controls']; let idx=index" [formGroupName]="idx">
-                            <mat-card-content>
+                                            <mat-form-field>
+                                                <input matInput placeholder="Person Met / Shown the Property(if he is not applicant or co-applicant)" formControlName="person_met">
+                                            </mat-form-field>
 
-                                <mat-form-field>
-                                    <input matInput placeholder="Name"
-                                           formControlName="name">
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input  matInput placeholder="Mobile No"
-                                            formControlName="mobile_no">
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input  matInput placeholder="Tenant Seen"
-                                            formControlName="tenants_seen">
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input  matInput placeholder="Tenant Confirmed Owner"
-                                            formControlName="tenants_con_owner">
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input  matInput placeholder="Rent Paid"
-                                            formControlName="rent_paid">
-                                </mat-form-field>
-                                <mat-form-field>
-                                    <input  matInput placeholder="Staying Since"
-                                            formControlName="staying_since">
-                                </mat-form-field>
-                                <button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Tenant" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="idx==0"
-                                        color="primary" style="float: right;" (click)="addTenant(i)">
-                                    <mat-icon>add</mat-icon>
-                                </button>
-                                <button type="button" (click)="deleteTenant(idx, i)" matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button *ngIf="idx>0"
+                                            <mat-form-field>
+                                                <mat-select placeholder="Property Owner" formControlName="property_own">
+                                                    <mat-option value="applicant">Applicant</mat-option>
+                                                    <mat-option value="co_applicant">co-applicant</mat-option>
+                                                    <mat-option value="parental">Parental</mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                            <mat-form-field>
+                                                <mat-select placeholder="Nature of the let out property" formControlName="nature_property">
+                                                    <mat-option value="residentail/commercial">Residential/commercial</mat-option>
+                                                    <mat-option value="other">other</mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
 
-                                        style="float: right;">
-                                    <mat-icon>delete</mat-icon>
-                                </button>
-                            </mat-card-content>
+
+                                            <div formArrayName="rental_home">
+                                            <mat-accordion
+                                                    *ngFor="let item of rentalForm.controls.rental_home['controls']; let i=index"
+                                                    [formGroupName]="i">
+                                                <mat-expansion-panel class="fields" [expanded]="step == i">
+                                                    <mat-expansion-panel-header>
+                                                        <mat-panel-title>
+                                                            <h5>{{i+1}}  Rental Home Details</h5>
+                                                        </mat-panel-title>
+                                                        <button type="button"  class="mr-1 mb-1 hover-icon" matTooltip="Add More Property" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
+                                                                color="primary" style="float: right;" (click)="addProperty($event)">
+                                                            <mat-icon>add</mat-icon>
+                                                        </button>
+                                                        <button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
+                                                                style="float: right;" (click)="deleteProperty(i)">
+                                                            <mat-icon>delete</mat-icon>
+                                                        </button>
+                                                    </mat-expansion-panel-header>
+
+                                                <mat-form-field appearance="outline" style="width: 100%">
+                                                    <mat-label>Complete address of the property</mat-label>
+                                                    <textarea matInput placeholder="Address" formControlName="complete_add"></textarea>
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 100%">
+                                                    <input matInput placeholder="Area of the Property(in sq yd or Sq ft)"
+                                                        formControlName="area_of_property">
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 100%">
+                                                    <input matInput placeholder="Structure of the let out property (eg. No of floors in total,G,FF,SF etc, let out floors from them)"
+                                                        formControlName="structure_property">
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 100%">
+                                                    <input type="number" matInput placeholder="Total rooms let out (eg single room,2 BHK, let out rooms on each floor)"
+                                                        formControlName="total_room">
+                                                </mat-form-field>
+
+                                                <mat-form-field>
+                                                    <mat-select placeholder="Is Rent Agreement Available"
+                                                                formControlName="is_rent">
+                                                        <mat-option value="yes">Yes</mat-option>
+                                                        <mat-option value="no">No</mat-option>
+                                                    </mat-select>
+                                                </mat-form-field>
+                                                <div *ngIf="item.controls['is_rent'].value == 'yes'">
+                                                    <mat-form-field>
+                                                        <input matInput [matDatepicker]="picker" formControlName="date_agreement"
+                                                            placeholder="Date of Agreement">
+                                                        <mat-datepicker-toggle matSuffix
+                                                                            [for]="picker"></mat-datepicker-toggle>
+                                                        <mat-datepicker #picker></mat-datepicker>
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <input matInput placeholder="Validity"
+                                                            formControlName="date_validity">
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <input type="number" matInput placeholder="Rent as per Agreement"
+                                                            formControlName="rent_agreement">
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <input type="number" matInput placeholder="Actual Rent"
+                                                            formControlName="actual_rent">
+                                                    </mat-form-field>
+                                                    <mat-form-field>
+                                                        <mat-select placeholder="Photo of agreement taken ?"
+                                                                    formControlName="photo_areegment">
+                                                            <mat-option value="yes">Yes</mat-option>
+                                                            <mat-option value="no">No</mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                </div>
+                                                <mat-card>
+                                                    <mat-card-header>
+                                                        <p>How is rent received? (Is it in bank or cash, how much in which mode)</p>
+                                                    </mat-card-header>
+                                                    <mat-card-content>
+                                                        <mat-form-field>
+                                                            <input type="number" matInput placeholder="Bank"
+                                                                formControlName="bank">
+                                                        </mat-form-field>
+                                                        <mat-form-field>
+                                                            <input type="number" matInput placeholder="Cash"
+                                                                formControlName="cash">
+                                                        </mat-form-field>
+                                                    </mat-card-content>
+                                                </mat-card>
+                                                <mat-form-field style="width: 100%">
+                                                    <input  matInput placeholder="Rent received from each floor and or Rooms (eg FF has 4 rooms, rent per room are Rs 2500, Rs 4000 and Rs 3200 respectively)"
+                                                            formControlName="rent_each_floor">
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 100%">
+                                                    <input  matInput placeholder="Total rent received (Total montly rental from property/ies, with break up)"
+                                                            formControlName="total_rent">
+                                                </mat-form-field>
+                                                <mat-form-field style="width: 100%">
+                                                    <input  matInput placeholder="Property paper or other related document to prove ownership (eg. Property registry etc)"
+                                                            formControlName="related_doc_owner">
+                                                </mat-form-field>
+
+                                                <mat-card>
+                                                    <mat-card-header>
+                                                        <p>Details of the tenants (eg Name and Mobile No and other details)</p>
+                                                    </mat-card-header>
+                                                    <div formArrayName="details_tenants">
+                                                        <div *ngFor="let deatil of item.controls.details_tenants['controls']; let idx=index" [formGroupName]="idx">
+                                                            <mat-card-content>
+
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Name"
+                                                                        formControlName="name">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input  matInput placeholder="Mobile No"
+                                                                            formControlName="mobile_no">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input  matInput placeholder="Tenant Seen"
+                                                                            formControlName="tenants_seen">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input  matInput placeholder="Tenant Confirmed Owner"
+                                                                            formControlName="tenants_con_owner">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input  matInput placeholder="Rent Paid"
+                                                                            formControlName="rent_paid">
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input  matInput placeholder="Staying Since"
+                                                                            formControlName="staying_since">
+                                                                </mat-form-field>
+                                                                <button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Tenant" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="idx==0"
+                                                                        color="primary" style="float: right;" (click)="addTenant(i)">
+                                                                    <mat-icon>add</mat-icon>
+                                                                </button>
+                                                                <button type="button" (click)="deleteTenant(idx, i)" matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button *ngIf="idx>0"
+
+                                                                        style="float: right;">
+                                                                    <mat-icon>delete</mat-icon>
+                                                                </button>
+                                                            </mat-card-content>
+                                                        </div>
+                                                    </div>
+                                                </mat-card>
+                                                <mat-form-field>
+                                                    <mat-select placeholder="Photogaraphs of the Property"
+                                                                formControlName="property_photographs">
+                                                        <mat-option value="yes">Yes</mat-option>
+                                                        <mat-option value="no">No</mat-option>
+                                                    </mat-select>
+                                                </mat-form-field>
+                                                <mat-form-field>
+                                                    <input  matInput placeholder="Third party check of prevailing rent in the neighbour hood (TPC with whom, how much rent quoted)"
+                                                            formControlName="third_party_check">
+                                                </mat-form-field>
+                                                </mat-expansion-panel>
+
+                                            </mat-accordion>
+                                            </div>
+                                            
+                            </div>
                         </div>
-                    </div>
-                </mat-card>
-                <mat-form-field>
-                    <mat-select placeholder="Photogaraphs of the Property"
-                                formControlName="property_photographs">
-                        <mat-option value="yes">Yes</mat-option>
-                        <mat-option value="no">No</mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field>
-                    <input  matInput placeholder="Third party check of prevailing rent in the neighbour hood (TPC with whom, how much rent quoted)"
-                            formControlName="third_party_check">
-                </mat-form-field>
-                </mat-expansion-panel>
+                    </ng-template>
+            </mat-tab>
+            <mat-tab label="Docs">
+                <ng-template matTabContent>
+                    <div fxLayout="row wrap">
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                      <div class="p-list-main mb-2">
+                                                          <div class="p-list">
+      
+                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                              <div class="bottom">
+                                                                  <div class="left">
+                                                                      <div class="details">
+                                                                          <small>Nivi SKM</small>
+                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                      </div>
+                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                  </div>
+                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                          <div class="p-list-main mb-2">
+                                                              <div class="p-list">
+          
+                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                  <div class="bottom">
+                                                                      <div class="left">
+                                                                          <div class="details">
+                                                                              <small>Nivi SKM</small>
+                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                          </div>
+                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                      </div>
+                                                      <div fxFlex="25" class="m-gap p-gap">
+                                                              <div class="p-list-main mb-2">
+                                                                  <div class="p-list">
+              
+                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                      <div class="bottom">
+                                                                          <div class="left">
+                                                                              <div class="details">
+                                                                                  <small>Nivi SKM</small>
+                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                              </div>
+                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                          </div>
+                                                          <div fxFlex="25" class="m-gap p-gap">
+                                                                  <div class="p-list-main mb-2">
+                                                                      <div class="p-list">
+                  
+                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                          <div class="bottom">
+                                                                              <div class="left">
+                                                                                  <div class="details">
+                                                                                      <small>Nivi SKM</small>
+                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                  </div>
+                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>
+                                                              <div fxFlex="25" class="m-gap p-gap">
+                                                                      <div class="p-list-main mb-2">
+                                                                          <div class="p-list">
+                      
+                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                              <div class="bottom">
+                                                                                  <div class="left">
+                                                                                      <div class="details">
+                                                                                          <small>Nivi SKM</small>
+                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                      </div>
+                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                                                          <div class="p-list-main mb-2">
+                                                                              <div class="p-list">
+                          
+                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                  <div class="bottom">
+                                                                                      <div class="left">
+                                                                                          <div class="details">
+                                                                                              <small>Nivi SKM</small>
+                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                          </div>
+                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                      </div>
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+      
+                    </div>          
+               </ng-template>
+            </mat-tab>
+    </mat-tab-group>
 
-            </mat-accordion>
-            </div>
-            <div style="text-align: right;" class="pt-1">
-                <button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="rentalSubmit()"><mat-icon>save</mat-icon>
-                </button>
-            </div>
-        </form>
-    </mat-card-content>
-</mat-card>
+</mat-dialog-content>
+<mat-dialog-actions>
+      <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                <!-- <mat-form-field appearance="outline" style="width: 100%">
+                  <mat-label>Remarks</mat-label>
+                  <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                </mat-form-field> -->
+      </div>
+      <div fxFlex="40" align="end">
+            <button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above"   (click)="rentalSubmit()"><mat-icon>save</mat-icon>
+    </button>
+    </div>
+</mat-dialog-actions>
+</form>
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.scss
index 79de302fd..f731f4f4f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.scss
@@ -1,27 +1,112 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+//   width:40%;
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+// mat-form-field {
+//   width: 27%;
+//   margin: 0 2%;
+// }
+// .fields mat-form-field {
+//   width: 45%;
+//   margin: 0 2%;
+// }
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%;
-  width:40%;
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
-}
-mat-form-field {
-  width: 27%;
-  margin: 0 2%;
-}
-.fields mat-form-field {
-  width: 45%;
-  margin: 0 2%;
-}
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts
index 3b5741e70..4de812beb 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts
@@ -1,7 +1,9 @@
-import {Component, OnInit, Input, Output} from '@angular/core';
+import {Component, OnInit, Input, Output, Inject} from '@angular/core';
 import {FormBuilder, FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
 import {NotifierService} from 'angular-notifier';
 import {PdTrigerService} from './../../../../../pd-service/pd-triger.service';
+import {AwsService} from '../../../../../../AwsService/aws.service';
 import {Key} from 'protractor';
 
 @Component({
@@ -14,8 +16,9 @@ export class RentalInfoComponent implements OnInit {
     // @Input() pdid: string;
     // @Input() pd_all_details: any;
     // form_id: number;
-    @Input() pdid: number;
-    @Input() form_id: number;
+    pageTitle: string ="Rental Information";
+    pdid: number;
+    form_id: number;
     step: number;
 
     public rentalForm: FormGroup;
@@ -23,11 +26,17 @@ export class RentalInfoComponent implements OnInit {
     propertyList: FormGroup;
     private notifier: NotifierService;
 
-    constructor(notifier: NotifierService, private _fb: FormBuilder, private _pd: PdTrigerService) {
-        this.notifier = notifier;
-        // this.form_id = 3;
-    }
-
+    constructor(
+        notifier: NotifierService, 
+        private _fb: FormBuilder, 
+        private _pd: PdTrigerService,
+        private _aws:AwsService, 
+        @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+            this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+            this.notifier = notifier;
+            this.form_id = 17;
+      }
+       
     ngOnInit() {
         this.step = 0;
         this.inintRentalForm();
@@ -68,7 +77,7 @@ export class RentalInfoComponent implements OnInit {
                 rentalinfo.rental_home = result;
                 rentalinfo.pdid = this.pdid;
                 rentalinfo.formid = this.form_id;
-                rentalinfo.fk_createdby = this.pdid;
+                rentalinfo.fk_createdby = this._aws.getlocale();
                 this.rentalForm.setValue(rentalinfo);
             } else {
                 control.push(this.createpropertyArray());
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
index 2dfac9422..6c81c0054 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
@@ -1,109 +1,267 @@
-<mat-card style="padding: 12px;">
-<p>Stock Details</p>
 <form [formGroup]="stockForm" class="address">
+        <h2 mat-dialog-title class="paragraph_change">
+                <div fxFlex="70" align="left">
+                        {{pageTitle}}
+                </div>
+                <div fxFlex="30" align="end">
+                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+                
+                </div>
+        </h2>
+        
+        <mat-dialog-content>
+        
+        
+                <mat-tab-group>
+                        <mat-tab label="Questions">
+                          <ng-template matTabContent>
+                                <div fxLayout="row wrap">
+                                        <div fxFlex="100">
+                                               <!-- start main applicant -->
+                                               <mat-card>
+                                                    <mat-card-header>
+                                                        <p>Raw Materials<p>
+                                                    </mat-card-header>
+                                                    <div formArrayName="raw_materials">
+                                                        <div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index"
+                                                             [formGroupName]="i">
+                                                            <mat-card-content class="matcard">
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Name" formControlName="raw_name" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <mat-select placeholder="is the Stock is Observed ?"
+                                                                                formControlName="stock_observed"  required>
+                                                                        <mat-option value="yes" >Yes</mat-option>
+                                                                        <mat-option value="no" >No</mat-option>
+                                                                    </mat-select>
+                                                                </mat-form-field>
+                                                                <div *ngIf="details.get('stock_observed').value == 'no'" >
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <mat-select placeholder="Unit of Mearsurement"
+                                                                                formControlName="raw_uom"  required>
+                                                                        <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
+                                                                    </mat-select>
+                                                                </mat-form-field>
+                                                                <mat-form-field *ngIf="details.get('raw_uom').value == 61" >
+                                                                    <input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field>
+                                                                    <input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)"  required>
+                                                                </mat-form-field>
+                                                                <mat-form-field style="width:76%">
+                                                                    <input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" (keypress)="keyPress($event)" required>
+                                                                </mat-form-field>
+                                                                <mat-form-field style="width:76%">
+                                                                    <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw"  required>
+                                                                </mat-form-field>
+                                                                </div>
+                                            
+                                                                <button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()"
+                                                                matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
+                                                                    <mat-icon>add</mat-icon>
+                                                                </button>
+                                                                <button type="button" mat-raised-button mat-icon-button (click)="deleteRawMaterials(i)"
+                                                                matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
+                                                                    <mat-icon>delete</mat-icon>
+                                                                </button>
+                                                            </mat-card-content>
+                                                        </div>
+                                                    </div>
+                                                </mat-card>
+                                              
+                                <!-- end main applicant -->
+                                        </div>
+                                        </div>
+                                        <div fxLayout="row wrap">
+                                            <div fxFlex="100">
+                                                       <!-- start co applicant form details -->                 
+                                                       <mat-card>
+                                                            <mat-card-header>
+                                                                <p>Finished Goods<p>
+                                                            </mat-card-header>
+                                                            <div formArrayName="finished_goods">
+                                                                <div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index"
+                                                                     [formGroupName]="i">
+                                                                    <mat-card-content class="matcard">
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Name" formControlName="goods_name" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>
+                                                                            <input matInput placeholder="Estimated Quantity" formControlName="goods_quantity" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field>  
+                                                                            <input matInput placeholder="Value" formControlName="goods_value" (keypress)="keyPress($event)" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field style="width:76%">
+                                                                            <input matInput placeholder="Value of finished goods as per latest financial statements" formControlName="finished_goods_value" (keypress)="keyPress($event)" required>
+                                                                        </mat-form-field>
+                                                                        <mat-form-field style="width:76%">
+                                                                            <input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required>
+                                                                        </mat-form-field>
+                                                    
+                                                                        <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
+                                                                        matTooltip="Add More Finished Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
+                                                                            <mat-icon>add</mat-icon>
+                                                                        </button>
+                                                                        <button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
+                                                                        matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"  *ngIf="i>0">
+                                                                            <mat-icon>delete</mat-icon>
+                                                                        </button>
+                                                                    </mat-card-content>
+                                                                </div>
+                                                            </div>
+                                                        </mat-card>
+                                     <!-- end co apllicant -->      
+                                                            
+                                                </div>
+                                            </div>
+                          </ng-template>
+                        </mat-tab>
+                        <mat-tab label="Docs">
+                          <ng-template matTabContent>
+                                                            <div fxLayout="row wrap">
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                                                                            <div class="p-list-main mb-2">
+                                                                                                <div class="p-list">
+                                            
+                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                    <div class="bottom">
+                                                                                                        <div class="left">
+                                                                                                            <div class="details">
+                                                                                                                <small>Nivi SKM</small>
+                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                            </div>
+                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                        
+                                                                </div>
+                                                
+                                 </ng-template>
+                        </mat-tab>
+                      
+                </mat-tab-group>
+        
+        </mat-dialog-content>
+        <mat-dialog-actions>
+                <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                        <mat-form-field appearance="outline" style="width: 100%">
+                                <mat-label>Please comment on the stock level observed?</mat-label>
+                                <textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
+                            </mat-form-field>
+                      </div>
+              <div fxFlex="40" align="end">
+                    <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
+                    </button>
+            </div>
+        </mat-dialog-actions>
+        
+        </form>
+        <notifier-container></notifier-container>
+
+
+
+
+
+
+
+<!-- <mat-card style="padding: 12px;">
+<p>Stock Details</p>
+<form [formGroup]="stockForm" class="address"> -->
+<!-- {{uomData | json}} -->
+    <!-- <mat-card>
+=======
 <!-- {{uomData | json}} -->
     <mat-card>
-        <mat-card-header>
-            <p>Raw Materials<p>
-        </mat-card-header>
-        <div formArrayName="raw_materials">
-            <div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index"
-                 [formGroupName]="i">
-                <mat-card-content class="matcard">
-                    <mat-form-field>
-                        <input matInput placeholder="Name" formControlName="raw_name" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <mat-select placeholder="is the Stock is Observed ?"
-                                    formControlName="stock_observed"  required>
-                            <mat-option value="yes" >Yes</mat-option>
-                            <mat-option value="no" >No</mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <div *ngIf="details.get('stock_observed').value == 'no'" >
-                    <mat-form-field>
-                        <input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <mat-select placeholder="Unit of Mearsurement"
-                                    formControlName="raw_uom"  required>
-                            <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field *ngIf="details.get('raw_uom').value == 61" >
-                        <input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)"  required>
-                    </mat-form-field>
-                    <mat-form-field style="width:76%">
-                        <input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" (keypress)="keyPress($event)" required>
-                    </mat-form-field>
-                    <mat-form-field style="width:76%">
-                        <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw"  required>
-                    </mat-form-field>
-                    </div>
-
-                    <button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()"
-                    matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                    <button type="button" mat-raised-button mat-icon-button (click)="deleteRawMaterials(i)"
-                    matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>
-    <mat-card>
-        <mat-card-header>
-            <p>Finished Goods<p>
-        </mat-card-header>
-        <div formArrayName="finished_goods">
-            <div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index"
-                 [formGroupName]="i">
-                <mat-card-content class="matcard">
-                    <mat-form-field>
-                        <input matInput placeholder="Name" formControlName="goods_name" required>
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Estimated Quantity" formControlName="goods_quantity" required>
-                    </mat-form-field>
-                    <mat-form-field>  
-                        <input matInput placeholder="Value" formControlName="goods_value" (keypress)="keyPress($event)" required>
-                    </mat-form-field>
-                    <mat-form-field style="width:76%">
-                        <input matInput placeholder="Value of finished goods as per latest financial statements" formControlName="finished_goods_value" (keypress)="keyPress($event)" required>
-                    </mat-form-field>
-                    <mat-form-field style="width:76%">
-                        <input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required>
-                    </mat-form-field>
-
-                    <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
-                    matTooltip="Add More Finished Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
-                        <mat-icon>add</mat-icon>
-                    </button>
-                    <button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
-                    matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"  *ngIf="i>0">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </mat-card-content>
-            </div>
-        </div>
-    </mat-card>
-    <div fxLayout="row">
-        <div fxFlex="60" class="pb-0 text-sm-left">
-            <mat-form-field appearance="outline" style="width: 100%">
-                <mat-label>Please comment on the stock level observed?</mat-label>
-                <textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
-            </mat-form-field>
-        </div> 
-    </div>
-    <div style="text-align: right;">
-        <button type="submit" class="mr-1 mb-1 hover-icon"  mat-raised-button mat-icon-button  matTooltip="Submit" matTooltipPosition="above"  (click)="submitDetails()"><mat-icon>save</mat-icon>
-        </button>
-     </div>
-     
-</form>
-</mat-card>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss
index db319b869..b4ffad50d 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss
@@ -1,18 +1,103 @@
-.address {
-  display: flex;
-  padding: 0 2%;
-  flex-direction: column;
-}
+// .address {
+//   display: flex;
+//   padding: 0 2%;
+//   flex-direction: column;
+// }
 
-.address > * {
-  width: 100%;
+// .address > * {
+//   width: 100%;
+// }
+// .matcard mat-form-field {
+//   margin: 0 2%;
+// }
+// .address .button {
+//   float: right;
+//   width: 10px;
+//   background: #62B013;
+//   color: white;
+// }
+
+.paragraph_change {
+  color:  #e00201 !important;
 }
-.matcard mat-form-field {
-  margin: 0 2%;
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
+
+  mat-form-field {
+    margin: 0 2%;
+  }
+  $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
 }
-.address .button {
-  float: right;
-  width: 10px;
-  background: #62B013;
-  color: white;
-}
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts
index eaf84db3b..852581817 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts
@@ -30,8 +30,11 @@ import { analyzeAndValidateNgModules } from '@angular/compiler';
     styleUrls: ['./stock.component.scss']
 })
 export class StockComponent implements OnInit {
-    @Input() pdid: number;
-    @Input() form_id: number;
+    // @Input() pdid: number;
+    // @Input() form_id: number;
+    pageTitle: string ="Stock Details";
+    pdid: number;
+    form_id: number;
     public stockForm: FormGroup;
     private notifier: NotifierService;
     public uomData : any = [];
@@ -39,8 +42,10 @@ export class StockComponent implements OnInit {
     
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
-                private _pd: PdTrigerService) {
-        this.notifier = notifier;
+                private _pd: PdTrigerService,@Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+                    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                    this.form_id = 11;
+                    this.notifier = notifier;
     }
     ngOnInit() {
         this.initstockForm();
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index 1dfe625a5..772274f88 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
@@ -1,96 +1,252 @@
-<!--<pre> {{ m_group | json}}</pre>-->
-<mat-card style="padding: 12px;">  
-  <p>Supplier Details</p>
-  <form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
-    <div fxLayout="row" fxLayoutAlign="start none">
-      <div class="example-full-width">
-        <mat-form-field fxFill>
-          <textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
-          <mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
-        </mat-form-field>
-      </div>
-    </div>
-    <div fxLayout="row" fxLayoutAlign="start none">
-      <div formArrayName="supplier_details" fxFill>
-           <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
-                  <mat-card>
-                      <mat-card-content> 
-                <div [formGroupName]="i">
-                    <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-                      <div fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
-                          <!-- <mat-error *ngIf="sup.controls['supplier_name'].hasError('required') && sup.controls['supplier_name'].touched" class="mat-text-warn">Supplier Name Required.</mat-error> -->
-                        </mat-form-field>
-                      </div>
-                      <div fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
-                          <!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
-                        </mat-form-field>
-                      </div>
-                      <div fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number"  (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
-                          <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
-                          <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                          <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Vaild Mobile Number Requried</mat-error> 
-                          
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
-                      <div fxFlex="30">
-                        <mat-form-field style="width:100%">
-                          <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
-                            <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </div>
-                      <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width" >
-                          <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
-                        </mat-form-field>
-                      </div>
-                      <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3" fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Credit Period" formControlName="credit_period">                
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div fxLayout="row" fxLayoutGap="14px" fxLayoutAlign="start none">
-                     <!-- <div fxFlex="30">
-                        <mat-form-field style="width:100%"> 
-                          <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
-                            <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
-                          </mat-select>
-                         
-                         </mat-form-field>
-                      </div>
-                      <div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
-                        <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                        </mat-form-field>
-                      </div>-->
-        
-                      <div fxFlex="30" style="text-align:center;">
-                        <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
-                             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                           </span>
-                      </div>
-                    </div>
+<form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
+
+    <h2 mat-dialog-title class="paragraph_change">
+            <div fxFlex="70" align="left">{{pageTitle}}</div>
+            <div fxFlex="30" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+            
+            </div>
+    </h2>
+    
+    <mat-dialog-content>
+    
+            <mat-tab-group>
+
+                    <mat-tab label="Questions">
+                      <ng-template matTabContent>
+                            <div fxLayout="row wrap">
+                                <div fxFlex="100">     
+                                      <mat-card>
+                                        <mat-card-content>
+                                            <mat-form-field fxFill>
+                                                <textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
+                                                <mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
+                                            </mat-form-field>
+                                        </mat-card-content>
+                                      </mat-card>
+                                </div>
+                            </div>
+                            
+                            <div fxLayout="row wrap">
+                              <div fxFlex="100">
+                                 <mat-card>
+                                    <!-- <mat-card-title></mat-card-title> -->
+                                      <mat-card-content formArrayName="supplier_details" fxFill>
+                                        <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index" [formGroupName]="i">
+                                          
+                                              <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                                  <div fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
+                                                      <!-- <mat-error *ngIf="sup.controls['supplier_name'].hasError('required') && sup.controls['supplier_name'].touched" class="mat-text-warn">Supplier Name Required.</mat-error> -->
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
+                                                      <!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number"  (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
+                                                      <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
+                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
+                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Vaild Mobile Number Requried</mat-error> 
+                                                      
+                                                    </mat-form-field>
+                                                  </div>
+                                              </div>
+                                              <div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
+                                                  <div fxFlex="30">
+                                                    <mat-form-field style="width:100%">
+                                                      <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
+                                                        <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                                      </mat-select>
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width" >
+                                                      <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
+                                                    </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3" fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Credit Period" formControlName="credit_period">                
+                                                    </mat-form-field>
+                                                  </div>
+                                              </div>
+                                              <div fxLayout="row" fxLayoutGap="14px" style="text-align:center;">
+                                                 <!-- <div fxFlex="30">
+                                                    <mat-form-field style="width:100%"> 
+                                                      <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
+                                                        <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
+                                                      </mat-select>
+                                                     
+                                                     </mat-form-field>
+                                                  </div>
+                                                  <div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
+                                                    <mat-form-field class="ml-xs example-full-width">
+                                                      <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
+                                                    </mat-form-field>
+                                                  </div>--> 
+                                                  <!-- <div fxFlex="30" style="text-align:center;"> -->
+                                                         <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                                                           <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                         </span>
+                                                    <!-- </div> -->
+                                              </div>
+                                        </div>  
+                                      
+                                       
+                                      </mat-card-content>
+
+                                      <mat-card-actions align="end">
+                                            <!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                            </span> -->
+                                      </mat-card-actions>
+                                        
+                                 </mat-card>                
+                              </div>
+                            </div>
+                      </ng-template>
+                    </mat-tab>
+
+                    <mat-tab label="Docs">
+                      <ng-template matTabContent>
+                                                          <div fxLayout="row wrap">
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
+                    
+                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>Nivi SKM</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                        <div class="p-list-main mb-2">
+                                                                            <div class="p-list">
+                        
+                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                <div class="bottom">
+                                                                                    <div class="left">
+                                                                                        <div class="details">
+                                                                                            <small>Nivi SKM</small>
+                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                        </div>
+                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                            <div class="p-list-main mb-2">
+                                                                                <div class="p-list">
+                            
+                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                    <div class="bottom">
+                                                                                        <div class="left">
+                                                                                            <div class="details">
+                                                                                                <small>Nivi SKM</small>
+                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                            </div>
+                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                <div class="p-list-main mb-2">
+                                                                                    <div class="p-list">
+                                
+                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                        <div class="bottom">
+                                                                                            <div class="left">
+                                                                                                <div class="details">
+                                                                                                    <small>Nivi SKM</small>
+                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                </div>
+                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                </div>
+
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                    <div class="p-list-main mb-2">
+                                                                                        <div class="p-list">
+                                    
+                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                            <div class="bottom">
+                                                                                                <div class="left">
+                                                                                                    <div class="details">
+                                                                                                        <small>Nivi SKM</small>
+                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                    </div>
+                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                </div>
+                                                                <div fxFlex="25" class="m-gap p-gap">
+                                                                                        <div class="p-list-main mb-2">
+                                                                                            <div class="p-list">
+                                        
+                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                                                                                <div class="bottom">
+                                                                                                    <div class="left">
+                                                                                                        <div class="details">
+                                                                                                            <small>Nivi SKM</small>
+                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                                        </div>
+                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                </div>
+                    
+                                                            </div>
+                                            
+                      </ng-template>
+                    </mat-tab>
+                  
+            </mat-tab-group>
+    
+    </mat-dialog-content>
+
+    <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                    <!-- <mat-form-field appearance="outline" style="width: 100%">
+                      <mat-label>Remarks</mat-label>
+                      <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                    </mat-form-field> -->
                   </div>
-               
-          </mat-card-content>
-        </mat-card>
-      </div>
-        </div>
-    </div>
-    <div class="row" style="text-align:right;">
-      <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
-      <!----<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
-      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
-    </div>
-  </form>
-</mat-card>
\ No newline at end of file
+          <div fxFlex="40" align="end">
+            
+            <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
+                    class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+            <!----<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
+          </div>
+    </mat-dialog-actions>
+    
+</form>
+<notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
index 890847551..4e655f1ef 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
@@ -1,3 +1,87 @@
-.example-full-width{
-    width : 100%;
-}
\ No newline at end of file
+// .example-full-width{
+//     width : 100%;
+// }
+
+.paragraph_change {
+    color:  #e00201 !important;
+  }
+  .mat-card-content {
+      background-color: white;
+    }
+    .mat-card-actions { 
+      background-color: white;
+    }
+  
+    mat-form-field {
+      margin: 0 2%;
+    }
+    $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+  $product-bg-color-hover: rgba(103, 58, 183, 0.7);
+  .p-list-main {
+      background: white;
+      margin: auto;
+      position: relative;
+      overflow: hidden !important;
+      border-radius: 10px 10px 10px 10px;
+      box-shadow: $base-card-box-shadow;
+      transform: scale(0.95);
+      transition: box-shadow 0.5s, transform 0.5s;
+      &:hover {
+          transform: scale(1);
+          box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+      }
+      .p-list {
+          position: relative;
+          .top {
+              height: 100%;
+              width: 100%;
+              //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+              -webkit-background-size: 100%;
+              -moz-background-size: 100%;
+              -o-background-size: 100%;
+              background-size: 100%;
+          }
+          .bottom {
+              width: 200%;
+              height: 15%;
+              transition: transform 0.5s;
+              h1 {
+                  margin: 0;
+                  padding: 0;
+              }
+              p {
+                  margin: 0;
+                  padding: 0;
+              }
+              .left {
+                  height: 100%;
+                  width: 50%;
+                  background: #f4f4f4;
+                  position: relative;
+                  float: left;
+                  .details {
+                      padding: 5px;
+                      float: left;
+                      // width: calc(70% - 40px);
+                  }
+                 
+              }
+              .right {
+                  width: 50%;
+                  background: #A6CDDE;
+                  color: white;
+                  float: right;
+                  height: 200%;
+                  overflow: hidden;
+                  .details {
+                      padding: 20px;
+                      float: right;
+                      width: calc(70% - 40px);
+                  }
+                 
+               
+              }
+          }
+      }
+     
+  }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
index 4f3f7963f..6fe83ad3f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
   OnInit,
   Inject,
-  Input
+  Output,Input
 } from '@angular/core';
 
 import {
@@ -20,79 +20,39 @@ import {
   MatDialogRef,
   MAT_DIALOG_DATA
 } from '@angular/material';
+
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+
 @Component({
   selector: 'app-supplier-info',
   templateUrl: './supplier-info.component.html',
   styleUrls: ['./supplier-info.component.scss']
 })
+
 export class SupplierInfoComponent implements OnInit {
  
-  @Input() pdid: number;
+  pageTitle: string ="Supplier Details";
+  
+  //@Input() pdid: number;
+  pdid : string;
+  form_id:number;
 
   public _supplierQuesFrom: FormGroup;
   public submitted = false;
 
-public m_paymentModeType= [];
-
-  // public m_paymentModeType= [
-  //   {
-  //     'id': "1",
-  //     'name': 'Immediate Or Advanced Payment'
-  //   },
-  //   {
-  //     'id': "2",
-  //     'name': 'Credit'
-  //   },
-  //   {
-  //     'id': "3",
-  //     'name': 'Combination of Both'
-  //   },
-  // ];
-//public m_freqOfPurchase= [];
-  // public m_freqOfPurchase= [
-  //   {
-  //     'id': "1",
-  //     'name': 'Daily'
-  //   },
-  //   {
-  //     'id': "2",
-  //     'name': 'Weekly'
-  //   },
-  //   {
-  //     'id': "3",
-  //     'name': 'Monthly'
-  //   },
-  //   {
-  //     'id': "4",
-  //     'name': 'Every 3 months'
-  //   },
-  //   {
-  //     'id': "5",
-  //     'name': 'Half yearly'
-  //   },
-  //   {
-  //     'id': "6",
-  //     'name': 'Yearly'
-  //   },
-  //   {
-  //     'id': "7",
-  //     'name': 'As and when required'
-  //   },
-  //   {
-  //     'id': "8",
-  //     'name': 'Others'
-  //   }
-  // ]
-
+  public m_paymentModeType= [];
   private notifier: NotifierService;
+
   constructor(
-    notifier: NotifierService,
-    private _formBuilder: FormBuilder,
-    private pdTrigerService: PdTrigerService) {
-          this.notifier = notifier;
-     }
+              notifier: NotifierService,
+              private _formBuilder: FormBuilder,
+              private pdTrigerService: PdTrigerService,
+              @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+                this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+                this.form_id = 1;
+                this.notifier = notifier;
+  }
 
   ngOnInit() {
   //  this.getM_FreqOfPurchase();
@@ -305,4 +265,4 @@ apiLoadFinish: boolean = false;
   //   ]
   // }
 
-}
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
index dcd59d6a9..1be646df3 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
@@ -1,495 +1,30 @@
-<mat-card>
-     <mat-card-content>
-
-                        <div fxLayout="row">
-                          <!---  <button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above"
-                                    (click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>-->
-                            <div fxFlex="33" class="text-xs-left">
-                                <h4 class="mt-0">{{mainApplicantName}}</h4>
-                                <small>{{pdMasterList.customer_segment_name}}</small>
-                            </div>
-                            <div fxFlex="56" class="text-xs-right">
-                                <h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}</h4>
-                                <small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
-
-                            </div>
-                            <div fxFlex="10" style="text-align: right;" class="mb-1">
-                <button mat-raised-button mat-icon-button class="hover-icon  " type="button" matTooltip="Close" matTooltipPosition="above"
-                (click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
-        </div>
-
-                        </div>
-                    </mat-card-content>
-</mat-card>
-<mat-card style="max-height:400px;overflow: auto;">
-    
+<mat-card class="parent_mat_card">
+    <mat-card-header >
+        <mat-card-title>
+            <div fxFlex="33" align="left">
+                    <h4 class="mt-0">{{mainApplicantName}}</h4>
+                    <small>{{pdMasterList.customer_segment_name}}</small>
+                 </div>
+                 <div fxFlex="66" align="end">
+                    <h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}
+                            <button mat-raised-button mat-icon-button class="hover-icon  " type="button" matTooltip="Close" matTooltipPosition="above"
+                            (click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
+                    </h4>
+                    <small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
+                 </div>
+                </mat-card-title>
+    </mat-card-header>
     <mat-card-content>
-             <button matTooltip="Menu" matTooltipPosition="above" (click)="mailnav.toggle()" color="primary" fxHide="false" fxshow.gt-sm mat-icon-button  mat-raised-button>
-                    <mat-icon style="color: white;">short_text</mat-icon>
-                </button>
-        <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
-            <mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
-               
-
-                 <!--{{ (currentPDStatus==pdStatusCheck.INPROGRESS)? 'COMPLETE':(currentPDStatus) }} -->
-               <div *ngIf="categoryList != ''">
-                <mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
-                    <mat-expansion-panel-header>
-                        <mat-panel-title class="text-xs-left">
-                            <span class="mt-0"> {{category.category_name}}</span>
-                        </mat-panel-title>
-
-                    </mat-expansion-panel-header>
-
-                    <mat-list>
-                        <mat-list-item class="custm-list-item" *ngFor="let questions of category.questions; let quesIndex=index" [ngStyle]="{'color':quesIndex === selectedQuestionIndex &&  catIndex === selectedCategoryIndex ? 'red' : 'black' }" (click)="OnSelectDirectQuestions(questions, catIndex,quesIndex)">
-                            <small>{{ (questions.question.length>15)? (questions.question | slice:0:15)+'..':(questions.question) }}</small>
-                        </mat-list-item>
-
-
-                    </mat-list>
-                </mat-expansion-panel>
-               </div>
-                <mat-list *ngFor="let formButton of categoryFormButtons">
-                    <mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}">
-
-    <span class="mt-0">{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</span>
-                    </mat-list-item>
-                </mat-list>
-
- <button _ngcontent-c21="" matTooltip="Complete Question" matTooltipPosition="above" [disabled]="actualQuestions!=answeredQuestions" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(pdStatusCheck.COMPLETED);" style="margin-top:10px;"><span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span></button>
-
-                <!--<mat-list>-->
-                <!--<mat-list-item (click)="OnSelectDirectForms(rentalDetail)" style="background-color:#e0e0e0">-->
-                    <!--<span class="mt-0">{{rentalDetail.form_name}}</span>-->
-                <!--</mat-list-item>-->
-                <!--</mat-list>-->
-
-            </mat-sidenav>
-            
-            <!--<mat-toolbar color="primary" fxHide="false" fxshow.gt-sm>
-                <button (click)="mailnav.toggle()" mat-icon-button>
-                    <mat-icon style="color: white;">short_text</mat-icon>
-                </button>
-                <span class="mr-1 ml-1">Category</span>
-            </mat-toolbar>-->
-            <div class="main-content" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-                
-                <figure>
-                   
-                    <div *ngIf="!formsCategoryEnable">
-                        <mat-card-content style="min-height: 500px;" *ngIf="selectedCategory.length==0">
-                            <p>No Records Found..</p>
-                        </mat-card-content>
-
-                        <!-- check type of questions -->
-
-                        <ng-container [ngSwitch]="selectedCategory.fk_question_answertype">
-                            <!-- start options type questions section -->
-                            <ng-container  *ngSwitchCase="1">
-
-                                <mat-card-content>
-                               
-                                    <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;" style="min-height: 450px;">
-                                        <mat-card-content>
-
-                                            <span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
-                                            <div fxLayout="row" >
-                                                <div fxFlex="60" class="text-xs-left">
-
-                                                    <mat-list>
-
-                                                        <mat-radio-group formControlName="modelValue">
-
-                                                            <mat-list-item *ngFor="let option of optionsForm.controls.items.value">
-                                                                <mat-radio-button [value]="option.pd_answer_id">{{option.pd_answer}}</mat-radio-button>
-
-                                                            </mat-list-item>
-
-                                                        </mat-radio-group>
-
-                                                    </mat-list>
-
-                                                </div>
-                                                <div fxFlex="40" class="text-xs-right" *ngIf="optionsForm.controls.documents.length>0">
-
-                                                    <mat-card >
-                                                        <mat-card-content style="display: flex;
-                                                    overflow: auto;min-height: 200px; max-height: 240px;">
-                                                            <div fxLayout="row wrap">
-                                                                <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of optionsForm.controls.documents.value; let docIndex=index">
-                                                                    <div class="p-list-main mb-2">
-                                                                        <div class="p-list">
-
-                                                                            <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>{{docs.pd_document_title}}</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-
-                                                            </div>
-                                                        </mat-card-content>
-
-                                                    </mat-card>
-                                                </div>
-
-                                            </div>
-
-                                        </mat-card-content>
-                                        <mat-card-actions>
-                                            <div fxLayout="row" >
-                                                <div fxFlex="60" class="pb-0 text-sm-left">
-                                                    <mat-form-field appearance="outline" style="width: 100%">
-                                                        <mat-label>Remarks</mat-label>
-                                                        <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
-
-                                                    </mat-form-field>
-                                                </div>
-                                                <!-- this section for questions type options button actions -->
-                                                <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
-                                                    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                        <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                        <mat-button-toggle value="bold" matTooltip="Save&Next"  (click)="saveNextPrevious(optionsForm.controls,next)" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                    </mat-button-toggle-group>
-
-                                                </div>
-                                                <!-- end questions type options -->
-                                            </div>
-
-                                        </mat-card-actions>
-                                    </form>
-                                </mat-card-content>
-                                <ng-template #noanswers>
-                                    <mat-card-content>
-                                        <span class="mt-0">{{selectedCategory.question}}</span>
-
-                                    </mat-card-content>
-                                    <mat-card-actions>
-                                        <div fxLayout="row" >
-
-                                            <div fxFlex="100" class="pb-0 text-sm-right">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                </mat-button-toggle-group>
-
-                                            </div>
-                                        </div>
-
-                                    </mat-card-actions>
-                                </ng-template>
-
-
-                            </ng-container>
-                            <!-- end options type questions section -->
-                            <!-- start text box questions section -->
-                            <ng-container  *ngSwitchCase="2">
-
-                                <form [formGroup]="textBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
-                                    <mat-card-content>
-                                        <span class="mt-0">{{textBoxForm.controls.pd_question.value}}</span>
-                                        <div fxLayout="row" >
-                                            <div fxFlex="60" class="text-xs-left">
-
-                                                <mat-list [formArrayName]="'items'" style="padding-top:10%">
-                                                    <mat-list-item *ngFor="let control of textBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
-
-                                                        <mat-form-field appearance="outline" style="width: 100%">
-                                                            <mat-label>Answers</mat-label>
-                                                            <textarea matInput placeholder="Answers" formControlName="pd_answer"></textarea>
-
-                                                        </mat-form-field>
-                                                    </mat-list-item>
-
-                                                </mat-list>
-                                            </div>
-                                            <div fxFlex="40" class="text-xs-right" *ngIf="textBoxForm.controls.documents.length>0">
-
-                                                <mat-card >
-                                                    <mat-card-content style="display: flex;
-                                                    overflow: auto;min-height: 200px; max-height: 240px;">
-                                                        <div fxLayout="row wrap">
-
-                                                            <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
-                                                                <div class="p-list-main mb-2">
-                                                                    <div class="p-list">
-
-                                                                        <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
-                                                                        <div class="bottom">
-                                                                            <div class="left">
-                                                                                <div class="details">
-                                                                                    <small>{{docs.pd_document_title}}</small>
-                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                </div>
-                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-
-                                                        </div>
-                                                    </mat-card-content>
-
-                                                </mat-card>
-                                            </div>
-
-                                        </div>
-
-                                    </mat-card-content>
-                                    <mat-card-actions>
-                                        <div fxLayout="row" >
-                                            <div fxFlex="60" class="pb-0 text-sm-left">
-                                                <mat-form-field appearance="outline" style="width: 100%">
-                                                    <mat-label>Remarks</mat-label>
-                                                    <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
-
-                                                </mat-form-field>
-                                            </div>
-                                            <!-- this section for questions type options button actions -->
-                                            <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" matTooltipPosition="below" (click)="skipNextPrevious(previous)"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                </mat-button-toggle-group>
-
-                                            </div>
-                                            <!-- end questions type options -->
-                                        </div>
-
-                                    </mat-card-actions>
-                                </form>
-                                <ng-template #noanswers>
-                                    <mat-card-content>
-                                        <span class="mt-0">{{selectedCategory.question}}</span>
-
-                                    </mat-card-content>
-                                    <mat-card-actions>
-                                        <div fxLayout="row" >
-
-                                            <div fxFlex="100" class="pb-0 text-sm-right">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                </mat-button-toggle-group>
-
-                                            </div>
-                                        </div>
-
-                                    </mat-card-actions>
-                                </ng-template>
-                            </ng-container>
-                            <!-- end text box questions section -->
-                            <!-- start check box questions section -->
-                            <ng-container  *ngSwitchCase="3">
-
-                                <form [formGroup]="checkBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
-                                    <mat-card-content>
-                                        <span class="mt-0">{{checkBoxForm.controls.pd_question.value}}</span>
-                                        <div fxLayout="row" >
-                                            <div fxFlex="60" class="text-xs-left">
-
-                                                <mat-list [formArrayName]="'items'">
-                                                    <mat-list-item *ngFor="let control of checkBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
-
-                                                        <small><mat-checkbox class="example-margin" formControlName="checkbox" id="{{ control.controls.pd_answer_id.value }}"> {{ control.controls.pd_answer.value }}</mat-checkbox> </small>
-
-                                                    </mat-list-item>
-
-                                                </mat-list>
-                                            </div>
-                                            <div fxFlex="40" class="text-xs-right" *ngIf="checkBoxForm.controls.documents.length>0">
-
-                                                <mat-card >
-                                                    <mat-card-content style="display: flex;
-                                                    overflow: auto;min-height: 200px; max-height: 240px;">
-                                                        <div fxLayout="row wrap">
-                                                            <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
-                                                                <div class="p-list-main mb-2">
-                                                                    <div class="p-list">
-
-                                                                        <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
-                                                                        <div class="bottom">
-                                                                            <div class="left">
-                                                                                <div class="details">
-                                                                                    <small>{{docs.pd_document_title}}</small>
-                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                </div>
-                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-
-                                                        </div>
-                                                    </mat-card-content>
-
-                                                </mat-card>
-                                            </div>
-
-                                        </div>
-
-                                    </mat-card-content>
-                                    <mat-card-actions *ngIf="checkBoxForm.controls.items.length > 0">
-                                        <div fxLayout="row" >
-                                            <div fxFlex="60" class="pb-0 text-sm-left">
-                                                <mat-form-field appearance="outline" style="width: 100%">
-                                                    <mat-label>Remarks</mat-label>
-                                                    <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
-
-                                                </mat-form-field>
-                                            </div>
-                                            <!-- this section for questions type options button actions -->
-                                            <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                </mat-button-toggle-group>
-
-                                            </div>
-                                            <!-- end questions type options -->
-                                        </div>
-
-                                    </mat-card-actions>
-                                </form>
-                                <ng-template #noanswers>
-                                    <mat-card-content>
-                                        <span class="mt-0">{{selectedCategory.question}}</span>
-
-                                    </mat-card-content>
-                                    <mat-card-actions>
-                                        <div fxLayout="row" >
-
-                                            <div fxFlex="100" class="pb-0 text-sm-right">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
-                                                </mat-button-toggle-group>
-
-                                            </div>
-                                        </div>
-
-                                    </mat-card-actions>
-                                </ng-template>
-                            </ng-container>
-
-                        </ng-container>
-                    </div>
-                    <!-- end check box questions section -->
-
-                    <!-- start forms based questions -->
-                    <div *ngIf="formsCategoryEnable">
-                        <ng-container [ngSwitch]="selectedFormsCategory.form_id">
-                            <!-- start supplier type questions section -->
-                            <ng-container  *ngSwitchCase="1">
-                                <app-supplier-info [pdid]="startPD"></app-supplier-info>
-                            </ng-container>
-                            <!-- end supplier type questions -->
-
-                            <!-- start client type questions -->
-                            <ng-container  *ngSwitchCase="2">
-                                <app-client-info [pdid]="startPD"></app-client-info>
-                            </ng-container>
-                            <!-- end client type questions -->
-
-                            <!-- start personal type questions -->
-                            <ng-container *ngSwitchCase="3">
-                                <app-personal-info [pdid]="startPD" [pd_all_details]="pdFullDetails"></app-personal-info>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="4">
-                                <app-assets-info [pdid]="startPD"></app-assets-info>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="5">
-                                <app-address [pdid]="startPD"></app-address>
-                                <!-- end personal type questions -->
-                            </ng-container>
-                            <ng-container *ngSwitchCase="6">
-                                <app-family-details [pdid]="startPD"></app-family-details>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="7">
-                                <!--<p>Banking details</p>-->
-                             <app-banking-details [pdid]="startPD" [pd_all_details]="pdFullDetails" ></app-banking-details>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="8">
-                                <app-current-loan [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-current-loan>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="9">
-                                <app-other-income [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-other-income>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="10">
-                                <app-loan-details [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-loan-details>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="11">
-                                <app-stock [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-stock>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="12">
-                                <app-employment-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [pd_all_details]="pdFullDetails"></app-employment-info>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="13">
-                                <app-business-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-business-info>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="14">
-                                <app-financial-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-financial-info>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="15">
-                           <app-lender-representative [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-lender-representative>
-                        </ng-container>
-                        <ng-container *ngSwitchCase="16">
-                                <app-assessed-income [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-assessed-income>
-                             </ng-container>
-                            <ng-container *ngSwitchCase="17">
-                                <app-rental-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-rental-info>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-
-                    <!-- end form based questions -->
-
-                </figure>
-                                <!--</ng-container>-->
-                                <!--&lt;!&ndash; end supplier type questions &ndash;&gt;-->
-
-                                <!--&lt;!&ndash; start client type questions &ndash;&gt;-->
-                                <!--<ng-container  *ngSwitchCase="2">-->
-                                      <!--<app-client-info [pdid]="startPD"></app-client-info>-->
-                                        <!--</ng-container>-->
-                                <!--&lt;!&ndash; end client type questions &ndash;&gt;-->
-
-                                <!--&lt;!&ndash; start personal type questions &ndash;&gt;-->
-                                <!--<ng-container *ngSwitchCase="3">-->
-                                        <!--<app-personal-info [pdid]="startPD" [pd_all_details]="pdFullDetails"></app-personal-info>-->
-                                        <!--</ng-container>-->
-                                <!--<ng-container *ngSwitchCase="4">-->
-                                    <!--<app-assets-info [pdid]="startPD"></app-assets-info>-->
-                                <!--</ng-container>-->
-                                <!--&lt;!&ndash; end personal type questions -->
-                                <!--&ndash;&gt;-->
-                                <!--</ng-container>-->
-                                <!--</div>-->
-                      <!-- end form based questions -->
-                   
-                  <!--</figure>-->
-            </div>
-        </mat-sidenav-container>
-
+        <div fxLayout="row wrap" class="child_mat_card">
+        <mat-card fxFlex.xs="90" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23" fxFlex.xl="23" *ngFor="let formButton of categoryFormButtons;let quesIndex=index" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}" (click)="OnSelectDirectForms(formButton)">
+            <mat-card-header>
+                <mat-card-title>{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</mat-card-title>
+                <!-- <mat-card-subtitle>Karthi Kms</mat-card-subtitle> -->
+            </mat-card-header>
+        </mat-card>                                                                                                                                          
+    </div>
     </mat-card-content>
+    <!-- <mat-card-actions align="end">
+            <button _ngcontent-c21="" matTooltip="Complete Question" matTooltipPosition="above" [disabled]="actualQuestions!=answeredQuestions" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(pdStatusCheck.COMPLETED);" style="margin-top:10px;"><span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span></button>
+    </mat-card-actions> -->
 </mat-card>
-
-<notifier-container></notifier-container>
-
-
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
index 0d116af22..1c43c6bb5 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
@@ -1,137 +1,58 @@
-@import "./../../../../../assets/styles/scss/components/messages";
-:host {
-  margin-left: -5px;
-  margin-right: -5px;
-  margin-top: -5px;
-  display: block;
-}
-:host /deep/ {
-    mat-sidenav {
-        width: 250px;
-    }
-    .mat-sidenav-content {
-        padding: 0;
-        
-    }
-    @media (min-width: 959px) {
-        .mat-sidenav-side {
-            background-color: transparent;
-            box-shadow: none!important;
-        }
-        
+// .child_mat_card mat-card {
+//      margin: 2 0%;
+// }
+mat-card.parent_mat_card > {
+    mat-card-header {
+        display: flex;
+        flex-direction: column;
+    }  
+    mat-card-content {
+        min-height:auto;
+        max-height:52vh;
+        overflow:auto;  
     }
+    // @media only screen and (max-width:319px)  { 
+    //     mat-card-content {
+    //         max-height: 350px;
+    //         overflow: auto;
+    //     }
+    // }
+    // @media only screen and (min-width:320px) and (max-width:767px)  { 
+    //     mat-card-content {
+    //         max-height: 350px;
+    //         overflow: auto;
+    //     }
+    // }
+    // @media only screen and (min-width:768px) and (max-width:1023px)  { 
+    //     mat-card-content {
+    //         max-height: 350px;
+    //         overflow: auto;
+    //     }
+    //  }
+    // @media only screen and (min-width:1024px) and (max-width:1899px) { 
+    //     mat-card-content {
+    //         max-height: 400px;
+    //         overflow: auto;
+    //     }
+    //  }
+    // @media only screen and (min-width:1900px) { 
+    //     mat-card-content {
+    //         max-height: 500px;
+    //         overflow: auto;
+    //     }
+    //  }
 }
-
-.mat-expansion-panel-header-description {
-    color: rgba(0, 0, 0, 87);
-}
-.mat-card-content {
-  background-color: white;
-}
-.mat-card-actions {
-  background-color: white;
-}
-
-.text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.custm-list-item {
-  cursor: pointer;
-}
-
-
 $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
-$product-bg-color-hover: rgba(103, 58, 183, 0.7);
-.p-list-main {
-    background: white;
-    margin: auto;
-    position: relative;
-    overflow: hidden !important;
-    border-radius: 10px 10px 10px 10px;
-    box-shadow: $base-card-box-shadow;
-    transform: scale(0.95);
-    transition: box-shadow 0.5s, transform 0.5s;
+mat-card .child_mat_card > mat-card {
+     border-radius: 0px 0px 0px 15px;
+     box-shadow: $base-card-box-shadow;
+     transform: scale(0.95);
+     transition: box-shadow 0.5s, transform 0.5s;
     &:hover {
+        cursor: pointer;
+        background-color: #e00201 !important;
         transform: scale(1);
         box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
     }
-    .p-list {
-        position: relative;
-        .top {
-            height: 100%;
-            width: 100%;
-            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
-            -webkit-background-size: 100%;
-            -moz-background-size: 100%;
-            -o-background-size: 100%;
-            background-size: 100%;
-        }
-        .bottom {
-            width: 200%;
-            height: 15%;
-            transition: transform 0.5s;
-            h1 {
-                margin: 0;
-                padding: 0;
-            }
-            p {
-                margin: 0;
-                padding: 0;
-            }
-            .left {
-                height: 100%;
-                width: 50%;
-                background: #f4f4f4;
-                position: relative;
-                float: left;
-                .details {
-                    padding: 5px;
-                    float: left;
-                    // width: calc(70% - 40px);
-                }
-               
-            }
-            .right {
-                width: 50%;
-                background: #A6CDDE;
-                color: white;
-                float: right;
-                height: 200%;
-                overflow: hidden;
-                .details {
-                    padding: 20px;
-                    float: right;
-                    width: calc(70% - 40px);
-                }
-               
-             
-            }
-        }
+       
     }
-   
-}
-mat-icon{
-    color: #ff3636;
-}
-.address {
-    display: flex;
-    padding: 0 2%;
-    flex-direction: column;
-}
-
-.address > * {
-    width: 100%;
-}
-.matcard mat-form-field {
-  margin: 0 2%;
-}
-.address .button {
-    float: right;
-    width: 10px;
-    background: #62B013;
-    color: white;
-}
-
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
index 4e186d96a..65b8f1588 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
@@ -1,10 +1,29 @@
 import {Component, ViewChild, OnInit, ViewEncapsulation, OnDestroy} from '@angular/core';
 import {FormBuilder, FormGroup, Validators, FormControl, FormArray, AbstractControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
+import {MatDialog } from '@angular/material';
 import {NotifierService} from 'angular-notifier';
 import {ListPdComponent} from './../list-pd.component';
 import {PdTrigerService} from '../../../pd-service/pd-triger.service';
 
+import {PersonalInfoComponent} from './forms/personal-info/personal-info.component';
+import {AddressComponent } from './forms/address/address.component';
+import {OtherIncomeComponent} from './forms/other-income/other-income.component';
+import {SupplierInfoComponent} from './forms/supplier-info/supplier-info.component';
+import {ClientInfoComponent} from './forms/client-info/client-info.component';
+import {FamilyDetailsComponent} from './forms/family-details/family-details.component';
+import {EmploymentInfoComponent} from './forms/employment-info/employment-info.component';
+import {StockComponent} from './forms/stock/stock.component';
+import {CurrentLoanComponent} from './forms/current-loan/current-loan.component';
+import {FinancialInfoComponent} from './forms/financial-info/financial-info.component';
+import {AssetsInfoComponent} from './forms/assets-info/assets-info.component';
+import {RentalInfoComponent} from './forms/rental-info/rental-info.component';
+import {AssessedIncomeComponent} from './forms/assessed-income/assessed-income.component';
+import {BankingDetailsComponent} from './forms/banking-details/banking-details.component';
+import {BusinessInfoComponent} from './forms/business-info/business-info.component';
+import {LenderRepresentativeComponent} from './forms/lender-representative/lender-representative.component';
+import {LoanDetailsComponent} from './forms/loan-details/loan-details.component';
+
 @Component({
     selector: 'app-start-pd',
     templateUrl: './start-pd.component.html',
@@ -177,7 +196,7 @@ pdFullDetails:any=[];
     private notifier: NotifierService;
 
 
-    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+    constructor(notifier: NotifierService, private dialog: MatDialog, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
                 private listPDComponent: ListPdComponent, private _pd: PdTrigerService,) {
         this.startPD = this.route.snapshot.params['pdid'];
@@ -295,9 +314,7 @@ pdFullDetails:any=[];
             this.pdMasterList=data.records.pdmaster_details;
             this.categoryList=data.records.question_answers;
             this.categoryFormButtons = data.records.template_forms;
-            console.log('formButtons', this.categoryFormButtons);
             let filterApplicantName= data.records.pdapplicants_detials.filter(item => item.applicant_type == 1);
-            console.log(filterApplicantName);
             this.mainApplicantName = filterApplicantName[0].applicant_name;
             this.currentPDStatus = data.records.pdmaster_details.pd_status;
 
@@ -626,10 +643,235 @@ pdFullDetails:any=[];
     // start
      // direct form based questions
     OnSelectDirectForms(details: any) {
-        this.formsCategoryEnable = true;
-        this.selectedFormsCategory = details;
-        console.log('select..', this.selectedFormsCategory);
-
+        // this.formsCategoryEnable = true;
+         this.selectedFormsCategory = details;
+         
+         if(this.selectedFormsCategory.form_id==1){
+            const dialogRef = this.dialog.open(SupplierInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==2){
+            const dialogRef = this.dialog.open(ClientInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==3){
+            const dialogRef = this.dialog.open(PersonalInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==4){
+            const dialogRef = this.dialog.open(AssetsInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==5){
+            const dialogRef = this.dialog.open(AddressComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==6){
+            const dialogRef = this.dialog.open(FamilyDetailsComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==7){
+            const dialogRef = this.dialog.open(BankingDetailsComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }
+        else
+        if(this.selectedFormsCategory.form_id==8){
+            const dialogRef = this.dialog.open(CurrentLoanComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }
+        else
+        if(this.selectedFormsCategory.form_id==9){
+            const dialogRef = this.dialog.open(OtherIncomeComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==10){
+            const dialogRef = this.dialog.open(LoanDetailsComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==11){
+            const dialogRef = this.dialog.open(StockComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==12){
+            const dialogRef = this.dialog.open(EmploymentInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==13){
+            const dialogRef = this.dialog.open(BusinessInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==14){
+            const dialogRef = this.dialog.open(FinancialInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==15){
+            const dialogRef = this.dialog.open(LenderRepresentativeComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }
+        else
+        if(this.selectedFormsCategory.form_id==16){
+            const dialogRef = this.dialog.open(AssessedIncomeComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }else
+        if(this.selectedFormsCategory.form_id==17){
+            const dialogRef = this.dialog.open(RentalInfoComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              dialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
+        }
+       
+        
     }
 
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts b/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
index 432694b66..7d45fdff0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
@@ -175,7 +175,8 @@ const pdCustomNotifierOptions: NotifierOptions = {
   // declarations: [ListPdComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, AssetsInfoComponent],
   exports: [PdAllocationComponent, SmartPdAllocationComponent, TelePdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, AllocationViewMoreComponent],
   providers: [PdTrigerService, GetGeometricLocationService],
-  entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent]
+  entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,
+     ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent],
 })
 export class ManagePdModule {
 }