diff --git a/ng6-seed/src/app/layouts/admin/admin-layout.component.html b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
index 0fb390162..b367c8c37 100755
--- a/ng6-seed/src/app/layouts/admin/admin-layout.component.html
+++ b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
@@ -4,10 +4,12 @@
      <div class="opt-side relative ">
         <div class="sidebar-container ">
            <div class="branding text-center">
-              <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
-              </h2> --> 
+              <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMAm</span>
+              </h2> 
               <h2><img [src]="'http://ssa.sineedge.com/sparqapi/logo/sine_edge_icon.png'" style="height: 50px;;"> <span> {{userDep}} </span>
-              </h2>
+              </h2>  -->
+              <h2><img src="assets/images/PD.jpeg"  style="height: 50px;;"> <span> {{userDep}} </span>
+              </h2> 
            </div>
            <div class="main-nav">
               <div class="user-pro-wrap">
@@ -101,9 +103,11 @@
                  </h2> -->
                  <!--<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
                  </h2>-->
-                   <a (click)="menunav('HOME')">
-                <img [routerLink]="['/dashboard']" [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 35px;;"> <span> {{userDep}} </span>
-             </a> 
+                  <a (click)="menunav('HOME')">
+                   <!-- <img [routerLink]="['/dashboard']" [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 35px;;"> <span> {{userDep}} </span> -->
+                   <img [routerLink]="['/dashboard']" src="assets/images/PD.jpeg" style="height: 35px;;"> <span> {{userDep}} </span>
+                   
+                </a> 
               </div>
            </div>
            </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.ts
index bc910a016..049222c85 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.ts
@@ -194,12 +194,14 @@ export class AllPdComponent implements OnInit, OnChanges {
         if(res['dataStatus']==true)
         {
             this.dataSourceTab1.data = res['records'];   
-            // console.log('res[records]',res['records']);
+            console.log('records',res['records']);
             this.dataSourceTab1.paginator = this.paginator;
         }else{
            this.notifier.notify('warning', 'No Records Found !');
+           this.dataSourceTab1.paginator['length'] = 0;
+           this.dataSourceTab1.paginator['pageIndex'] = 0;
            this.dataSourceTab1.data = [];           
-           this.dataSourceTab1.paginator = null;
+           console.log('records-records',res['records']);
         }
       },error => {
         this.errorMessage.push(error);
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html
index 96b207760..4342e3a12 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html
@@ -1,6 +1,6 @@
 <mat-card-content>
 
-        <mat-expansion-panel>
+        <mat-expansion-panel  [(expanded)]="xpandStatus">
                 <mat-expansion-panel-header>
                   <mat-panel-title class="text-xs-left">
                    <!-- <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6> -->
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.ts
index 80beed35b..93d5948c3 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.ts
@@ -20,17 +20,14 @@ export class CompletedPdComponent implements OnInit, OnChanges {
   ENTITY: any[]=[];
   PDType: any[]=[];
   pdStatus: any[]=[];
+  searchForm:FormGroup;
+  pipe = new DatePipe('en-US');  
+  private notifier: NotifierService;
   recordStatus: boolean;
   errorMessage:any[]=[];
   tabStatus:string="COMPLETED";
-  pipe = new DatePipe('en-US');  
-  todaydate:Date = new Date();
-  private notifier: NotifierService;
   public dataLengthTab4: number;
   public dataSourceTab4 = new MatTableDataSource();
-  tempStore = new MatTableDataSource();
-
-  searchForm:FormGroup;
   
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
@@ -48,6 +45,7 @@ export class CompletedPdComponent implements OnInit, OnChanges {
   pageIndex = 0;
   pageSize = 10;
   pageEvent: PageEvent;
+  todaydate:Date = new Date();
 
   constructor(private _pd: PdTrigerService,public _fb:FormBuilder,notifier: NotifierService,) { 
     this.notifier = notifier;
@@ -76,8 +74,9 @@ export class CompletedPdComponent implements OnInit, OnChanges {
 
   // get changes for filter from parent componnet filter
   ngOnChanges(changes: SimpleChanges) {
-    let filteredText = changes.bindFilterValue.currentValue;
-    filteredText = filteredText ? filteredText.trim() : filteredText;
+    // let filteredText = changes.bindFilterValue.currentValue;
+    let filteredText = changes.bindFilterValue.currentValue ? changes.bindFilterValue.currentValue.trim() : changes.bindFilterValue.currentValue;
+    // filteredText = filteredText ? filteredText.trim() : filteredText;
     filteredText = filteredText ? filteredText.toLowerCase() : filteredText;
     this.dataSourceTab4.filter = filteredText;
 } 
@@ -92,7 +91,6 @@ export class CompletedPdComponent implements OnInit, OnChanges {
             this.completedPdListData = data.records;
             this.dataLengthTab4 = data.records.length;
             this.dataSourceTab4.data = this.completedPdListData;
-            this.tempStore.data
           }
           else{
             this.completedPdListData=[];
@@ -103,6 +101,7 @@ export class CompletedPdComponent implements OnInit, OnChanges {
         // , error => this.errorMessage = <any> error);
         ,error => {
           this.errorMessage.push(error);
+          this.notifier.notify('warning', 'Something Wents Wrong Try Again.!' + '-' + error.error_text + ' occur');
           alert(error.html_format);
         });
   }
@@ -207,10 +206,13 @@ export class CompletedPdComponent implements OnInit, OnChanges {
         if(res['dataStatus']==true)
         {
             this.dataSourceTab4 = res['records'];
+            this.dataSourceTab4.paginator = this.paginator;
         }else{
           this.notifier.notify('warning', 'No Records Found !');
+          
+          this.dataSourceTab4.paginator['length'] = 0;
+          this.dataSourceTab4.paginator['pageIndex'] = 0;
           this.dataSourceTab4.data = [];           
-          this.dataSourceTab4.paginator = null;
        }
      },error => {
        this.errorMessage.push(error);
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.ts
index fa03c54e9..dfd27ad49 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.ts
@@ -26,7 +26,7 @@ export class InprogressPdComponent implements OnInit, OnChanges {
   private notifier: NotifierService;
   public dataLengthTab2: number;
   public dataSourceTab2 = new MatTableDataSource();
-  tempStore = new MatTableDataSource();
+  
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -70,8 +70,9 @@ export class InprogressPdComponent implements OnInit, OnChanges {
 
   // get changes for filter from parent componnet filter
   ngOnChanges(changes: SimpleChanges) {
-    let filteredText = changes.bindFilterValue.currentValue;
-    filteredText = filteredText ? filteredText.trim() : filteredText;
+    // let filteredText = changes.bindFilterValue.currentValue;
+    // filteredText = filteredText ? filteredText.trim() : filteredText;
+    let filteredText = changes.bindFilterValue.currentValue ? changes.bindFilterValue.currentValue.trim() : changes.bindFilterValue.currentValue;
     filteredText = filteredText ? filteredText.toLowerCase() : filteredText;
     this.dataSourceTab2.filter = filteredText;
 } 
@@ -86,13 +87,11 @@ export class InprogressPdComponent implements OnInit, OnChanges {
             this.progressPdListData = data.records;
             this.dataLengthTab2 = data.records.length;
             this.dataSourceTab2.data = this.progressPdListData;
-            this.tempStore.data = this.progressPdListData; 
-          
-        }else{
-          this.notifier.notify('warning', 'No Records Found !');
-          this.dataSourceTab2.data = [];           
-          this.dataSourceTab2.paginator = null;
-       }
+          }else{
+            this.progressPdListData =[];
+            this.dataSourceTab2 = null;
+            this.recordStatus=true;
+          }
      },error => {
        this.errorMessage.push(error);
        this.notifier.notify('warning', 'Something Went Wrong Try Again.!' + '-' + error.error_text + ' occur');
@@ -200,8 +199,9 @@ export class InprogressPdComponent implements OnInit, OnChanges {
             this.dataSourceTab2.paginator = this.paginator;
         }else{
           this.notifier.notify('warning', 'No Records Found !');
-          this.dataSourceTab2.data = [];           
-          this.dataSourceTab2.paginator = null;
+          this.dataSourceTab2.paginator['length'] = 0;
+           this.dataSourceTab2.paginator['pageIndex'] = 0;
+           this.dataSourceTab2.data = [];           
        }
      },error => {
        this.errorMessage.push(error);
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-status-change-dialogue/pd-status-change-dialogue.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-status-change-dialogue/pd-status-change-dialogue.component.html
index 59ff13a8b..b458693ba 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-status-change-dialogue/pd-status-change-dialogue.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-status-change-dialogue/pd-status-change-dialogue.component.html
@@ -13,7 +13,7 @@
           </span>
           <span *ngIf="Loading">
               <div fxLayoutAlign="center">
-                <mat-progress-spinner mode="indeterminate">Loading ... </mat-progress-spinner>
+                <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
               </div>
           </span>
         </span>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.ts
index e718e85b5..9e83f3040 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.ts
@@ -27,7 +27,6 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
   todaydate:Date = new Date();
   public dataLengthTab5: number;
   public dataSourceTab5 = new MatTableDataSource();
-  tempStore = new MatTableDataSource();
   searchForm: FormGroup;
   displayedColumns = ['PDType', 'Name', 'Lenderid', 'Address', 'Status', 'Action'];
   private notifier: NotifierService;
@@ -40,7 +39,7 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
 
   // data source variable details
   qcCompletedPdListData: any[] = [];
-
+  
   // pagination variable details
   length = 5;
   pageIndex = 0;
@@ -94,7 +93,6 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
             this.qcCompletedPdListData = data.records;
             this.dataLengthTab5 = data.records.length;
             this.dataSourceTab5.data = this.qcCompletedPdListData;
-            this.tempStore.data = this.qcCompletedPdListData;
           }
           else {
             this.qcCompletedPdListData = [];
@@ -105,6 +103,7 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
         // , error => this.errorMessage = <any>error);
         ,error => {
           this.errorMessage.push(error);
+          this.notifier.notify('warning', 'Something Wents Wrong Try Again.!' + '-' + error.error_text + ' occur');
           alert(error.html_format);
         });
   }
@@ -189,8 +188,9 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
         this.dataSourceTab5.paginator = this.paginator;
       }else{
           this.notifier.notify('warning', 'No Records Found !');
+          this.dataSourceTab5.paginator['length'] = 0;
+          this.dataSourceTab5.paginator['pageIndex'] = 0;
           this.dataSourceTab5.data = [];           
-          this.dataSourceTab5.paginator = null;
        }
      },error => {
        this.errorMessage.push(error);
@@ -204,8 +204,4 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
     this.loadPDDetails();
     this.xpandStatus = false;
   }
-
 }
-
-
-
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.ts
index 5bb90b5de..9fa6b5e76 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.ts
@@ -28,7 +28,6 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
   public dataSourceTab3 = new MatTableDataSource();
   private notifier: NotifierService;
   
-  tempStore = new MatTableDataSource();
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -76,8 +75,9 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
 
   // get changes for filter from parent componnet filter
   ngOnChanges(changes: SimpleChanges) {
-    let filteredText = changes.bindFilterValue.currentValue;
-    filteredText = filteredText ? filteredText.trim() : filteredText;
+    // let filteredText = changes.bindFilterValue.currentValue;
+    // filteredText = filteredText ? filteredText.trim() : filteredText;
+    let filteredText = changes.bindFilterValue.currentValue ? changes.bindFilterValue.currentValue.trim() : changes.bindFilterValue.currentValue;
     filteredText = filteredText ? filteredText.toLowerCase() : filteredText;
     this.dataSourceTab3.filter = filteredText;
 } 
@@ -92,8 +92,6 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
             this.scheduledPdListData = data.records;
             this.dataLengthTab3 = data.records.length;
             this.dataSourceTab3.data = this.scheduledPdListData;
-            this.tempStore.data = this.scheduledPdListData
-            
           }
           else{
             this.scheduledPdListData=[];
@@ -206,8 +204,9 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
             this.dataSourceTab3.paginator = this.paginator;
         }else{
           this.notifier.notify('warning', 'No Records Found !');
+          this.dataSourceTab3.paginator['length'] = 0;
+          this.dataSourceTab3.paginator['pageIndex'] = 0;
           this.dataSourceTab3.data = [];           
-          this.dataSourceTab3.paginator = null;
        }
      },error => {
        this.errorMessage.push(error);
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 12e70eb7b..65753b607 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
@@ -351,15 +351,18 @@
                                 <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
                                     <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
                                         <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"
-                                                    style="width: 100%;height: 100%;">
+                                            <div class="top"> 
+                                                            <!-- Thumbnail-->
+                                                            <div class="thumbnail">
+                                                                <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                matTooltipPosition="right">
+                                                                                <mat-icon>edit</mat-icon>
+                                                                </button>
+                                                                <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                            </div>
                                                 <label *ngIf="doc.document_title != ''"
                                                     style="font-size: 0.85rem">{{doc.document_title}}</label></div>
-                                            <button mat-button color="accent" (click)="imageCrop(doc)"
-                                                class="mr-1 mb-1 hover-icon" matTooltip="Edit"
-                                                matTooltipPosition="above" style=" text-align: center;">
-                                                <mat-icon>edit</mat-icon>
-                                            </button>
+                                            
                                         </div>
                                     </div>
                                 </div>
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 f4b60c55c..e3b05bc75 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
@@ -107,4 +107,10 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
 //   width: 10px;
 //   background: #62B013;
 //   color: white;
-// }
\ No newline at end of file
+// }
+
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
\ 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 95369ac7e..85f6d15a9 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
@@ -106,6 +106,7 @@ export class AddressComponent implements OnInit {
         params.pd_id = this.pdid;
         params.pd_form_id = '5';
         this.setAddressFromDatas(params);
+        this.retriveFile();
     }
 
     loadPDAddressesDetails() {
@@ -603,12 +604,16 @@ export class AddressComponent implements OnInit {
 
     imageCrop(pic) {
         // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
         const imageRef = this.dialog.open(ImageCropComponent, {
             data: pic,
         });
         imageRef.afterClosed()
             .subscribe(dataresult => {
-                console.log(dataresult);
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
             });
     }
 
@@ -773,18 +778,23 @@ export class AddressComponent implements OnInit {
             // else {
             //     control.push(this.createAddresses(null));
             // }
-        });
+        });        
+    }
 
+    retriveFile(){
         this._pd.retriveFile(this.pdid, '5', null).subscribe(data => {
+            console.log('',data);
             if (data.status == 200) {
                 if (data.records.length > 0) {
                     data.records.forEach((val, index) => {
                         let splitted = val.pd_document_name.split(".");
                         let DocumentsAndFiles = {
+                            'document_id':val.pd_document_id,
                             'document_name': val.pd_document_name,
                             'document_title': val.pd_document_title,
                             'document': val.doc_url,
-                            'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image'
+                            'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                            'is_show_report':val.is_show_report
                         }
                         this.documentsAndFilesList.push(DocumentsAndFiles);
                     });
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 73d1418f8..a426a5610 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
@@ -111,7 +111,7 @@
                                     </ng-template>
                               </mat-tab>-->
                                   <mat-tab label="Docs">
-                                        <ng-template matTabContent>
+                                        <!-- <ng-template matTabContent>
                                             <div ngxViewer>
                                                    <div fxLayout="row wrap" style="padding:20px;">
                                               <div fxFlex="100">
@@ -204,8 +204,57 @@
                                               </div>                                 
                                             </div>    
                                             </div>                                            
-                                               </ng-template>
-                                      </mat-tab>
+                                               </ng-template> -->
+                                               <ng-template matTabContent>
+                                                    <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                                                        <div fxLayout="row wrap" style="padding:20px;">
+                                                            <div fxFlex="100">
+                                                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                                                    <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                                                        <div class="p-list">
+                                                                            <div class="top"> 
+                                                                                            <!-- Thumbnail-->
+                                                                                            <div class="thumbnail">
+                                                                                                <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                                                matTooltipPosition="right">
+                                                                                                                <mat-icon>edit</mat-icon>
+                                                                                                </button>
+                                                                                                <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                                            </div>
+                                                                                <label *ngIf="doc.document_title != ''"
+                                                                                    style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                                            
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div fxFlex="row">
+                                                                <div fxFlex="100" class="m-gap p-gap">
+                                                                    <div fxLayout="row" fxLayoutWrap="wrap">
+                                                                        <div *ngFor="let doc of documentsAndFilesList">
+                                                                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                                                fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                                                *ngIf="doc.document_type == 'pdf';">
+                                                                                <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                                                <mat-icon
+                                                                                    style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                                                    (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                                                <span class="d-block">{{doc.document_title}}</span>
+                                                                                <!-- </a> -->
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <ng-template #noFiles>
+                                                        <mat-card-content>
+                                                            <p style="margin: 20px;">No Files</p>
+                                                        </mat-card-content>
+                                                    </ng-template>
+                                                </ng-template>
+                                            </mat-tab>
                   </mat-tab-group>
             <!-- end assessed income tabs control -->
         
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 331460801..1ed1b32e2 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
@@ -172,4 +172,8 @@
   // }
 
 
-  
\ No newline at end of file
+  .top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
\ 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.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts
index 69b552d4c..1f3c8ca3f 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
@@ -6,6 +6,7 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
 import { ConfirmAiDetailsComponent } from "./confirm-ai-details/confirm-ai-details.component";
 import { RupeeCurrencyFormatPipe } from './../../../../../pd-pipes/rupee-currency-format.pipe';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-assessed-income',
@@ -57,6 +58,7 @@ public salesDeclaredCustomer: any=[];
 public getCustomValues:any = { UOMList: this.UOMList,frequencyList: this.frequencyList,businessExpenseList: this.businessExpenseList,businessIncomeList:this.businessIncomeList,pdid:'',company_id:'',grossProfitTypeList:this.grossProfitTypeList,salesDeclaredCustomer:this.salesDeclaredCustomer};
 DailyPurchaseComponent:boolean;
 PurchaseComponent:boolean;
+  documentsAndFilesList: any;
 //public finalData: any;
   constructor(notifier: NotifierService, private route: ActivatedRoute,
     private router: Router,
@@ -382,4 +384,45 @@ public viewerOptions: any = {
       });
 
   }
+
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+  }
+
+  retriveFile(){
+
+    this._pd.retriveFile(this.pdid, '16', this.company_id).subscribe(data => {
+
+        if (data.status == 200) {
+            if (data.records.length > 0) {
+                data.records.forEach((val, index) => {
+                    let splitted = val.pd_document_name.split(".");
+                    let DocumentsAndFiles = {
+                        'document_id':val.pd_document_id,
+                        'document_name': val.pd_document_name,
+                        'document_title': val.pd_document_title,
+                        'document': val.doc_url,
+                        'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                        'is_show_report':val.is_show_report
+                    }
+                    this.documentsAndFilesList.push(DocumentsAndFiles);
+                });
+            }
+        }
+        else {
+            this.documentsAndFilesList = [];
+        }
+    });
+}
 }
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 b7aeee00b..e93e236df 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
@@ -430,40 +430,53 @@
       </mat-tab>
       <mat-tab label="Docs">
           <ng-template matTabContent>
-            <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-              <div fxLayout="row wrap" style="padding:20px;">
-                  <div fxFlex="100">
-                      <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                          <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                              <div class="p-list">
-                                  <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}" style="width: 100%;height: 100%;">
-                                    <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+              <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                  <div fxLayout="row wrap" style="padding:20px;">
+                      <div fxFlex="100">
+                          <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                              <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                  <div class="p-list">
+                                      <div class="top"> 
+                                                      <!-- Thumbnail-->
+                                                      <div class="thumbnail">
+                                                          <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                          matTooltipPosition="right">
+                                                                          <mat-icon>edit</mat-icon>
+                                                          </button>
+                                                          <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                      </div>
+                                          <label *ngIf="doc.document_title != ''"
+                                              style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                      
+                                  </div>
                               </div>
                           </div>
                       </div>
-                  </div>
-                  <div fxFlex="row">
-                      <div fxFlex="100" class="m-gap p-gap">
-                          <div fxLayout="row" fxLayoutWrap="wrap">
-                              <div *ngFor="let doc of documentsAndFilesList">
-                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                  fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                  <!-- <a href="http://www.google.com" target="_blank"> -->
-                                      <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                      <span class="d-block">{{doc.document_title}}</span>
-                                  <!-- </a> -->
-                              </div>
+                      <div fxFlex="row">
+                          <div fxFlex="100" class="m-gap p-gap">
+                              <div fxLayout="row" fxLayoutWrap="wrap">
+                                  <div *ngFor="let doc of documentsAndFilesList">
+                                      <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                          fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                          *ngIf="doc.document_type == 'pdf';">
+                                          <!-- <a href="http://www.google.com" target="_blank"> -->
+                                          <mat-icon
+                                              style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                              (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                          <span class="d-block">{{doc.document_title}}</span>
+                                          <!-- </a> -->
+                                      </div>
+                                  </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
-            </div>
               <ng-template #noFiles>
-                      <mat-card-content>
-                        <p style="margin: 20px;">No Files</p>
-                      </mat-card-content>
-              </ng-template> 
+                  <mat-card-content>
+                      <p style="margin: 20px;">No Files</p>
+                  </mat-card-content>
+              </ng-template>
           </ng-template>
   </mat-tab>
     </mat-tab-group>
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 0f22c49b9..f7000adb6 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
@@ -14,6 +14,12 @@
      ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
+
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
   
     mat-form-field {
       margin: 0 2%;
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 5156b9bc4..fcc3a03a6 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
@@ -24,6 +24,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { element } from '@angular/core/src/render3/instructions';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 @Component({
   selector: 'app-assets-info',
   templateUrl: './assets-info.component.html',
@@ -73,6 +74,7 @@ export class AssetsInfoComponent implements OnInit {
     notifier: NotifierService,
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
+    private dialog: MatDialog,
     private dialogRef: MatDialogRef<AssetsInfoComponent>,
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
@@ -147,26 +149,7 @@ export class AssetsInfoComponent implements OnInit {
     this.getM_Vehicle_Type();
     this.getM_UOM_Type();
 
-    this.pdTrigerService.retriveFile(this.pdid,'4',null).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
-
+    this.retriveFile();
   }
   pdf(fileURL){
     window.open(fileURL);
@@ -988,11 +971,50 @@ export class AssetsInfoComponent implements OnInit {
         }
     });
   }
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+    this.pdTrigerService.retriveFile(this.pdid,'4',null).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
 
 }
 
 
 
+
+
 // {id: "4", name: "Equipments and machinaries", isactive: "1", flag: "1", is_others: "0"}
 
 // {id: "7", name: "Investments", isactive: "1", flag: "0", is_others: "0"}
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 4ec73f682..1a8e552a8 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
@@ -220,42 +220,55 @@
             </mat-tab>
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
 
         </mat-tab-group>
     </mat-dialog-content>
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 5570024d9..7b44ae4b0 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
@@ -11,7 +11,11 @@
 .mat-form-field-appearance-legacy .mat-hint{
   color:rgba(0, 0, 0, 0.8) !important;
 }
-
+.top .thumbnail .date {
+  position: absolute;
+  top: 4px;
+  right: -10px;
+}
   ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
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 b10703a30..935535f15 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
@@ -22,6 +22,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 @Component({
     selector: 'app-banking-details',
     templateUrl: './banking-details.component.html',
@@ -53,6 +54,7 @@ export class BankingDetailsComponent implements OnInit {
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
         private router: Router,
         private _pd: PdTrigerService,
+        private dialog: MatDialog,
         private dialogRef: MatDialogRef<BankingDetailsComponent>,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
         this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
@@ -162,25 +164,7 @@ export class BankingDetailsComponent implements OnInit {
             }
         });
 
-        this._pd.retriveFile(this.pdid,'7',null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
 
     }
 
@@ -400,4 +384,42 @@ export class BankingDetailsComponent implements OnInit {
         window.open(fileURL);
     }
 
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,'7',null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.html
index 83dee25eb..f7f6f4162 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.html
@@ -458,45 +458,55 @@
         </ng-template>
       </mat-tab>
       <mat-tab label="Docs">
-        <ng-template matTabContent>
-          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-            <div fxLayout="row wrap" style="padding:20px;">
-              <div fxFlex="100">
-                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                  <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                    <div class="p-list">
-                      <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"
-                          style="width: 100%;height: 100%;">
-                        <label *ngIf="doc.document_title != ''"
-                          style="font-size: 0.85rem">{{doc.document_title}}</label></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div fxFlex="row">
-                <div fxFlex="100" class="m-gap p-gap">
-                  <div fxLayout="row" fxLayoutWrap="wrap">
-                    <div *ngFor="let doc of documentsAndFilesList">
-                      <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                        fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                        <!-- <a href="http://www.google.com" target="_blank"> -->
-                        <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;"
-                          (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                        <span class="d-block">{{doc.document_title}}</span>
-                        <!-- </a> -->
+          <ng-template matTabContent>
+              <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                  <div fxLayout="row wrap" style="padding:20px;">
+                      <div fxFlex="100">
+                          <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                              <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                  <div class="p-list">
+                                      <div class="top"> 
+                                                      <!-- Thumbnail-->
+                                                      <div class="thumbnail">
+                                                          <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                          matTooltipPosition="right">
+                                                                          <mat-icon>edit</mat-icon>
+                                                          </button>
+                                                          <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                      </div>
+                                          <label *ngIf="doc.document_title != ''"
+                                              style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                      
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                      <div fxFlex="row">
+                          <div fxFlex="100" class="m-gap p-gap">
+                              <div fxLayout="row" fxLayoutWrap="wrap">
+                                  <div *ngFor="let doc of documentsAndFilesList">
+                                      <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                          fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                          *ngIf="doc.document_type == 'pdf';">
+                                          <!-- <a href="http://www.google.com" target="_blank"> -->
+                                          <mat-icon
+                                              style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                              (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                          <span class="d-block">{{doc.document_title}}</span>
+                                          <!-- </a> -->
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
                       </div>
-                    </div>
                   </div>
-                </div>
               </div>
-            </div>
-          </div>
-          <ng-template #noFiles>
-            <mat-card-content>
-              <p style="margin: 20px;">No Files</p>
-            </mat-card-content>
+              <ng-template #noFiles>
+                  <mat-card-content>
+                      <p style="margin: 20px;">No Files</p>
+                  </mat-card-content>
+              </ng-template>
           </ng-template>
-        </ng-template>
       </mat-tab>
     </mat-tab-group>
   </mat-dialog-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.scss
index 1387488cf..8f15fc429 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.scss
@@ -14,7 +14,11 @@
      ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
-
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 .matcard mat-form-field {
     margin: 0 2%;
     height: 105px !important;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.ts
index 0d605734c..900b5e65c 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.ts
@@ -8,6 +8,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-business-assets-info',
@@ -70,6 +71,7 @@ export class BusinessAssetsInfoComponent implements OnInit {
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
     private dialogRef: MatDialogRef<BusinessAssetsInfoComponent>,
+    private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -124,27 +126,7 @@ export class BusinessAssetsInfoComponent implements OnInit {
     this.getM_Address_Type();
     this.getM_Vehicle_Type();
     this.getM_Address_Type();
-
-    this.pdTrigerService.retriveFile(this.pdid, '22', this.company_id).subscribe(data => {
-      if (data.status == 200) {
-        if (data.records.length > 0) {
-          data.records.forEach((val, index) => {
-            let splitted = val.pd_document_name.split(".");
-            let DocumentsAndFiles = {
-              'document_name': val.pd_document_name,
-              'document_title': val.pd_document_title,
-              'document': val.doc_url,
-              'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image'
-            }
-            this.documentsAndFilesList.push(DocumentsAndFiles);
-          });
-        }
-      }
-      else {
-        this.documentsAndFilesList = [];
-      }
-    });
-
+    this.retriveFile();
   }
   /** init Function Ends Here */
 
@@ -1164,6 +1146,43 @@ export class BusinessAssetsInfoComponent implements OnInit {
   pdf(fileURL) {
     window.open(fileURL);
   }
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+    this.pdTrigerService.retriveFile(this.pdid, '22', this.company_id).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
   /** For Docs Tab */
   public viewerOptions: any = {
     navbar: false,
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.html
index 9f4a99856..1960956d0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.html
@@ -148,44 +148,58 @@
                     </mat-card-content>
                 </mat-card>
             </mat-tab>
+           
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
 
         </mat-tab-group>
     </mat-dialog-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.scss
index edb0c1f7a..4433ec98b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.scss
@@ -11,7 +11,11 @@
   .mat-form-field-appearance-legacy .mat-hint{
     color:rgba(0, 0, 0, 0.8) !important;
   }
-  
+  .top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
     ::ng-deep .cdk-global-overlay-wrapper{
           justify-content: center !important;
   }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.ts
index b45d0f232..e3e89ae6a 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.ts
@@ -22,6 +22,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
     selector: 'app-business-banking-details',
@@ -60,6 +61,7 @@ export class BusinessBankingDetailsComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         private dialogRef: MatDialogRef<BusinessBankingDetailsComponent>,
+        private dialog: MatDialog,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
         this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
         this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -161,25 +163,7 @@ export class BusinessBankingDetailsComponent implements OnInit {
                 control.push(this.createBankarray());
             }
         });
-        this._pd.retriveFile(this.pdid,'21',this.company_id).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
     }
 
     // ======================
@@ -441,5 +425,41 @@ export class BusinessBankingDetailsComponent implements OnInit {
 
     }
 
-
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,'21',this.company_id).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 }
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 9e0093c6e..cb63fd4e5 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
@@ -1856,43 +1856,56 @@
             </mat-tab>
 
             <mat-tab label="Docs">
-                <ng-template matTabContent>
-                  <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                    <div fxLayout="row wrap" style="padding:20px;">
-                        <div fxFlex="100">
-                            <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                    <div class="p-list">
-                                        <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}" style="width: 100%;height: 100%;">
-                                        <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                    <ng-template matTabContent>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div fxFlex="row">
-                            <div fxFlex="100" class="m-gap p-gap">
-                                <div fxLayout="row" fxLayoutWrap="wrap">
-                                    <div *ngFor="let doc of documentsAndFilesList">
-                                    <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                        fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                        <!-- <a href="http://www.google.com" target="_blank"> -->
-                                            <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                            <span class="d-block">{{doc.document_title}}</span>
-                                        <!-- </a> -->
-                                    </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                  </div>
-                    <ng-template #noFiles>
+                        <ng-template #noFiles>
                             <mat-card-content>
-                              <p style="margin: 20px;">No Files</p>
+                                <p style="margin: 20px;">No Files</p>
                             </mat-card-content>
-                    </ng-template> 
-                </ng-template>
-            </mat-tab>
+                        </ng-template>
+                    </ng-template>
+                </mat-tab>
 
         </mat-tab-group>
     </mat-dialog-content>
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 3be5ad67b..7d2c3e20e 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
@@ -14,6 +14,11 @@
   margin: 0 2%;
   width: 40%;
 }
+.top .thumbnail .date {
+  position: absolute;
+  top: 4px;
+  right: -10px;
+}
 .matcard mat-form-field {
   margin: 0 2%;
   width: 40%;
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 282ca9355..3783a5ee2 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
@@ -25,6 +25,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { DatePipe } from '@angular/common';
 /**sweet alert */
 import Swal from 'sweetalert2';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 @Component({
     selector: 'app-business-info',
     templateUrl: './business-info.component.html',
@@ -640,27 +641,7 @@ export class BusinessInfoComponent implements OnInit {
             val.toUpperCase() == 'YES' ? this.businessForm.addControl('month_of_business_run', new FormControl('', Validators.required)) : this.businessForm.removeControl('month_of_business_run');
         });
         
-                
-        this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
-
+        this.retriveFile();        
     }
     public initBusinessForm(): void {
         this.businessForm = this.fb.group({
@@ -1986,5 +1967,41 @@ export class BusinessInfoComponent implements OnInit {
         if(Flag == 8) {event.value =='yes' ? this.businessForm.addControl('fire_noc_pic', new FormControl('')) : this.businessForm.removeControl('fire_noc_pic');}
     }
 
-  
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }  
 }
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 a9af371d7..501e32090 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
@@ -433,42 +433,55 @@
     
     <mat-tab label="Docs">
             <ng-template matTabContent>
-              <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                <div fxLayout="row wrap" style="padding:20px;">
-                    <div fxFlex="100">
-                        <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                            <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                <div class="p-list">
-                                    <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                        <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                    <div fxLayout="row wrap" style="padding:20px;">
+                        <div fxFlex="100">
+                            <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                    <div class="p-list">
+                                        <div class="top"> 
+                                                        <!-- Thumbnail-->
+                                                        <div class="thumbnail">
+                                                            <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                            matTooltipPosition="right">
+                                                                            <mat-icon>edit</mat-icon>
+                                                            </button>
+                                                            <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                        </div>
+                                            <label *ngIf="doc.document_title != ''"
+                                                style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                        
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div fxFlex="row">
-                        <div fxFlex="100" class="m-gap p-gap">
-                            <div fxLayout="row" fxLayoutWrap="wrap">
-                                <div *ngFor="let doc of documentsAndFilesList">
-                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                    fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                    <!-- <a href="http://www.google.com" target="_blank"> -->
-                                        <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                        <span class="d-block">{{doc.document_title}}</span>
-                                    <!-- </a> -->
-                                </div>
+                        <div fxFlex="row">
+                            <div fxFlex="100" class="m-gap p-gap">
+                                <div fxLayout="row" fxLayoutWrap="wrap">
+                                    <div *ngFor="let doc of documentsAndFilesList">
+                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                            fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                            *ngIf="doc.document_type == 'pdf';">
+                                            <!-- <a href="http://www.google.com" target="_blank"> -->
+                                            <mat-icon
+                                                style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                            <span class="d-block">{{doc.document_title}}</span>
+                                            <!-- </a> -->
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-              </div>
                 <ng-template #noFiles>
-                        <mat-card-content>
-                          <p style="margin: 20px;">No Files</p>
-                        </mat-card-content>
-                </ng-template> 
+                    <mat-card-content>
+                        <p style="margin: 20px;">No Files</p>
+                    </mat-card-content>
+                </ng-template>
             </ng-template>
-    </mat-tab>
+        </mat-tab>
 
     </mat-tab-group>
 
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 c76eb4f93..92315ddd2 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
@@ -11,6 +11,11 @@
      ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
   
     mat-form-field {
       margin: 0 2%;
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 89b7e278f..b563a688b 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
@@ -24,6 +24,7 @@ import {
 } from '@angular/material';
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 @Component({
   selector: 'app-client-info',
   templateUrl: './client-info.component.html',
@@ -82,6 +83,7 @@ export class ClientInfoComponent implements OnInit {
     notifier: NotifierService,
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
+    private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any, private dialogRef: MatDialogRef<ClientInfoComponent>) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;  
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -184,26 +186,7 @@ export class ClientInfoComponent implements OnInit {
     // this.getPdSupplierFormDetails();
     this.getMasterDetails('COMPANYRELATIONSHIPS', 1);
     this.getMasterDetails('TITLES', 2);
-    
-    this.pdTrigerService.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
+    this.retriveFile();
 }
 
   // retaildTradingForm: Boolean = false;
@@ -785,4 +768,41 @@ export class ClientInfoComponent implements OnInit {
         }
     });
 }
+imageCrop(pic) {
+  // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+  pic.pdid = this.pdid;
+  const imageRef = this.dialog.open(ImageCropComponent, {
+      data: pic,
+  });
+  imageRef.afterClosed()
+      .subscribe(dataresult => {
+          if(dataresult == 1){
+              this.documentsAndFilesList = [];
+              this.retriveFile();
+          }
+      });
+}
+retriveFile(){
+  this.pdTrigerService.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+    if (data.status == 200) {
+        if (data.records.length > 0) {
+            data.records.forEach((val, index) => {
+                let splitted = val.pd_document_name.split(".");
+                let DocumentsAndFiles = {
+                    'document_id':val.pd_document_id,
+                    'document_name': val.pd_document_name,
+                    'document_title': val.pd_document_title,
+                    'document': val.doc_url,
+                    'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                    'is_show_report':val.is_show_report
+                }
+                this.documentsAndFilesList.push(DocumentsAndFiles);
+            });
+        }
+    }
+    else {
+        this.documentsAndFilesList = [];
+    }
+});
+}
 }
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 0d0c7c008..c3df769b0 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
@@ -195,42 +195,55 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
 
         </mat-tab-group>
 
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 720a1c506..24c30c736 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
@@ -24,6 +24,11 @@
     color:  #fff !important;
     background-color: #e00201 !important;
 }
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 .my-mat-hint {
     line-height: 1.2em;
     transform: translateY(10px);
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 57c83a18b..6406415ea 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
@@ -10,6 +10,7 @@ import { MatDialog,MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 
 import { ActivatedRoute, Router } from "@angular/router";
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
     selector: 'app-current-loan',
@@ -48,6 +49,7 @@ export class CurrentLoanComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         private dialogRef: MatDialogRef<CurrentLoanComponent>,
+        private dialog: MatDialog,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
         this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
         this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -378,26 +380,7 @@ export class CurrentLoanComponent implements OnInit {
                 });
             }
         })
-
-        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+this.retriveFile();
     }
     checkTenure(details) {
         let originalTenure = details.value.original_tenure;
@@ -677,7 +660,43 @@ export class CurrentLoanComponent implements OnInit {
         }
     }
 
-
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 
     titleCaseWord(word:string) {
         const unicodeWordMatch =
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.html
index 5f3579ee9..9a2e68abe 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.html
@@ -2,7 +2,7 @@
     <mat-toolbar-row>
         <mat-icon>crop_original</mat-icon>
         <span class="empty-little-spacer"></span>
-        <h2 mat-dialog-title >{{this.data.document_title}}</h2>    
+        <h2 mat-dialog-title >{{doc_data.document_title}}</h2>    
         <span class="empty-spacer"></span>
             <!-- Buttons -->
                 <!-- <button mat-button color="accent"><mat-icon>zoom_in</mat-icon></button>-->
@@ -18,21 +18,31 @@
 </mat-toolbar>
 <mat-dialog-content>
     <div class="card-container">
+            <span *ngIf="isBase64Image; else loader">
         <div class="container">
-            <img [src]="baseImage">
+               <img [src]="transform()">  
         </div>
+          </span>
     </div>
     
     <div style="text-align:center" *ngIf="cropflag">  
-        <button mat-button color="accent" (click)="crop()">Save</button>
-        <button mat-button color="accent" (click)="closeDialogue()">Cancel</button>
-    </div>
-    <br/>
-    <div style="text-align:center" *ngIf="cropflag">  
-        <span>Preview - Cropped Image </span>
+        <button mat-button color="accent" (click)="crop()">Preview</button>
+        <button mat-button color="accent" (click)="closeDialogue()">Cancel</button>    
         <br/>
-        <img [src]="cropImage"> 
-    </div>
+        <div *ngIf="previewflag">  
+            <span>Preview - Cropped Image </span>
+            <br/>
+            <img [src]="cropImage"> 
+            <br/>
+            <button mat-button color="accent" (click)="onSubmit()">Save</button>
+            <button mat-button color="accent" (click)="closeDialogue()">Cancel</button>
+        </div>
+</div>
+    <ng-template #loader>
+        <div fxLayoutAlign="center">
+                    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+        </div>
+    </ng-template>
     </mat-dialog-content>
 
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.ts
index b19a744cc..03d0ef664 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/dialogue/image-crop/image-crop.component.ts
@@ -8,7 +8,6 @@ import { Observable, Observer } from 'rxjs';
 
 import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
 
-
 declare var $: any;
 
 @Component({
@@ -23,65 +22,37 @@ export class ImageCropComponent implements OnInit, OnDestroy {
   baseImage: any;
   imagePath:any;
   cropflag:boolean = false;
+  isBase64Image:boolean = false;
+  previewflag = false;
 
   constructor( notifier: NotifierService, 
       private dialogRef: MatDialogRef<ImageCropComponent>,
       private sanitizer: DomSanitizer,
-            private _pd: PdTrigerService,@Inject(MAT_DIALOG_DATA) public data: any) { 
-         this.notifier = notifier;
-    }
-
-  ngOnInit() {
-    
-    // let imageUrl = 'https://www.google.com/photos/about/static/images/google.svg';
-    
-       
-      //  this.imagePath = this.sanitizer.bypassSecurityTrustResourceUrl(this.data.document);
-      this.imagePath = this.data.document;
-
-    this.getBase64ImageFromURL(this.imagePath).subscribe(base64data => {
-      
-      this.base64Image = 'data:image/png;base64,' + base64data;
-    });
-    
-    this.baseImage = this.base64Image;
-    // this.baseImage = this.data.document;
+            private _pd: PdTrigerService,@Inject(MAT_DIALOG_DATA) public doc_data: any) { 
+              console.log(this.doc_data);
+                  this.notifier = notifier;
+                  this._pd.getBase64ImageFromURL(this.doc_data.document).subscribe(base64 => {
+                    if (base64.dataStatus) {
+                      console.log(base64);
+                      console.log('data:image/png;base64,'+base64.records);
+                      this.baseImage = 'data:image/png;base64,'+base64.records;
+                      this.isBase64Image = true;
+                    }
+                   });
   }
 
-  getBase64ImageFromURL(url: string) {
-    return Observable.create((observer: Observer<string>) => {
-      let img = new Image();
-      img.crossOrigin = 'Anonymous';
-      img.src = url;
-      if (!img.complete) {
-        img.onload = () => {
-          observer.next(this.getBase64Image(img));
-          observer.complete();
-        };
-        img.onerror = (err) => {
-          observer.error(err);
-        };
-      } else {
-        observer.next(this.getBase64Image(img));
-        observer.complete();
-      }
-    });
+  transform(){
+    return this.sanitizer.bypassSecurityTrustResourceUrl(this.baseImage);
   }
 
-  getBase64Image(img: HTMLImageElement) {
-    var canvas = document.createElement("canvas");
-    canvas.width = img.width;
-    canvas.height = img.height;
-    var ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0);
-    var dataURL = canvas.toDataURL("image/png");
-    console.log(dataURL);
-    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
+  ngOnInit() { 
+    // this.baseImage = this.data.document; 
   }
 
 
-  //baseImage 
-  Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMEAAAEFCAMAAABtknO4AAABhlBMVEX////oTD3m5uZMS01PTU8AAADy8vIgICA4OzYPM0egoI7/zMnoSzza29o2Nzb6+vpGRUdBQEIwMDGFhYbIycmxsbLp6enoRzfi4uLv7+/nQzLnRTT0//+bmYnV1dXxTj6oqJjAwMAXFxfJQTTnPiyzs7P98vGzOi+9uq7/0s/mIwvW8/T73tw6OjovLS/ZRzndzMl4d3hZWFrmNCIvMy31sKqWlZb/UDsREREAL0dkZGQAITvX5+b84+HbRznNzcOko6TpXVDraF0AFjTle3H0r6k2Pkrwj4b2u7Z/f3/RursAACSsPTPunZftdmspNjbgpJ4jJyHwlIzEYlnRf3lvbG4AITCmt7fhnJbrYVXoGgDszszeeGuSkourqKAVGxGGhntGNzjNTkMMMzajQjqOPzxsQ0ZcNTNpTU06SVSkTEaARUFMRU7etrHV/P1fZHApMkWSgYc0HTFXOURGOkq9lZXFqqlYb3q71NX7rKZQFRYAFS1kdoGBkJkAAB52O0MqVWNlhJCmctyFAAAgAElEQVR4nNVdi3/a2JVGICAZS0jiISHhEYMtSI0BG5hgm4BXEBzwJDAZdtnG4223nc60TdvspN1tp9mZNLv/+d6Hrl4IELIce0/m57FB3Hu+ex73nHMfRCJh0eT8aBpaY3dB1wzDKO/umoub0FShKEbauWs2ghM3kigAQenfNSOBCSOgCuO7ZiQwceMCRMBQ/3/16LFCYSFwd81JUNphGCQEqXbXnGxPXKVSiURqA4SAUuZ3zc/WdDCfXc0uKhFsyhRTuGuGNlH/3Xh+cVAx/35MKRIjKcP+BBsCpd1zWz6oKoWCommzSR+ZbGWAh16ZRSSsRtIIKNb1dWVTS3dFM8wwJSmD8Q7gkpsVjKGfvsNCYK5qkYmmzC7umtUVRBBAhWcG037kmjJeUaZXhi0/jgwlAPGemvREo0wCoZw27l8besRcjYgaVQoMjDAmd82sJ3EzjaFsIAqD6c5QwtPxaGBMCX00N0iz+zm5VcaURDkxGJxLsxG2CeXdDL2g3Vdr3hk6xADGnCjVZIiFMMMI2vcVQaTyTitIDhCUERONsT6dH6F3lXuLAGC4mEnKMgaJ6Bd+ixm9m9T6lftpDZHKznS4LAU3IkUrDGbzi517mfdwlfm5hya5iWGkQoEaDMePa/dKFv2d+Xm74AOABUNpD6f3JtQ4mA+9rGCzTlGz6T3Qp/7kquDpifzIQipIs8ndCuJ6OtCYYOwTENrw4u7SuP5oEEB73ATD2rvBUJtpAbXHTUyhPf/4BlG5GBRCYR+TMrj4yN61NpSkzXxtQZI0O/iI/PfHYSmQRYzUHn80t1QbKiGzj6kw/EhiuKDCVSCLJOWjZNNTLWwFsohRprdu0JV5CFPAGgiF0S0bQ2WobWbjRqQMb3V6q4xux4btVBje4uxmrArcMim3WNSY3rYKGRBuzRYm7Y8CgKK0W1q8OqBu0ws56Hbqe5XhbU1ky8QMbsMhze1GwCjtqkFaQGBWE21tyUEUZuED2LFiOUlrM8PxqzcXk8nk8XQ00LYHwSiaNJzCBiZvXk5HV5rmmii18PXIdKRSWxu9YXu7JvWvR8qWNq60ry5qCbMFOXo8HbQdjo4ZhO2PakQEWnt83OvtcgmLOK4/rm4x1TFtZSexa2sgsSv3ei+ptl0MhbCDPGOpAyTmx4d52c4/4mB3Mmj79VRKe8ztuhrgEvnDw6liE4N0Fe7UfI3VRKm+6fXyCQMAnDoJll15VvUHQZOuOU62WiAg5HzveGjTRi3cnTF4bVXRjg/ZqMF0JCGrWYDGAMEl5r6MQaJqhgDAB6OqGgVKaDTA9g5tEBgtTAB4fVtqHx+qLBovLpLXY3vxeDzZ0qNkGP3ErUz1YFfGw59t1kED8fQii2XCiWrvcGS1Eao7miBH9PWrQ5Y1pJ9JxU/39pLJvdO4oEcQB7v9rzd71eoISyAS7Z6CFpJ7oIHTLosHIa/2WM10CXAdNyyqICVqj/6DVZERc2ojvpc8jSfjp0kAIt7CmrX7eKM1a0OsMhEdiA9QfG8PtdTBL7Pq4XHbXHUIcWLuw7p0ger1VBYBEHnQfbxbzpZamI8Y9k7y1abouz1BOhTpAL7hBzvZbCcJfo3ruAGVPXxFTIEphKdGO1A52y97LCuiAYR8x1vQkcj0KeKkidRg92KDMWtXWAnzCHgyXoKtl8Afp3E0NgkWkBlAhrhPD26aUyi2h60gUob9x0X0lopY2TtVkXAqGxYRqhfICrgFFl0HN9+FEIQIgqayPVMIhXloqQ40g/YUmHEeDVQLjPtpGr8VjWF1yGAhbHBHwBEhM0piEeRwG3ocywOqEcv2VGIJ0iy0yOKcgZ60x6pQibgsNl88PmoDC6GeRwjWzwkFBfl+YAVJuwyaCMElUaPDmTEMDBUWggqIGzUK6BArYzdiqD4g7jJujCdSow2GoFFYiVqnGHYjC9vIo7/2aJEgMNWoHVZgAV2RNiQIODKCGZVjmwYAQwl21yei2hWeDHiMAKhiWZZz+K89AUkxD9ToDXHKoe1NOoAIRodEBh0y7PHTOAHgE8EAIxAMBEAXT0/jp3Y9BJ30jhWyPyYsd7oDvDxGAAUdyZls7yVNws7Inwy47qn5uT3Sxl5LNhGQjCk0dzohCEAYBi3ZxrjJiGHJb/zIwJSineKXkWUZhLX33ETA5u2G6Oi/g73pq7UIFGmXs3lTZwtZ+Jao3p4MZhCBbUZzElaijd5Ui9pnNAeAGJ7RoAy+INXxUBEoyJvi5CCyxIAxoXG99TMa0z7GCOS4S4x7p3kzqrC8aWjLCdCSGTijsSS47johxBc4Ot5lN5Tmq68OcWha3nMaE3BlwJC5qAoRmMMQojfFnbOGLcswOLU4OI03cZrF9dYbMtTFHkIgA020DUI8Xjaia6hErFm80cJalarBeE0Z9JAQcIIQ6aTjMMUB+Um8nsOJJif2NhbnteOekSCIrVPSwmkLZzgwrgMieGkOgxbmnAym+DcIAckyWf2yVU8LrUxORN3LCdkywdUIRj2cDYEWSp1FLJ3mu50SF0FzAQLAsgMyDOHVjDik3UAIsH2cKEMxcLIYFWUz05fZw8HGRFmqHvdEs9SREKNRMUHqHcgIVMuOKWkYZmxK4SzTBsFFMui7ugkAEILWM2J0F2EVApOBVbSRwltHMDaOVt+gOQEGFy4eYN2kx/pa5gd5BhyDpQZYDKBnk2OIGQ4p2CnHGIKalx3dyzKr9vKbdQiNQxuMA0o07A1E8dCwh2ObNwstqLCqvkqbSEFl86KBQhbzKkjQVc3nEpX09RTkSipLPp8A7KvYhnu9mV0RQ1wfnxLvACH0WAKCzefz+Bf28I3ke41Nao9h1QOS1QASgDp0lGtCXMmZWlWo6owlECzqHU6rBebcH4BzhmlLam+plR6YCJwFeCa8wxfGUQLqnCoW29RLIG2rf/j7m0G1SB352a0J6eic0tpz1d4IaIU9HlWVIuzDRECFt1HE2KPPUPv7VFHTpNEb9hBQD/14M6baJ8z+vt/9dgxzvn9UbCvDl2rPbOT41UBrF5mj/SOrlTBrdjukeFA8f/QIgGhX21ez+auXcP1Iqbalo/1H50V//EMqFvdBK+CDFGrk1fiqUEXsP3IMQ4gTWqRm6ifo5xEAccQoWhuRdg46Bj1vAcAYCdAKaAQ0A34Ujvb30djY5RjmgYW+FbAxTBGw/AIyAAn8/4W7Z38Yjh69IK2gRuAoOFsJs3bddxhpEVgt7BXT/tH2/KNWgDlYjeyfu/kPdUJbWgxnAAHtAXTELPfsk8AHAQjUCIDj0UqYC/uVmTvigRiKgJib7fhFbaxqJMyzeJXRx9uQYEMQ4mImN7/VfUWM5OnJ2mFuM5p6ZY+S0taUG+47ZSToUY/2PSAwVIgAIhceCIovvng8GsJpQQkmIUaB88lgdHGQ/+Fk+W1pGCaCiQePxUd/j3CV/g7cGtKuVgEzBYnZbNkMPAECcFfhlDze6cPDzLt/9kIQ4nQAwgqPzVHF/R/I25Xa5GI6mg0HlKQBpUCkAJIMKsA/wGtoFpeoq+FoPL04sAz177/1QBDubRcHg2UETPG/e/ZnuEql368d7LycjiGYARhrxDREI1GDwXA4m76b7FzXwLA7bVT+Hy87CHd/Ts0DAXXy7Q8ej76HYAyqQFDgR4KrwD8jf2e9Gmef/cVL97TrMBH0rzy6YE5+fL/0pB7/+8pWuIfP9fwS/++fPP3g6YpC3ajmvceu+O1z3fXgz588/WllK/rzs6fP3mdtr3Cln549PTv71gvBINzdOUthBYbw4fnrnEyUmpNzr5+fPXy+LBj89vvnDwE9ff7k9Q//+x7QT68fPvnH07OHZ/954oEgxKVYRN5hRXH/7Mfnz97nStlstqRfPnv+BPL4j/dek2n0JwQA0NmTHw16cob+fuHhicIsdyHy3q7MnHw4Qwy9ffvkx6eYHzjM35fcn2ffP3v60JvO3p54zSGFkE/Fe4YV0KP+15kHU0/+cfZDp5xF9RiWVXM/PXz+3Os5BODsG8+oqPAqXASPV5TVi5QnhIdnPz59CoXy7O1DIJ0fn6xgHz75nWeCwUghb9ecrKpnFYtvV48uodX8Pzz74KlD4d+6c7BycabILEvh7AkiIAKDABrjpTN/AACFvG+5wlRXJTlF6k82voDOPH3yutXM/PVvX3zxxbFB4Ne//fXPl93XZ1i5TCl9KHoXOaRq2GfiRfmCaq8IoosnHwxNOnvy9vvv9S92aiBAqtUOAO1ggr/WDmogbHqjX37/zLCLs7cfvGYCGHYPxiGfwE7kxV1xKq3YRsecHH2AYnjyunN8AFnfWUkH8P3rvy3ARAZmsn0vFWK09vBxZXc3GioEOQqXiyqzqrc5gIT9D0AAi2jtYA33FoqDyp+BKn1X9PBCTPtrZlLhRNBhIkQAHBuFJO7WZu22tz2cnHz3l+vaZvYNSrT+yCwLAKiPND6IcNE87M4zkA1IYtSgBLcz0zx0iSkCayjM1yqQjWr9i2+WLUACKee0BlXW6E0ODQBHAICxSXD9kbYkh/0jpsgUAQMH/drBWk2ChnBwsXy0GSbN8xrwP4lo3uwuND0yRYAwgGxhSrUdczRDHaHyndLWZvMJ5PLApB3rV+SeJu9GVNt1NB59EB3Y58S8rbOwhJCwN4pHpj9Xqo5DLbiAeE4p8DzI1Wj+7vFkx+Ca+NXJ43fz0XBQAEknrLwemUsdwHilaQ25fy7q7CskdyQ7AUTzcKdpZTJst237QGD9FC4AHIE4Q8LpMVC1gUHovhBYWwHJf7F4frR/dI6lIAHlYcYHmFOnAFBXoQAwHJFbDCDSuBg6PRMYWlSPBjAAf8WigosWuHCBXCdSNygrxD/w/MrQqlkklgCEZAniMgDgWPG9Ywezr792aRMsqr948QjYxfk5uXIG/YTFbrjYcM4g/hmtWh2M+1bs4ME/6edmlPACAJ0SfrsymQEvaJcEg9cXXjxyEYR1xKA4COnO7MKeCLuNjVAIxuy2AhODmR/XHs8AR/ZtLcbSgJ3/faRaQJMK0Byo6Y4j9Fy2ALObGwth1djYxAAEUZnMYQXVdv0JXF8AioPpHC7jFmG1sdqWZtPHfVfcKUdX9nJzY/a0giUxQOofTGcDWHNUTJ0qElKgJ1KY4XxysBw0rxYAohsaM7e28byr+Ur/ejK/ojR4UtGgE3h0sQ0vXppc1zxDfm9Ds0i8GYJ1IlgWAwbNVQ52Lqbj8Wg0Gs//+V92wLhzK7V5gwBuLIRN4wPFsM7U1Ez8X3+uru1gI4Bo9AYAuM2tQzGs5L8Lz3vFk81V1uhDADeEsFkEGIOXGDi1Gzfp0lNSsj/+bxIe+e3BSwx63E7JpSpehFs10/hq3h/5UiLch3uYuIToQEAn3PHB6onGo/mAQuA2OSLnONl6AfaZ59ikDYEs5/NR2yO+LNiigELwaQWERKsKD7nLJ2x6pBvzCnGMvi2AUDAhWL3kPQLsZTLUFY42osiCAGhZgwHl4M5jVjZoPRZICDYR+AIAUx/O4h/0mtgzEJRsmXY+4VsACZsaB5nWHLz5hBC1O/h8oowBLCKrP7KORHtr2wOwf9rnxLNE2KWmE9u4BDvZneHWQrA7ovzWhkd6VbEnDQhAjojiboJ8elsE4HNiVJZFCCTvZEFE//lCgN2RHFAGIkAwH10f7qK/tnZHnNi7BhTtidGEY2pTL6NsRu3onc2C4TIIQdb/1OhEwEWmX7erg+uEHMgbcf+mFRTlfCqKnF0GYvZSVReqHi2VNg2tmMChUSc4gpdtWNEY7/aCpPwVTWIYSarODxMOBKVMtoxksJmDvIAQdAP6ImC917BIy7SHgXIEY/EPfNopg1JJ13Oqnt+sRaKKA4vUxkRpJYI+vv872JY7YxG8+mrXwYCos50SQJHfrEWJEp4P9qK+w1AHgUl+d47GMdDict84+HFe4XxH2S6KZMicHNCfAuudoPKHFOR2sgkubKJvU3EiEFf8vkQcyXH0gKYMEFRQxY8pBNiqY6zio31KzrgomxdhqCSyalTNqusQ1EmKFhxBBO+qCXAcxNiPg3fQ2xGIwJBVUdfFUq6k6usRkAyhGzCugAiwQ5GutkZQw/c2MOgOHnurgPNcVu6U1XJOVnPiGtZkM01rBZyVIQJj3/32R/aNbQhol49DB4AMOtlsuVSK5jpsR8+u5o0rEQSpfHAEFc3S5q3I2OWL3ZgTQUnu5HK6DqKeUnmdDLiOmaNlg7lThACr8/Z7N439+vguKicCMPDlvAjYB/Nabo0MIk0TQTmYKUMExk2M0nDLsKKPl74ZBRqyq3uSheWja1MfkeNNBM1gcQUqmeKvpdn6WJGxTZlRIssIfJKcb5gIhGBNoHDuGq8BbXuRztj4OpLBDRBk90wE8a0qNxZBBMZO0S1PhJDdmfj7zYIhSORs9SI1UFyBKl3G8Y0tdw6SSyiVx8ER2FxRPJ4L1Aau1RnfxbHd/lOyW1+r3UAGtspvwLgCIzBOJG51aJ/cJctQ/eAIxLoNQSuQIWAEOxjBVoZQMTaKG6fyAiEQ86c2BKlAKQKLEPSN8GCbExXGZyhpHByBFVNASgaalTGCiLHQ294CATkLawguEAIzvTFMOYgzMqruRnygbbH7kewTJ7NIIAQtB4JA9QoDgcEOdoz+yNwPsXMDGTgAgBQhOAISZfq/v7hGEBgHhIMgkGUnAiG4LyJVky32808khyvyv55mIy7rRBDPBzBlA8GBccD7yrchzA1DNmNyn+sHDgS6C0GgABsj6Bv5ou8v0uXIcQmzShMEwaULQSaAPzBk0B8w25myeRLWLBBsr0VignYhEAIgMOYDK870meWYR7fMSGT7vkWx6ULQDKBFBAG5s8SvKV+TnZjml8oF8COyI7ALBoBokRmmST4RkBnZumg3UJ7O2SflbqDiL1kJnzpC5c00Jl/0NyCvBEpPRFuCIMjBihUGAhLs+zRljpiBFQwGLNya/qihBluJI5ujyATl81tDK2SHvlWiCbqUF8Hx6am6fqvYSiIrT+RoruQvrjggG0itlCIogii8Mi0eLwVdwyEIyNFcyd+N/OZ5cEvrAi8IAykk43rAYpEok7Un4t8ty1xLxJBtx2s5eFtSwHpJLhPAj6IrpqJZsimpckWCZV/ZPjkGazte21xkymoimDYltv2QCDtSS5lmS6DLBIFRvvJVuCN4rZUf7lLg641061LPgrGR5aAL3BsJNI2GXm/SqUadj8V42uDAGFV/BwXNA+3mHJ7vxugYTQvw/r1Fp6yC+Zbzv8XMF4mwyYTIZnOZVrpRrws0DbqMCWWXXvj6UgTzUgGzSCYueNgcHYvFBEFINvhFJ5fFOzVuDkTG30EQVct6phsT6vVkOgXZRx3SZEIgCHxVXC7IuTnr6QxGQCNJpFJpId1oCPQik9GBQER8JWIC7sHwpV7AxyDC17Bly3rnEqg8aBLqDU3XUykBDxfNd0gsSuJ9X6VH8xyvZDrTDg9bxAgAAB78RvN8HRJPtxaZTq6UxdfDkSsGkLnYCN5ZZ70VzavZEuS826IFATYjoDbROPGpVB31FKMFnXBgIvARnZpf/WS7yUznsVjhsKRB+xgPViye54V6CvLQ6i6amU5Hz5XhkXFVzaPL3uAB5byqwkPk5ZyudzKXi24rBuGnBPBZYKzG2MQw13CMUjzWIiFHOCD3xvhZVzbTG5vnyhEZkOZt/0jvgCCUdLqRTgOUcFwhhzxCCAcavAU0JQ10RODh09bnaXuDMaindUMGxJBNxfBzOZl5r4Nt9iibCICI08ZgGf0Ro4sZI4gYQsTHDAQxQrRFMcewOxCQUQKuyNxmS+IERvKBgLgi2wxe5klXlpmR3gkIkyfzLfMJ4liIJpov2IfBgoOFAP/mTQTmAW/mfDj3OMJgJ/PaNFsUVeKNTuHw2BgzBONSKTuHtJ1P/L5d9ejlP+DfaSzoWMvcNT8xD/AxUqE9W1uzIFfX2StkXN3gAdtxLGb6a/uvFg92KdhH2gJvHwKbURgfNSTNN00OnFc1SNS6TMdEyzBT88yGLsRsboK21IJ26cAS15Y+OZTHjZp2NBgD/QCba5mVCc59E9o6c7CudWAUaryDMYDICHbAYy/hZNE9/l7/CGgbilVCQj+RECwdily4zqG64yPZvglvbEPLFKirC4Qh0RTwdMm7lNtbi9aAsauQXZiOB+DEbwNQW7pax4iPOE7MljuXLZpu6ebTzutNGEa7wmLIIBGkTGM0zXadFhEmXe+tFhR5AEQuFoAKs3SouzBmAetNOr2XTIIJCABO8uRGm5lLXopxYzOng4FBBrbc34qhdLy0DGvd02neumGn4nHjSvGbLyHrKUgPwL8UDHaMjwztCIDrmpnzmtqFUaP34DlZXMK4buA9PsnTum1vI7RM95WDxaO6wb1F6To+7mO/LIqhhvbvZU4Al2R1vYK7VaPq8PueojF/ERaWBoHg9erkpFjcd6kG9WuDbxwXgvlfSDUy6CNHdgTuOErt1m0YPLleqRiWaGK2X5ef4+sd5FkSbEnPNLst/tffffuH3721rqdhisWTk5PffWmwbtgj9PVNNNz2WzQ9krpSN8avGefVvtVbiZbe5OlLVgSst9JJZKNA1b/8zW9+8+WX3xjnI0+K1NE33373W96QqkV0rImgO4TlEY7LpUWdcLqe0SAA6pfZciZNbNSm6V8eKUffvHjxh+/++Ns//SkWe/3awbxBLXYJgedOgESpxfMbuFzNPW062OU3+VaZ09Npm4PBBHJb/ve/j70G/9YSzogolxCWEQAqN4XgAvCeAUH/3TIX0ffIyNeJjcZol7qsJppbQsAUPBFEEtmmICwHcD4heLwXq7fKUdDuV2TUeSvj8MU8ohTntmSGUlYFsly006WFNU7fi03i/10ODahPs4T8SKeBPGRsK74tqsPahuVNmeFUYwpryhtcttPleb8Q7IaAfxiP8MIiR65oWUAjqAdjHyKAE4l1eSBD1SaD6toSEyeWu3XBzNCcEbQLgt0MMMH/gyS6mTUjywSY9m8AAKelMzNNRpdbbi5uyHqzZWvEWwoxM8K2PwoE2Mw5zkZAGfCBAWBnNJMoFAqeS743qXJqfRUEEvLbPREhnm/qWdfyajMNw98lzupLr3gTD79wbapJAxDdSfOxovj+BuC0vZmlOdpptWZvlx5HzDJpGP66iBYyyy96I4CRUWU0nNQkpjDn5gPfu2FsCGB1xQXBzNCcCDIeDenAFy0BSF1G9KQ/BAvYSAVEczNFAz7I/11gFgJaL2e6gjETGS+ZP3gBTiImAo/mS0mgRW62ksDSMw1fUuiShirD7a69tyHIgtQvoeY6IKps0bbySqvVWnRybM6E4Ikgm8TFEBvRDVi54y59QegGPU3uQEBIzmdhtRQS+D+LC+nl9QiiAIELQB0/x/mSQivoDSOeCDxpgwwSe24t4nljWBNNt3S8EKy7WeKjIIjsubwpnTTr19HWBqdK8xu7/wgIcFnTonrXei+fXu9UUy06tnwlw8dGAMIKJwK7WqgCH1tNySbbslYc7gwBmNJsUQXtuuaCja2EwKfKkSgtdO4cAQivLQR0auF6O3u6AkIdCktsCR3fc9htIQCTssUjLywdDPeenOl6DMbnclfwbPSjIgCTsmmudNpDq/WGB4JGE0FNNIVmwKuCwkOgfmVOynS96ymlvWUARomPy9SDTsrhIWDrJgI+6X17lJ52ZRkN09w79VbAm4LCQ5CPEQR0Q/dugmvaIdB1a7UtoqeEgGFFeAjEbtqYeYXuKpVOCFbkQTdo24yRsxft7whBYmEg4PnVo5lYGCjpWNoxAZQbQsBJOTwE3GUau9Nk2eNdQnILL0jySd3RSLbB61szjyg8BJEORiDQax27DCskMaHhggkQBJyUQ0Sg47AitaEdtc7T9aVYWk175q4+KEQEOZjr042NQ5lNJhdLvj9fj7njEJ8UIoIyXKyrtzb3Wcos+yqZ57sej/qgEBGUIIJ0wESFo3kf2L0oXAR1Oh00UWkJsWAfDBGBKgAEq6bjjbSo88E+GCKCPA8y5XTQROUyffcI5BhEENAnRjKNu0fA0SDXrze93vJB9wFBpAVy/XpArw7S7HuAoAmmNCGgT4zQ98AXwcBI4APyod+HqAIVf3l++4Q9kc926rG7zw+AKcdAhpDyez0xl5BFuAGjG0s1knX+HtTsAGX5FN3YOJSJvAq3bGcWLR5uxoUrFrzQDFo2DRdBpJSm0/oa3sGYd5pwn3wa7SwW8O7nRUZXg9/KHC6CiApCTDczHNxvXoLrpkBdkg0B7igGzLe6zUxHL6k3vR4+ZATcJV/XbbyrpTJQF7TPL4XUBfCepsGgl7Oqx4Xb9wBBJBvj0x01qpZyOlD0GNRzrC50q9VdgEEvs/A0QBis3xKCSK4ea6Tr6QYgbKMCvbjs6LmsesM71FdR6Agi5ZihLfU6380ARWfFRLhfs+Sk8BFEEnpz0QSss2F+M9FqugUEgG5zzN10Owg+Jm2DgJwCCRqD3Q7ZEGwIB0qWDC5v8q0AoRLHXn7+wKT1C1lc17bNmG+q90GR5PLiKxuA1FdrE8SM7dEHDz7/ii7dOYZs93MHUw8e/PuarzXLt5zPPvj882aY34K2PSX0By7+AVNrKiVZ98Pg8Qfryuy3TVzzKw+W1iBg6eXnH3yufzSG3cRlPAA8iK+LXJpLIoMQwvkGrgCkewFoLBJ59p8Q/cxO6JV8KemFIGC9+cbEZTwGNB375JNPP/3Emz795LNfJVPLH2rdkUPiOssI0vVffLaCfUyf/arRWJJB0PrWjUldYqXe/Ww9AADhF6200wGn63c3Oas2VkD22uh+shEAgPDZp4s6PCOB2U+eBt6XFQbJnRYPZqXPQepdbzU/3cw+AfGLLjrXnhJazdLHSQBWUkIt64h+CcZ2pQm7CDz32We//GWunL3597eFRhy8aSz/AjkAAAAcSURBVCAK3ejPABZIn7oIv4rcKgsvG7itpPH/APV4xrQzYxA1AAAAAElFTkSuQmCC';
+  
+  
+
   cropper: any;
   cropImage: any;
   // cropper: Cropper;
@@ -91,23 +62,6 @@ export class ImageCropComponent implements OnInit, OnDestroy {
   ngAfterViewInit() {}
 
   ngOnDestroy(): void {}
-  // imageLoaded() {
-  //   this.cropper = new Cropper(this.input.nativeElement, {
-  //       viewMode: 3,
-  //       aspectRatio: 1 / 1,
-  //       dragMode: 'move',
-  //       modal: true,
-  //       guides: false,
-  //       highlight: true,
-  //       background: true,
-  //       autoCrop: true,
-  //       autoCropArea: 0.9,
-  //       responsive: true,
-  //       crop: (e:any) => {
-  //         console.log(e);
-  //       }
-  //   });
-  // }
 
   clickToCrop()
   {
@@ -121,8 +75,7 @@ export class ImageCropComponent implements OnInit, OnDestroy {
       crop:function(data)
       { 
         // data.move(1, -1).rotate(45).scale(1, -1);
-        that.cropper = data;
-        
+        that.cropper = data;    
       },
       getCroppedCanvas(datas)
       {
@@ -136,10 +89,40 @@ export class ImageCropComponent implements OnInit, OnDestroy {
   {
       var cropcanvas = $('.container > img').cropper('getCroppedCanvas');
       var croppng = cropcanvas.toDataURL("image/png") ;
+      console.log('croppedpng',croppng);
+      this.previewflag = true;
       this.cropImage = croppng;
-      
   }
 
+
+  onSubmit(){
+    // // "fk_updatedby":"25",
+    let records: any = {
+      "pd_document_id": this.doc_data.document_id,
+      "pd_document_title": this.doc_data.document_title,
+      "pd_document_name": this.doc_data.document_name,
+      "is_show_report":this.doc_data.is_show_report,
+      "image": this.cropImage,
+      "fk_pd_id":this.doc_data.pdid
+    };
+
+       this._pd.updatePDPhoto(records).subscribe(
+           dataresult=>{   
+                           if (dataresult.dataStatus == true){  
+                            this.notifier.notify('success', 'Saved Successfully.');
+                            this.dialogRef.close('1');
+                           }
+                           else{
+                             this.notifier.notify('warning', 'SomeThing Wents Wrong Try Again !');
+                             //alert("SomeThing Wents Wrong Try Again !");
+                           }
+  
+            }, error => {
+              this.notifier.notify('warning', 'Something Wents Wrong Try Again.!' + '-' + error.error_text + ' occur');
+            });
+    }
+  
+
   rotate(flag)
   {
       switch(flag){
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 9931f393a..747e56b40 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
@@ -280,42 +280,55 @@
             </mat-tab>
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions>
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 9ce3b1694..ab2076e37 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
@@ -26,6 +26,11 @@
    color:  #fff !important;
     background-color: #e00201 !important;
 }
+.top .thumbnail .date {
+  position: absolute;
+  top: 4px;
+  right: -10px;
+}
 .mat-card-content {
     background-color: white;
   }
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 038df3362..b2d9aab11 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
@@ -22,6 +22,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
     selector: 'app-employment-info',
@@ -61,6 +62,7 @@ export class EmploymentInfoComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         private dialogRef: MatDialogRef<EmploymentInfoComponent>,
+        private dialog: MatDialog,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
         this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
         this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -183,25 +185,7 @@ export class EmploymentInfoComponent implements OnInit {
                     this.company_relationship_list.push({ 'company_relationship_id': 0, 'name': 'Not Applicable' });
                 }
             });
-            this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
-                if (data.status == 200) {        
-                    if(data.records.length>0){
-                        data.records.forEach((val, index) => {
-                            let splitted = val.pd_document_name.split("."); 
-                                let DocumentsAndFiles = {
-                                    'document_name': val.pd_document_name,
-                                    'document_title': val.pd_document_title,
-                                    'document': val.doc_url,
-                                    'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                                }
-                                this.documentsAndFilesList.push(DocumentsAndFiles);
-                            });
-                    }
-                }
-                else{
-                    this.documentsAndFilesList = [];
-                }
-            });
+            this.retriveFile();
         }
 
     public initemploymentForm(): void {
@@ -595,4 +579,42 @@ export class EmploymentInfoComponent implements OnInit {
     }
     
     }
+
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 }
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 1221ed375..1b696d025 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
@@ -271,42 +271,55 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
 
         </mat-tab-group>
 
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 e18c2c8f9..e71c57db0 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
@@ -24,7 +24,11 @@
   ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
-
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 .paragraph_change {
    color:  #fff !important;
     background-color: #e00201 !important;
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 b90b6f70b..4b475b7e9 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
@@ -10,6 +10,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 
 @Component({
@@ -61,6 +62,7 @@ export class FamilyDetailsComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         private dialogRef: MatDialogRef<FamilyDetailsComponent>,
+        private dialog: MatDialog,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
 
         this.form_id = 6;
@@ -163,25 +165,7 @@ export class FamilyDetailsComponent implements OnInit {
             }
         });
 
-        this._pd.retriveFile(this.pdid,'6',null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
     }
     pdf(fileURL){
         window.open(fileURL);
@@ -694,6 +678,44 @@ export class FamilyDetailsComponent implements OnInit {
         });
     }
 
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,'6',null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
+
     // validateAllFormFields(formGroup: FormGroup) {
     //     Object.keys(formGroup.controls).forEach(field => {
     //         const control = formGroup.get(field);
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.html
index e17876ac0..cccef65e0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.html
@@ -221,44 +221,57 @@
     
 </ng-template>
             </mat-tab>
-<mat-tab label="Docs">
-        <ng-template matTabContent>
-          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-            <div fxLayout="row wrap" style="padding:20px;">
-                <div fxFlex="100">
-                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                        <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                            <div class="p-list">
-                                <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}" style="width: 100%;height: 100%;">
-                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+            <mat-tab label="Docs">
+                    <ng-template matTabContent>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div fxFlex="row">
-                    <div fxFlex="100" class="m-gap p-gap">
-                        <div fxLayout="row" fxLayoutWrap="wrap">
-                            <div *ngFor="let doc of documentsAndFilesList">
-                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                <!-- <a href="http://www.google.com" target="_blank"> -->
-                                    <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                    <span class="d-block">{{doc.document_title}}</span>
-                                <!-- </a> -->
-                            </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-          </div>
-            <ng-template #noFiles>
-                    <mat-card-content>
-                      <p style="margin: 20px;">No Files</p>
-                    </mat-card-content>
-            </ng-template> 
-        </ng-template>
-    </mat-tab>
+                        <ng-template #noFiles>
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
+                    </ng-template>
+                </mat-tab>
 
 </mat-tab-group>
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss
index 4a0a50800..57876227a 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss
@@ -11,6 +11,11 @@
    ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 //   ::ng-deep .cdk-overlay-pane{
 //     max-width: 100vw !important;
 //     width: 100% !important; 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.ts
index 6f0857abb..f3a3dfd85 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.ts
@@ -23,6 +23,7 @@ import {
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-final-remarks',
@@ -57,6 +58,7 @@ export class FinalRemarksComponent implements OnInit {
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
     private dialogRef: MatDialogRef<FinalRemarksComponent>,
+    private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -254,26 +256,7 @@ export class FinalRemarksComponent implements OnInit {
     }, err => {
 
     })
-
-    this.pdTrigerService.retriveFile(this.pdid,params.pd_form_id,null).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
+    this.retriveFile();
   }
 
   getM_Recommendation() {
@@ -659,4 +642,43 @@ export class FinalRemarksComponent implements OnInit {
         }
     });
   }
+
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+  this.pdTrigerService.retriveFile(this.pdid,'20',null).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
+
 }
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 8d9cbc3b7..b559b7fd6 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
@@ -587,42 +587,55 @@
             </mat-tab>
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions>
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 e1a42d584..07fd5b7ba 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
@@ -23,7 +23,11 @@
 .toggle{
     padding: 1.4rem;
 }
-
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 .underline input {
     border: none;
 }
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 5acadd20b..fc4560a46 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
@@ -22,6 +22,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import {ActivatedRoute, Router} from '@angular/router';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 //import { Alert } from 'selenium-webdriver';
 
 @Component({
@@ -87,6 +88,7 @@ export class FinancialInfoComponent implements OnInit {
                 private router: Router,
                 private _pd: PdTrigerService,
                 private dialogRef: MatDialogRef<FinancialInfoComponent>,
+                private dialog: MatDialog,
                 @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
                     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id
                     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -309,25 +311,7 @@ export class FinancialInfoComponent implements OnInit {
             }
         })
 
-        this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
 
     }
 
@@ -1982,4 +1966,42 @@ export class FinancialInfoComponent implements OnInit {
             }
         });
      }
+
+     imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.html
index 7e2d5efc4..46b821bb8 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.html
@@ -64,45 +64,55 @@
         </ng-template>
       </mat-tab>
       <mat-tab label="Docs">
-        <ng-template matTabContent>
-          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-            <div fxLayout="row wrap" style="padding:20px;">
-              <div fxFlex="100">
-                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                  <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                    <div class="p-list">
-                      <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"
-                          style="width: 100%;height: 100%;">
-                        <label *ngIf="doc.document_title != ''"
-                          style="font-size: 0.85rem">{{doc.document_title}}</label></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div fxFlex="row">
-                <div fxFlex="100" class="m-gap p-gap">
-                  <div fxLayout="row" fxLayoutWrap="wrap">
-                    <div *ngFor="let doc of documentsAndFilesList">
-                      <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                        fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                        <!-- <a href="http://www.google.com" target="_blank"> -->
-                        <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;"
-                          (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                        <span class="d-block">{{doc.document_title}}</span>
-                        <!-- </a> -->
+          <ng-template matTabContent>
+              <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                  <div fxLayout="row wrap" style="padding:20px;">
+                      <div fxFlex="100">
+                          <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                              <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                  <div class="p-list">
+                                      <div class="top"> 
+                                                      <!-- Thumbnail-->
+                                                      <div class="thumbnail">
+                                                          <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                          matTooltipPosition="right">
+                                                                          <mat-icon>edit</mat-icon>
+                                                          </button>
+                                                          <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                      </div>
+                                          <label *ngIf="doc.document_title != ''"
+                                              style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                      
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                      <div fxFlex="row">
+                          <div fxFlex="100" class="m-gap p-gap">
+                              <div fxLayout="row" fxLayoutWrap="wrap">
+                                  <div *ngFor="let doc of documentsAndFilesList">
+                                      <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                          fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                          *ngIf="doc.document_type == 'pdf';">
+                                          <!-- <a href="http://www.google.com" target="_blank"> -->
+                                          <mat-icon
+                                              style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                              (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                          <span class="d-block">{{doc.document_title}}</span>
+                                          <!-- </a> -->
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
                       </div>
-                    </div>
                   </div>
-                </div>
               </div>
-            </div>
-          </div>
-          <ng-template #noFiles>
-            <mat-card-content>
-              <p style="margin: 20px;">No Files</p>
-            </mat-card-content>
+              <ng-template #noFiles>
+                  <mat-card-content>
+                      <p style="margin: 20px;">No Files</p>
+                  </mat-card-content>
+              </ng-template>
           </ng-template>
-        </ng-template>
       </mat-tab>
 
     </mat-tab-group>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.scss
index b60245ae3..c80a4d765 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.scss
@@ -10,7 +10,11 @@
 .mat-card-actions {
       background-color: white;
 }
-  
+.top .thumbnail .date {
+      position: absolute;
+      top: 4px;
+      right: -10px;
+  }
 mat-form-field {
       margin: 0 2%;
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.ts
index 55f0aaf25..3a747e542 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.ts
@@ -23,6 +23,7 @@ import {
   import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
   import { ActivatedRoute, Router } from '@angular/router';
   import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
   
 
 @Component({
@@ -58,6 +59,7 @@ export class FuturePlansAndBusinessEnvironmentComponent implements OnInit {
       private _formBuilder: FormBuilder,
       private pdTrigerService: PdTrigerService,
       private dialogRef: MatDialogRef<FuturePlansAndBusinessEnvironmentComponent>,
+      private dialog: MatDialog,
       @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
 
       this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
@@ -139,25 +141,7 @@ export class FuturePlansAndBusinessEnvironmentComponent implements OnInit {
 
       })
   
-      this.pdTrigerService.retriveFile(this.pdid,params.pd_form_id,this.company_id).subscribe(data => {
-        if (data.status == 200) {        
-            if(data.records.length>0){
-                data.records.forEach((val, index) => {
-                    let splitted = val.pd_document_name.split("."); 
-                        let DocumentsAndFiles = {
-                            'document_name': val.pd_document_name,
-                            'document_title': val.pd_document_title,
-                            'document': val.doc_url,
-                            'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                        }
-                        this.documentsAndFilesList.push(DocumentsAndFiles);
-                    });
-            }
-        }
-        else{
-            this.documentsAndFilesList = [];
-        }
-    });
+      this.retriveFile();
     }
   
     /** To Save/Edited Popup Data */
@@ -211,5 +195,42 @@ export class FuturePlansAndBusinessEnvironmentComponent implements OnInit {
           }
       });
     }
+    imageCrop(pic) {
+      // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+      pic.pdid = this.pdid;
+      const imageRef = this.dialog.open(ImageCropComponent, {
+          data: pic,
+      });
+      imageRef.afterClosed()
+          .subscribe(dataresult => {
+              if(dataresult == 1){
+                  this.documentsAndFilesList = [];
+                  this.retriveFile();
+              }
+          });
+  }
+  retriveFile(){
+    this.pdTrigerService.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+        if (data.status == 200) {
+            if (data.records.length > 0) {
+                data.records.forEach((val, index) => {
+                    let splitted = val.pd_document_name.split(".");
+                    let DocumentsAndFiles = {
+                        'document_id':val.pd_document_id,
+                        'document_name': val.pd_document_name,
+                        'document_title': val.pd_document_title,
+                        'document': val.doc_url,
+                        'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                        'is_show_report':val.is_show_report
+                    }
+                    this.documentsAndFilesList.push(DocumentsAndFiles);
+                });
+            }
+        }
+        else {
+            this.documentsAndFilesList = [];
+        }
+    });
+  }
   }
   
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
index db47f7897..a9c12196b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
@@ -13,325 +13,377 @@
             </button>
         </div>
     </h2>
+    
     <mat-dialog-content style="border-bottom: 2px solid #e2412f8f;">
-            <mat-tab-group>
-                    <mat-tab label="Questions">
-                        <ng-template matTabContent>
-        <!-- individuals  details start-->
-        <mat-card>
-            <mat-card-header>
-                <mat-card-title>Name of Person(s) Met and Individual Loan Applicant(s) </mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-                <mat-table [dataSource]="individualsSource" *ngIf="_generalForm.controls.individuals['controls'].length>0"
-                    formArrayName="individuals">
-                    <ng-container matColumnDef="applicant_name">
-                        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <input matInput placeholder="ApplicantName" formControlName="applicant_name" [value]="details.get('applicant_name').value | titlecase"
-                                autocomplete="off" (change)="ApplicantName($event,details.value.pd_co_applicant_id)">
-                            <!-- {{details.value.applicant_name | titlecase}} -->
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="is_person_met">
-                        <mat-header-cell *matHeaderCellDef> Is Person Met </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <mat-checkbox class="table-checkbox" color="primary" formControlName="is_person_met"></mat-checkbox>
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="is_applicant">
-                        <mat-header-cell *matHeaderCellDef> Is Applicant </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <mat-checkbox class="table-checkbox" color="primary" formControlName="is_applicant"></mat-checkbox>
-                            <!-- <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeIndividuals(i)"
+        <mat-tab-group>
+            <mat-tab label="Questions">
+                <ng-template matTabContent>
+                    <!-- individuals  details start-->
+                    <mat-card>
+                        <mat-card-header>
+                            <mat-card-title>Name of Person(s) Met and Individual Loan Applicant(s) </mat-card-title>
+                        </mat-card-header>
+                        <mat-card-content>
+                            <mat-table [dataSource]="individualsSource"
+                                *ngIf="_generalForm.controls.individuals['controls'].length>0"
+                                formArrayName="individuals">
+                                <ng-container matColumnDef="applicant_name">
+                                    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <input matInput placeholder="ApplicantName" formControlName="applicant_name"
+                                            [value]="details.get('applicant_name').value | titlecase" autocomplete="off"
+                                            (change)="ApplicantName($event,details.value.pd_co_applicant_id)">
+                                        <!-- {{details.value.applicant_name | titlecase}} -->
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="is_person_met">
+                                    <mat-header-cell *matHeaderCellDef> Is Person Met </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <mat-checkbox class="table-checkbox" color="primary"
+                                            formControlName="is_person_met"></mat-checkbox>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="is_applicant">
+                                    <mat-header-cell *matHeaderCellDef> Is Applicant </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <mat-checkbox class="table-checkbox" color="primary"
+                                            formControlName="is_applicant"></mat-checkbox>
+                                        <!-- <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeIndividuals(i)"
                                                                         matTooltip="Remove Individuals" matTooltipPosition="below">
                                                                             <mat-icon>delete</mat-icon>
                                                                         </button> -->
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="age">
-                        <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                                <div class="example-container">
-                                        <input matInput placeholder="Age" formControlName="age" minlength="1" maxlength="3"
-                                            OnlyNumber type="text" autocomplete="off">
-                                        <mat-error style="font-size:65%" *ngIf="details.controls['age'].invalid">Age Required</mat-error>
-                                        <!-- <mat-error style="font-size:65%" *ngIf="_generalForm.controls.individuals.value[i].qualificationdetails.controls['age'].invalid">Age Required</mat-error> -->
-                                        <!-- <mat-error style="font-size:65%" *ngIf="details.controls['age'].hasError('required')">Age Required</mat-error> -->
-                                </div>
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="qualification">
-                        <mat-header-cell *matHeaderCellDef> Qualification </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <mat-select placeholder="Qualification" formControlName="qualification" style="width: 75%;">
-                                <mat-option *ngFor="let qual of qualificationList" [value]="qual.qualification_id">{{qual.qualification_name}}</mat-option>
-                            </mat-select>
-                            <mat-error style="font-size:65%" *ngIf="details.controls['qualification'].invalid">Qualification Required</mat-error>
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="course_name">
-                        <mat-header-cell *matHeaderCellDef> </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i" [style.visibility]="_generalForm.controls.individuals.value[i].qualification == '' || _generalForm.controls.individuals.value[i].qualification == '4' || _generalForm.controls.individuals.value[i].qualification == '6'  ? 'hidden':'visible'">
-                          <span class="example-container">
-                            <input matInput placeholder="Qualification Details" formControlName="course_name"
-                                autocomplete="off">
-                            <mat-error style="font-size:65%" *ngIf="details.controls['course_name'].invalid">Qualification Details Required</mat-error>
-                          </span>
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="actions">
-                        <mat-header-cell *matHeaderCellDef> </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i =index;" [style.visibility]="_generalForm.controls.individuals.value[i].is_main_applicant == true ? 'hidden':'visible'">
-                            <!-- <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="editIndividuals(details)"
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="age">
+                                    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <div class="example-container">
+                                            <input matInput placeholder="Age" formControlName="age" minlength="1"
+                                                maxlength="3" OnlyNumber type="text" autocomplete="off">
+                                            <mat-error style="font-size:65%" *ngIf="details.controls['age'].invalid">Age
+                                                Required</mat-error>
+                                            <!-- <mat-error style="font-size:65%" *ngIf="_generalForm.controls.individuals.value[i].qualificationdetails.controls['age'].invalid">Age Required</mat-error> -->
+                                            <!-- <mat-error style="font-size:65%" *ngIf="details.controls['age'].hasError('required')">Age Required</mat-error> -->
+                                        </div>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="qualification">
+                                    <mat-header-cell *matHeaderCellDef> Qualification </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <mat-select placeholder="Qualification" formControlName="qualification"
+                                            style="width: 75%;">
+                                            <mat-option *ngFor="let qual of qualificationList"
+                                                [value]="qual.qualification_id">{{qual.qualification_name}}</mat-option>
+                                        </mat-select>
+                                        <mat-error style="font-size:65%"
+                                            *ngIf="details.controls['qualification'].invalid">Qualification Required
+                                        </mat-error>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="course_name">
+                                    <mat-header-cell *matHeaderCellDef> </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i"
+                                        [style.visibility]="_generalForm.controls.individuals.value[i].qualification == '' || _generalForm.controls.individuals.value[i].qualification == '4' || _generalForm.controls.individuals.value[i].qualification == '6'  ? 'hidden':'visible'">
+                                        <span class="example-container">
+                                            <input matInput placeholder="Qualification Details"
+                                                formControlName="course_name" autocomplete="off">
+                                            <mat-error style="font-size:65%"
+                                                *ngIf="details.controls['course_name'].invalid">Qualification Details
+                                                Required</mat-error>
+                                        </span>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="actions">
+                                    <mat-header-cell *matHeaderCellDef> </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i =index;"
+                                        [style.visibility]="_generalForm.controls.individuals.value[i].is_main_applicant == true ? 'hidden':'visible'">
+                                        <!-- <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="editIndividuals(details)"
                                        matTooltip="Edit " matTooltipPosition="below">
                                        <mat-icon>edit</mat-icon>
                                 </button> -->
-                            <button type="button" class="mr-1 hover-icon" mat-raised-button mat-icon-button
-                                (click)="removeIndividuals(i,details)" matTooltip="Remove Individuals"
-                                matTooltipPosition="below">
-                                <mat-icon>delete</mat-icon>
-                            </button>
+                                        <button type="button" class="mr-1 hover-icon" mat-raised-button mat-icon-button
+                                            (click)="removeIndividuals(i,details)" matTooltip="Remove Individuals"
+                                            matTooltipPosition="below">
+                                            <mat-icon>delete</mat-icon>
+                                        </button>
                                         <div *ngIf="_generalForm.controls.individuals.value[i].is_person_met_pic ">
-                                          <img mat-card-avatar  src="{{_generalForm.controls.individuals.value[i].is_person_met_pic}}" class="ml-0 mt-0 mb-0 mr-2 " ngxViewer>
+                                            <img mat-card-avatar
+                                                src="{{_generalForm.controls.individuals.value[i].is_person_met_pic}}"
+                                                class="ml-0 mt-0 mb-0 mr-2 " ngxViewer>
                                         </div>
                                         <div *ngIf="_generalForm.controls.individuals.value[i].is_person_met_id_proof ">
-                                          <img mat-card-avatar  src="{{_generalForm.controls.individuals.value[i].is_person_met_id_proof}}" class="ml-0 mt-0 mb-0 mr-2 " ngxViewer>
+                                            <img mat-card-avatar
+                                                src="{{_generalForm.controls.individuals.value[i].is_person_met_id_proof}}"
+                                                class="ml-0 mt-0 mb-0 mr-2 " ngxViewer>
                                         </div>
-                        </mat-cell>
-                    </ng-container>
-                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-                    <mat-row *matRowDef="let row; columns: displayedColumns;">
-                    </mat-row>
-                </mat-table>
+                                    </mat-cell>
+                                </ng-container>
+                                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+                                <mat-row *matRowDef="let row; columns: displayedColumns;">
+                                </mat-row>
+                            </mat-table>
 
-            </mat-card-content>
-            <mat-card-actions align="center">
-                <button type="button" mat-flat-button (click)="addMoreIndividuals()" matTooltip="Add More"
-                    matTooltipPosition="left" color="primary">
-                    <strong>Add More Person(s) </strong>
-                </button>
-            </mat-card-actions>
-        </mat-card>
-        <!-- end -->
+                        </mat-card-content>
+                        <mat-card-actions align="center">
+                            <button type="button" mat-flat-button (click)="addMoreIndividuals()" matTooltip="Add More"
+                                matTooltipPosition="left" color="primary">
+                                <strong>Add More Person(s) </strong>
+                            </button>
+                        </mat-card-actions>
+                    </mat-card>
+                    <!-- end -->
 
-        <!-- RI month and year start-->
-        <mat-card *ngIf="customer_segment_abbr == 'SE-RI'">
-            <mat-card-title>Number of Years for which rental income is being received</mat-card-title>
-            <mat-form-field style="width: 20%;">
-                <mat-label>Year</mat-label>
-                <input matInput placeholder="No of years (Eg. 10)" formControlName="rental_income_rcv_in_years" autocomplete="off"
-                    OnlyNumber type="text" required>
-                <mat-error *ngIf="_generalForm.controls['rental_income_rcv_in_years'].invalid">Please Enter Correct Year</mat-error>
-                <!-- <mat-error>Please Enter Correct Year</mat-error> -->
-            </mat-form-field>
-            <mat-form-field style="width: 20%;">
-                <mat-label>Month</mat-label>
-                <input matInput type="text" placeholder="No of months (Eg. 6)" formControlName="rental_income_rcv_in_month"
-                    autocomplete="off" OnlyNumber type="text" (change)="ConvertMonthintoYearforBusiness($event.target.value,'',2)">
-            </mat-form-field>
-        </mat-card>
-        <!-- RI month and year ends-->
+                    <!-- RI month and year start-->
+                    <mat-card *ngIf="customer_segment_abbr == 'SE-RI'">
+                        <mat-card-title>Number of Years for which rental income is being received</mat-card-title>
+                        <mat-form-field style="width: 20%;">
+                            <mat-label>Year</mat-label>
+                            <input matInput placeholder="No of years (Eg. 10)"
+                                formControlName="rental_income_rcv_in_years" autocomplete="off" OnlyNumber type="text"
+                                required>
+                            <mat-error *ngIf="_generalForm.controls['rental_income_rcv_in_years'].invalid">Please Enter
+                                Correct Year</mat-error>
+                            <!-- <mat-error>Please Enter Correct Year</mat-error> -->
+                        </mat-form-field>
+                        <mat-form-field style="width: 20%;">
+                            <mat-label>Month</mat-label>
+                            <input matInput type="text" placeholder="No of months (Eg. 6)"
+                                formControlName="rental_income_rcv_in_month" autocomplete="off" OnlyNumber type="text"
+                                (change)="ConvertMonthintoYearforBusiness($event.target.value,'',2)">
+                        </mat-form-field>
+                    </mat-card>
+                    <!-- RI month and year ends-->
 
-        <!-- companies start -->
-        <mat-card *ngIf="customer_segment_abbr != 'SE-RI'">
-            <mat-card-header>
-                <mat-card-title>Company/Firm</mat-card-title>
-            </mat-card-header>
-            <mat-card-content formArrayName="companies">
-                <div *ngFor="let com of _generalForm.controls.companies['controls']; let c = index;" [formGroupName]="c">
-                    <mat-card *ngIf="com.value.is_active==true">
-                        <mat-card-content>
-                            <mat-form-field style="width: 50%">
-                                <input matInput placeholder="Company/Firm" formControlName="company_name" type="text">
-                            </mat-form-field>
-                            <mat-checkbox class="table-checkbox-com" color="primary" formControlName="is_company_applicant">
-                                Is Applicant</mat-checkbox>
+                    <!-- companies start -->
+                    <mat-card *ngIf="customer_segment_abbr != 'SE-RI'">
+                        <mat-card-header>
+                            <mat-card-title>Company/Firm</mat-card-title>
+                        </mat-card-header>
+                        <mat-card-content formArrayName="companies">
+                            <div *ngFor="let com of _generalForm.controls.companies['controls']; let c = index;"
+                                [formGroupName]="c">
+                                <mat-card *ngIf="com.value.is_active==true">
+                                    <mat-card-content>
+                                        <mat-form-field style="width: 50%">
+                                            <input matInput placeholder="Company/Firm" formControlName="company_name"
+                                                type="text">
+                                        </mat-form-field>
+                                        <mat-checkbox class="table-checkbox-com" color="primary"
+                                            formControlName="is_company_applicant">
+                                            Is Applicant</mat-checkbox>
 
-                            <mat-form-field style="width: 45%;">
-                                <mat-select placeholder="Business Entity Type" formControlName="business_entity_type"
-                                    (selectionChange)="checkEntityType(com.value.business_entity_type,c)" required>
-                                    <mat-option>Select</mat-option>
-                                    <mat-option [value]="entity.business_entity_type_id" *ngFor="let entity of businessEntityTypeList">{{entity.business_entity_type_name}}</mat-option>
-                                </mat-select>
-                                <mat-error *ngIf="com.controls['business_entity_type'].invalid">Business Entity Type Required</mat-error>
-                            </mat-form-field>
-                            <mat-form-field style="width: 45%;" *ngIf="com.controls.business_entity_type_other">
-                                <input matInput placeholder="Please Specify Others" formControlName="business_entity_type_other"
-                                    required>
-                                <mat-error *ngIf="com.controls['business_entity_type_other'].invalid">Please Specify Others Required</mat-error>
-                            </mat-form-field>
+                                        <mat-form-field style="width: 45%;">
+                                            <mat-select placeholder="Business Entity Type"
+                                                formControlName="business_entity_type"
+                                                (selectionChange)="checkEntityType(com.value.business_entity_type,c)"
+                                                required>
+                                                <mat-option>Select</mat-option>
+                                                <mat-option [value]="entity.business_entity_type_id"
+                                                    *ngFor="let entity of businessEntityTypeList">
+                                                    {{entity.business_entity_type_name}}</mat-option>
+                                            </mat-select>
+                                            <mat-error *ngIf="com.controls['business_entity_type'].invalid">Business
+                                                Entity Type Required</mat-error>
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 45%;"
+                                            *ngIf="com.controls.business_entity_type_other">
+                                            <input matInput placeholder="Please Specify Others"
+                                                formControlName="business_entity_type_other" required>
+                                            <mat-error *ngIf="com.controls['business_entity_type_other'].invalid">Please
+                                                Specify Others Required</mat-error>
+                                        </mat-form-field>
 
-                            <p>Number of Years For Which The Business Has Been Running</p>
-                            <mat-form-field style="width: 20%;"><mat-label>Year</mat-label>
-                                <input matInput placeholder="No of years (Eg. 10)" formControlName="business_years" autocomplete="off"
-                                    OnlyNumber type="text" required>
-                                <mat-error *ngIf="com.controls['business_years'].invalid">Please Enter Correct Year</mat-error>
-                            </mat-form-field>
-                            <mat-form-field style="width: 20%;">
-                                    <mat-label>Month</mat-label>
-                                    <input matInput type="text" placeholder="No of months (Eg. 6)" formControlName="business_month"
-                                    autocomplete="off" OnlyNumber type="text" (change)="ConvertMonthintoYearforBusiness($event.target.value,c,1)">
-                            </mat-form-field>
-                            <mat-form-field style="width: 40%;">
-                                <input matInput [max]="maxDate" [matDatepicker]="picker" formControlName="business_date_object"
-                                    (dateChange)="getDateObjects($event.target.value,c)" placeholder="Enter Date of Formation, If Available">
-                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                                <mat-datepicker #picker></mat-datepicker>
-                            </mat-form-field>
+                                        <p>Number of Years For Which The Business Has Been Running</p>
+                                        <mat-form-field style="width: 20%;">
+                                            <mat-label>Year</mat-label>
+                                            <input matInput placeholder="No of years (Eg. 10)"
+                                                formControlName="business_years" autocomplete="off" OnlyNumber
+                                                type="text" required>
+                                            <mat-error *ngIf="com.controls['business_years'].invalid">Please Enter
+                                                Correct Year</mat-error>
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 20%;">
+                                            <mat-label>Month</mat-label>
+                                            <input matInput type="text" placeholder="No of months (Eg. 6)"
+                                                formControlName="business_month" autocomplete="off" OnlyNumber
+                                                type="text"
+                                                (change)="ConvertMonthintoYearforBusiness($event.target.value,c,1)">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 40%;">
+                                            <input matInput [max]="maxDate" [matDatepicker]="picker"
+                                                formControlName="business_date_object"
+                                                (dateChange)="getDateObjects($event.target.value,c)"
+                                                placeholder="Enter Date of Formation, If Available">
+                                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                            <mat-datepicker #picker></mat-datepicker>
+                                        </mat-form-field>
 
-                            <div fxLayout="row nowrap" [style.display]="'block'">
-                                <div align="right">
-                                    <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button
-                                        mat-icon-button (click)="removeCompanies(c)" *ngIf="com.value.is_active==true"
-                                        matTooltip="Remove Company/Firm" matTooltipPosition="above">
-                                        <mat-icon>delete</mat-icon>
-                                    </button>
-                                </div>
+                                        <div fxLayout="row nowrap" [style.display]="'block'">
+                                            <div align="right">
+                                                <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button
+                                                    mat-icon-button (click)="removeCompanies(c)"
+                                                    *ngIf="com.value.is_active==true" matTooltip="Remove Company/Firm"
+                                                    matTooltipPosition="above">
+                                                    <mat-icon>delete</mat-icon>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </mat-card-content>
+                                </mat-card>
                             </div>
                         </mat-card-content>
+                        <mat-card-actions align="center">
+                            <button mat-flat-button type="button" matTooltip="Add More" matTooltipPosition="above"
+                                color="primary" (click)="addMoreCompanies()"><strong>Add More
+                                    Company/Firm</strong></button>
+
+                        </mat-card-actions>
                     </mat-card>
-                </div>
-            </mat-card-content>
-            <mat-card-actions align="center">
-                <button mat-flat-button type="button" matTooltip="Add More" matTooltipPosition="above" color="primary"
-                    (click)="addMoreCompanies()"><strong>Add More Company/Firm</strong></button>
 
-            </mat-card-actions>
-        </mat-card>
+                    <!-- companies end -->
 
-        <!-- companies end -->
-
-        <!-- Person Relationship Starts Here -->
-        <mat-card *ngIf="_generalForm.controls.persons_with_relationships['controls'].length > 1">
-            <mat-card-header>
-                <mat-card-title> Relationship Between Individuals </mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-                <mat-table [dataSource]="relationSource" formArrayName="persons_with_relationships">
-                    <ng-container matColumnDef="applicant_name">
-                        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <!-- {{details.value | json}} -->
-                            <!-- <input type="hidden" [value]="delivery_extry" /> -->
-                            {{details.value.applicant_name | titlecase}}
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="relation">
-                        <mat-header-cell *matHeaderCellDef> Relation </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <mat-select placeholder="Relation" formControlName="relationship" style="width: 75%;"
-                                (selectionChange)="updatePersonalRelation(i)">
-                                <mat-option>Select</mat-option>
-                                <mat-option [value]="member.relationship_id" *ngFor="let member of relationShipList">{{member.name
+                    <!-- Person Relationship Starts Here -->
+                    <mat-card *ngIf="_generalForm.controls.persons_with_relationships['controls'].length > 1">
+                        <mat-card-header>
+                            <mat-card-title> Relationship Between Individuals </mat-card-title>
+                        </mat-card-header>
+                        <mat-card-content>
+                            <mat-table [dataSource]="relationSource" formArrayName="persons_with_relationships">
+                                <ng-container matColumnDef="applicant_name">
+                                    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <!-- {{details.value | json}} -->
+                                        <!-- <input type="hidden" [value]="delivery_extry" /> -->
+                                        {{details.value.applicant_name | titlecase}}
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="relation">
+                                    <mat-header-cell *matHeaderCellDef> Relation </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <mat-select placeholder="Relation" formControlName="relationship"
+                                            style="width: 75%;" (selectionChange)="updatePersonalRelation(i)">
+                                            <mat-option>Select</mat-option>
+                                            <mat-option [value]="member.relationship_id"
+                                                *ngFor="let member of relationShipList">{{member.name
                                     + ' of' | titlecase}}</mat-option>
-                                <mat-option value="0"> Not Applicable </mat-option>
-                            </mat-select>
+                                            <mat-option value="0"> Not Applicable </mat-option>
+                                        </mat-select>
 
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="relation_to">
-                        <mat-header-cell *matHeaderCellDef> Relationship To </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i" [style.visibility]="_generalForm.controls.persons_with_relationships.value[i].relationship==0 ? 'hidden':'visible'">
-                            <mat-select placeholder="Applicant" formControlName="relation_to" style="width: 75%;"
-                                [disabled]="_generalForm.controls.persons_with_relationships.value[i].relationship==0">
-                                <mat-option>Select</mat-option>
-                                <!-- getRelationRestrict(_generalForm.controls.persons_with_relationships.value[i].pd_co_applicant_id,_generalForm.controls.persons_with_relationships.value,individualsList)" -->
-                                <mat-option *ngFor="let appc of individualsList | searchRelation : { currentApplicantID:_generalForm.controls.persons_with_relationships.value[i].pd_co_applicant_id, existRelationList:_generalForm.controls.persons_with_relationships.value}"
-                                    [value]="appc.pd_co_applicant_id">{{appc.applicant_name | titlecase}}</mat-option>
-                                <mat-option value="0"> Not Applicable </mat-option>
-                            </mat-select>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="relation_to">
+                                    <mat-header-cell *matHeaderCellDef> Relationship To </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i"
+                                        [style.visibility]="_generalForm.controls.persons_with_relationships.value[i].relationship==0 ? 'hidden':'visible'">
+                                        <mat-select placeholder="Applicant" formControlName="relation_to"
+                                            style="width: 75%;"
+                                            [disabled]="_generalForm.controls.persons_with_relationships.value[i].relationship==0">
+                                            <mat-option>Select</mat-option>
+                                            <!-- getRelationRestrict(_generalForm.controls.persons_with_relationships.value[i].pd_co_applicant_id,_generalForm.controls.persons_with_relationships.value,individualsList)" -->
+                                            <mat-option
+                                                *ngFor="let appc of individualsList | searchRelation : { currentApplicantID:_generalForm.controls.persons_with_relationships.value[i].pd_co_applicant_id, existRelationList:_generalForm.controls.persons_with_relationships.value}"
+                                                [value]="appc.pd_co_applicant_id">{{appc.applicant_name | titlecase}}
+                                            </mat-option>
+                                            <mat-option value="0"> Not Applicable </mat-option>
+                                        </mat-select>
 
-                        </mat-cell>
-                    </ng-container>
+                                    </mat-cell>
+                                </ng-container>
 
-                    <mat-header-row *matHeaderRowDef="secondDisplayedColumns"></mat-header-row>
-                    <mat-row *matRowDef="let row; columns: secondDisplayedColumns;"></mat-row>
+                                <mat-header-row *matHeaderRowDef="secondDisplayedColumns"></mat-header-row>
+                                <mat-row *matRowDef="let row; columns: secondDisplayedColumns;"></mat-row>
 
-                </mat-table>
-            </mat-card-content>
-        </mat-card>
-        <!-- Person Relationship Ends Here -->
+                            </mat-table>
+                        </mat-card-content>
+                    </mat-card>
+                    <!-- Person Relationship Ends Here -->
 
-        <!-- company Relationship Start Here -->
-        <mat-card *ngIf="customer_segment_abbr != 'SE-RI'">
-            <mat-card-header>
+                    <!-- company Relationship Start Here -->
+                    <mat-card *ngIf="customer_segment_abbr != 'SE-RI'">
+                        <mat-card-header>
 
-                <mat-card-title> Relationship of Individuals to Company / Firm </mat-card-title>
+                            <mat-card-title> Relationship of Individuals to Company / Firm </mat-card-title>
 
-            </mat-card-header>
-            <mat-card-content>
+                        </mat-card-header>
+                        <mat-card-content>
 
 
-                <mat-table [dataSource]="CompanySource" *ngIf="_generalForm.controls.company_with_relationships['controls'].length>0"
-                    formArrayName="company_with_relationships">
+                            <mat-table [dataSource]="CompanySource"
+                                *ngIf="_generalForm.controls.company_with_relationships['controls'].length>0"
+                                formArrayName="company_with_relationships">
 
-                    <ng-container matColumnDef="applicant_name">
-                        <mat-header-cell *matHeaderCellDef> Applicant </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                <ng-container matColumnDef="applicant_name">
+                                    <mat-header-cell *matHeaderCellDef> Applicant </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
 
-                            <mat-select placeholder="Applicant" formControlName="applicant_name" style="width: 75%;">
-                                <mat-option *ngFor="let bothC of individualsListBothCase" [value]="bothC.pd_co_applicant_id">{{bothC.applicant_name
+                                        <mat-select placeholder="Applicant" formControlName="applicant_name"
+                                            style="width: 75%;">
+                                            <mat-option *ngFor="let bothC of individualsListBothCase"
+                                                [value]="bothC.pd_co_applicant_id">{{bothC.applicant_name
                                     | titlecase}}</mat-option>
-                            </mat-select>
+                                        </mat-select>
 
-                        </mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="company_relationship">
-                        <mat-header-cell *matHeaderCellDef> Relation </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
-                            <mat-select placeholder="Relation" formControlName="company_relationship" style="width: 75%;"
-                                (selectionChange)="updateCompanyRelation(i)">
-                                <mat-option>Select</mat-option>
-                                <mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id">
-                                    {{comrelShip.name | titlecase}}
-                                </mat-option>
-                                <mat-option value="0"> Not Applicable </mat-option>
-                            </mat-select>
-                        </mat-cell>
-                    </ng-container>
+                                    </mat-cell>
+                                </ng-container>
+                                <ng-container matColumnDef="company_relationship">
+                                    <mat-header-cell *matHeaderCellDef> Relation </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                        <mat-select placeholder="Relation" formControlName="company_relationship"
+                                            style="width: 75%;" (selectionChange)="updateCompanyRelation(i)">
+                                            <mat-option>Select</mat-option>
+                                            <mat-option *ngFor="let comrelShip of companyRelationShipList"
+                                                [value]="comrelShip.company_relationship_id">
+                                                {{comrelShip.name | titlecase}}
+                                            </mat-option>
+                                            <mat-option value="0"> Not Applicable </mat-option>
+                                        </mat-select>
+                                    </mat-cell>
+                                </ng-container>
 
-                    <ng-container matColumnDef="relation_to_company">
-                        <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
-                        <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
+                                <ng-container matColumnDef="relation_to_company">
+                                    <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
+                                    <mat-cell *matCellDef="let details;let i = index;" [formGroupName]="i">
 
-                            <mat-select placeholder="Company / Firm" formControlName="relation_to_company" style="width: 75%;"
-                                [style.visibility]="_generalForm.controls.company_with_relationships.value[i].company_relationship==0 ? 'hidden':'visible'">
-                                <mat-option>Select</mat-option>
-                                <mat-option *ngFor="let comp of companyList" [value]="comp.company_order_id">
-                                    {{comp.company_name}}
-                                </mat-option>
-                                <mat-option value="0"> Not Applicable </mat-option>
-                            </mat-select>
+                                        <mat-select placeholder="Company / Firm" formControlName="relation_to_company"
+                                            style="width: 75%;"
+                                            [style.visibility]="_generalForm.controls.company_with_relationships.value[i].company_relationship==0 ? 'hidden':'visible'">
+                                            <mat-option>Select</mat-option>
+                                            <mat-option *ngFor="let comp of companyList"
+                                                [value]="comp.company_order_id">
+                                                {{comp.company_name}}
+                                            </mat-option>
+                                            <mat-option value="0"> Not Applicable </mat-option>
+                                        </mat-select>
 
-                            <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button
-                                (click)="removeCompanyRelationship(i)" matTooltip="Remove Company Relationship"
-                                matTooltipPosition="below">
-                                <mat-icon>delete</mat-icon>
+                                        <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button
+                                            mat-icon-button (click)="removeCompanyRelationship(i)"
+                                            matTooltip="Remove Company Relationship" matTooltipPosition="below">
+                                            <mat-icon>delete</mat-icon>
+                                        </button>
+                                    </mat-cell>
+                                </ng-container>
+
+
+                                <mat-header-row *matHeaderRowDef="thridDisplayedColumns"></mat-header-row>
+                                <mat-row *matRowDef="let row; columns: thridDisplayedColumns;">
+                                </mat-row>
+                            </mat-table>
+
+                        </mat-card-content>
+                        <mat-card-actions align="center">
+                            <button type="button" mat-flat-button (click)="addCompanyRelationshipDialogue()"
+                                matTooltip="Add More" matTooltipPosition="left" color="primary">
+                                <span
+                                    *ngIf="_generalForm.controls.company_with_relationships['controls'].length == 0;else another;">
+                                    <strong>Add Company Relationship</strong>
+                                </span>
+                                <ng-template #another><strong>Add More Company Relationship</strong></ng-template>
                             </button>
-                        </mat-cell>
-                    </ng-container>
+                        </mat-card-actions>
+                    </mat-card>
+                    <!-- Company RelationShip Ends Here -->
 
-
-                    <mat-header-row *matHeaderRowDef="thridDisplayedColumns"></mat-header-row>
-                    <mat-row *matRowDef="let row; columns: thridDisplayedColumns;">
-                    </mat-row>
-                </mat-table>
-
-            </mat-card-content>
-            <mat-card-actions align="center">
-                <button type="button" mat-flat-button (click)="addCompanyRelationshipDialogue()" matTooltip="Add More"
-                    matTooltipPosition="left" color="primary">
-                    <span *ngIf="_generalForm.controls.company_with_relationships['controls'].length == 0;else another;">
-                        <strong>Add Company Relationship</strong>
-                    </span>
-                    <ng-template #another><strong>Add More Company Relationship</strong></ng-template>
-                </button>
-            </mat-card-actions>
-        </mat-card>
-        <!-- Company RelationShip Ends Here -->
-
-        <!-- -- <div fxLayout="row wrap" formArrayName="applicant_relation">
+                    <!-- -- <div fxLayout="row wrap" formArrayName="applicant_relation">
                       <div fxFlex.xs="100"  fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" *ngFor="let relation of _generalForm.controls.applicant_relation['controls']; let r = index;" [formGroupName]="r">
                           <mat-card >
                               <mat-card-header>
@@ -371,7 +423,7 @@
                                             
                                       </div>
                                         </div>-->
-        <!-- -- <p>Company/Firm Relationship</p>
+                    <!-- -- <p>Company/Firm Relationship</p>
                                         <div formArrayName="multiple_company_relation">
                                                 <div fxLayout="row nowrap" *ngFor="let comRel of relation.get('multiple_company_relation').controls; let c = index" [formGroupName]="c">
                                                     <mat-form-field style="width: 40%">
@@ -405,46 +457,62 @@
                       </div>
                     </div> -->
                 </ng-template>
-                    </mat-tab>
-                    <mat-tab label="Docs">
-                        <ng-template matTabContent>
-                          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                            <div fxLayout="row wrap" style="padding:20px;">
-                                <div fxFlex="100">
-                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                        <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                            <div class="p-list">
-                                                <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}" style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+            </mat-tab>
+            <mat-tab label="Docs">
+                <ng-template matTabContent>
+                    <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                        <div fxLayout="row wrap" style="padding:20px;">
+                            <div fxFlex="100">
+                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                    <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                        <div class="p-list">
+                                            <div class="top">
+                                                <!-- Thumbnail-->
+                                                <div class="thumbnail">
+                                                    <button mat-raised-button mat-icon-button
+                                                        class="date mr-1 mb-1 hover-icon" type="button"
+                                                        matTooltip="edit" (click)="imageCrop(doc)"
+                                                        matTooltipPosition="right">
+                                                        <mat-icon>edit</mat-icon>
+                                                    </button>
+                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                </div>
+                                                <label *ngIf="doc.document_title != ''"
+                                                    style="font-size: 0.85rem">{{doc.document_title}}</label>
                                             </div>
+
                                         </div>
                                     </div>
                                 </div>
-                                <div fxFlex="row">
-                                    <div fxFlex="100" class="m-gap p-gap">
-                                        <div fxLayout="row" fxLayoutWrap="wrap">
-                                            <div *ngFor="let doc of documentsAndFilesList">
-                                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                                fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
+                            </div>
+                            <div fxFlex="row">
+                                <div fxFlex="100" class="m-gap p-gap">
+                                    <div fxLayout="row" fxLayoutWrap="wrap">
+                                        <div *ngFor="let doc of documentsAndFilesList">
+                                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                *ngIf="doc.document_type == 'pdf';">
                                                 <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                    <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                <mat-icon
+                                                    style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                    (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                <span class="d-block">{{doc.document_title}}</span>
                                                 <!-- </a> -->
                                             </div>
-                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                          </div>
-                            <ng-template #noFiles>
-                                    <mat-card-content>
-                                      <p style="margin: 20px;">No Files</p>
-                                    </mat-card-content>
-                            </ng-template> 
-                        </ng-template>
-                    </mat-tab>
-            </mat-tab-group>
+                        </div>
+                    </div>
+                    <ng-template #noFiles>
+                        <mat-card-content>
+                            <p style="margin: 20px;">No Files</p>
+                        </mat-card-content>
+                    </ng-template>
+                </ng-template>
+            </mat-tab>
+        </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions>
         <div fxFlex="60" class="pb-0 text-sm-left" align="left">
@@ -455,7 +523,8 @@
         </div>
         <div fxFlex="40" align="end">
             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Save"
-                matTooltipPosition="above" [disabled]="disableAfterSubmit===true" (click)="submitGeneralForm(_generalForm.value)">
+                matTooltipPosition="above" [disabled]="disableAfterSubmit===true"
+                (click)="submitGeneralForm(_generalForm.value)">
                 <mat-icon>save</mat-icon>
             </button>
         </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.scss
index e018e750d..1ebaa5c54 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.scss
@@ -12,7 +12,11 @@
   mat-form-field {
     margin: 0 2%;
   }
-
+  .top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
   .example-container {
     // display: flex;
     flex-direction: column;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.ts
index 11e29a363..3e956a938 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.ts
@@ -6,7 +6,7 @@ import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
 import { OtherApplicantDetailsComponent } from './../dialogue/other-applicant-details/other-applicant-details.component';
 import { element } from '@angular/core/src/render3/instructions';
 import { ELEMENT_PROBE_PROVIDERS } from '@angular/platform-browser/src/dom/debug/ng_probe';
-import { DatePipe,TitleCasePipe } from '@angular/common';
+import { DatePipe, TitleCasePipe } from '@angular/common';
 import { SearchRelationPipe } from './../../../../../pd-pipes/search-relation.pipe';
 import { Options } from 'selenium-webdriver/edge';
 import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
@@ -16,10 +16,31 @@ import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component'
   selector: 'app-general-info',
   templateUrl: './general-info.component.html',
   styleUrls: ['./general-info.component.scss'],
-  providers: [SearchRelationPipe,TitleCasePipe],
+  providers: [SearchRelationPipe, TitleCasePipe],
 })
+
 export class GeneralInfoComponent implements OnInit {
 
+  public viewerOptions: any = {
+    navbar: false,
+    toolbar: {
+      zoomIn: 4,
+      zoomOut: 4,
+      oneToOne: 4,
+      reset: 4,
+      prev: 4,
+      play: {
+        show: 4,
+        size: 'large',
+      },
+      next: 4,
+      rotateLeft: 4,
+      rotateRight: 4,
+      flipHorizontal: 4,
+      flipVertical: 4,
+    }
+  };
+
   /* Declaration for Header Variables */
   pageTitle: string = "General Information";
 
@@ -30,7 +51,7 @@ export class GeneralInfoComponent implements OnInit {
 
   /* Declaration for Common Variables */
   pipe = new DatePipe('en-US');
-  
+
   parent_pdid: string;
   pdid: string;
   form_id: number;
@@ -65,7 +86,7 @@ export class GeneralInfoComponent implements OnInit {
   /********************** Declaration Section Ends Here *****************/
 
   /** Constructor Section */
-  constructor(notifier: NotifierService, private _fb: FormBuilder, private _pd: PdTrigerService, private dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public pd_all_details: any, private dialogRef: MatDialogRef<GeneralInfoComponent>,private titleCase:TitleCasePipe,private imageRef: MatDialogRef<ImageCropComponent>) {
+  constructor(notifier: NotifierService, private _fb: FormBuilder, private _pd: PdTrigerService, private dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public pd_all_details: any, private dialogRef: MatDialogRef<GeneralInfoComponent>, private titleCase: TitleCasePipe, private imageRef: MatDialogRef<ImageCropComponent>) {
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
     this.notifier = notifier;
@@ -82,7 +103,7 @@ export class GeneralInfoComponent implements OnInit {
   /** ng Oninit Section */
   ngOnInit() {
     let get_max_date = this.pd_all_details.pdmaster_details.pd_date_of_initiation ? this.pd_all_details.pdmaster_details.pd_date_of_initiation.split('/').reverse().join("/") : '';
-    this.maxDate = get_max_date  ? new Date(get_max_date) : new Date();
+    this.maxDate = get_max_date ? new Date(get_max_date) : new Date();
     this.initFormDetails();
     this.getMasterDetails('RELATIONSHIPS', 1);
     this.getMasterDetails('COMPANYRELATIONSHIPS', 2);
@@ -115,27 +136,8 @@ export class GeneralInfoComponent implements OnInit {
       this.CompanySource.data = ComapnyControl.controls;
     });
 
-    this._pd.retriveFile(this.pdid,'18',null).subscribe(data => {
-      
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
-}
+    this.retriveFile();
+  }
   /***************************** ng Oninit Section Ends Here **********************************/
 
   /**  init form */
@@ -231,7 +233,7 @@ export class GeneralInfoComponent implements OnInit {
         if (exist_personsWithRelationships.length > 0) {
           exist_personsWithRelationships.forEach((element, index) => {
             //individualsControl.push(this.createIndividulas(element))
-            personsWithRelationshipsControl.push(this.createPersonsWithRelationships(element,index));
+            personsWithRelationshipsControl.push(this.createPersonsWithRelationships(element, index));
           });
         }
         if (this.customer_segment_abbr != 'SE-RI') {
@@ -241,7 +243,7 @@ export class GeneralInfoComponent implements OnInit {
           if (exist_companyWithRelationships.length > 0) {
             exist_companyWithRelationships.forEach(element => {
               //individualsControl.push(this.createIndividulas(element))
-              console.log('elementValue.applicant_name',element);
+              console.log('elementValue.applicant_name', element);
               companyWithRelationshipsControl.push(this.createCompaniesRelationshipWithData(element));
             });
           }
@@ -317,7 +319,7 @@ export class GeneralInfoComponent implements OnInit {
             element.qualification = '',
             element.course_name = '',
             individualsControl.push(this.createIndividulas(element));
-          personsWithRelationshipsControl.push(this.createPersonsWithRelationships(element,key));
+          personsWithRelationshipsControl.push(this.createPersonsWithRelationships(element, key));
 
           //let relationControl = <FormArray>this._generalForm.controls['applicant_relation'];
           // let applicant_details: any= {'pd_co_applicant_id':element.pd_co_applicant_id,'applicant_name':element.applicant_name, 'individula_order_id':relationControl.controls.length+1};
@@ -329,14 +331,14 @@ export class GeneralInfoComponent implements OnInit {
 
           // create companies
           if (element.company_name != '' && element.company_name != null) {
-            let setCompanyValues: any = { company_order_id: companyControl.controls.length + 1, company_name: element.company_name, is_company_applicant: element.is_company_applicant, business_entity_type: element.business_entity_type, business_entity_type_other: element.business_entity_type_other, business_years: element.business_years, business_month: element.business_month, business_date_object: element.business_date_object, is_new: element.is_new, is_active: true, associate_pd_id:this.pdid }
+            let setCompanyValues: any = { company_order_id: companyControl.controls.length + 1, company_name: element.company_name, is_company_applicant: element.is_company_applicant, business_entity_type: element.business_entity_type, business_entity_type_other: element.business_entity_type_other, business_years: element.business_years, business_month: element.business_month, business_date_object: element.business_date_object, is_new: element.is_new, is_active: true, associate_pd_id: this.pdid }
             companyControl.push(this.createCompanies(setCompanyValues))
           }
         });
         companyWithRelationshipsControl.push(this.createCompaniesRelationship());
         // check company if null update one row
         if (companyControl.controls.length == 0) {
-          let setCompanyValues: any = { company_order_id: companyControl.controls.length + 1, company_name: '', is_company_applicant: false, business_entity_type: '', business_entity_type_other: '', business_years: '', business_month: '', business_date_object: '', is_active: true, is_new: false, associate_pd_id:this.pdid}
+          let setCompanyValues: any = { company_order_id: companyControl.controls.length + 1, company_name: '', is_company_applicant: false, business_entity_type: '', business_entity_type_other: '', business_years: '', business_month: '', business_date_object: '', is_active: true, is_new: false, associate_pd_id: this.pdid }
           companyControl.push(this.createCompanies(setCompanyValues))
 
         }
@@ -355,8 +357,8 @@ export class GeneralInfoComponent implements OnInit {
       applicant_name: [this.titleCase.transform(elementValue.applicant_name)],
       is_applicant: [elementValue.is_applicant],
       is_person_met: [elementValue.is_person_met],
-      is_person_met_pic :[elementValue.is_person_met_pic],
-      is_person_met_id_proof : [elementValue.is_person_met_id_proof],
+      is_person_met_pic: [elementValue.is_person_met_pic],
+      is_person_met_id_proof: [elementValue.is_person_met_id_proof],
       is_new: [elementValue.is_new],
       is_main_applicant: [elementValue.is_main_applicant],
       is_active: [elementValue.is_active],
@@ -367,8 +369,8 @@ export class GeneralInfoComponent implements OnInit {
     });
   }
 
-  createPersonsWithRelationships(elementValue: any,indexVal:number) {
-    console.log('elementValue.applicant_name',elementValue.applicant_name);
+  createPersonsWithRelationships(elementValue: any, indexVal: number) {
+    console.log('elementValue.applicant_name', elementValue.applicant_name);
     return this._fb.group({
       pd_co_applicant_id: [elementValue.pd_co_applicant_id],
       applicant_name: [this.titleCase.transform(elementValue.applicant_name)],
@@ -392,7 +394,7 @@ export class GeneralInfoComponent implements OnInit {
       business_date_object: [elementValue.business_date_object],
       is_active: [elementValue.is_active],
       is_new: [elementValue.is_new],
-      associate_pd_id:[elementValue.associate_pd_id]
+      associate_pd_id: [elementValue.associate_pd_id]
     });
   }
 
@@ -439,7 +441,7 @@ export class GeneralInfoComponent implements OnInit {
   // add more companies
   addMoreCompanies() {
     let control: any = this._generalForm.get('companies') as FormArray;
-    let setValues: any = { company_order_id: control.controls.length + 1, company_name: '', is_company_applicant: false, business_entity_type: '', business_entity_type_other: '', business_years: '', business_month: '',business_date_object: '', is_active: true, is_new: true, associate_pd_id:this.pdid}
+    let setValues: any = { company_order_id: control.controls.length + 1, company_name: '', is_company_applicant: false, business_entity_type: '', business_entity_type_other: '', business_years: '', business_month: '', business_date_object: '', is_active: true, is_new: true, associate_pd_id: this.pdid }
     control.push(this.createCompanies(setValues))
   }
 
@@ -524,18 +526,6 @@ export class GeneralInfoComponent implements OnInit {
     control.removeAt(cindex);
   }
 
-  // add more individuals details
-  imageCrop(pic,pic_name){
-    let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
-    const imageRef = this.dialog.open(ImageCropComponent, {
-      data: arr,
-    });
-    imageRef.afterClosed()
-      .subscribe(dataresult => {
-        console.log(dataresult);
-    });
-  }
-  
   addMoreIndividuals() {
     const dialogRef = this.dialog.open(OtherApplicantDetailsComponent, {
       data: '',
@@ -557,7 +547,7 @@ export class GeneralInfoComponent implements OnInit {
             individualsControl.push(this.createIndividulas(element));
             let relationControl = <FormArray>this._generalForm.controls['persons_with_relationships'];
             let applicant_details: any = { 'pd_co_applicant_id': element.pd_co_applicant_id, 'applicant_name': this.titleCase.transform(element.applicant_name), 'relationship': '', 'relation_to': '', 'individuals_order_id': element.individuals_order_id, 'is_active': element.is_active };
-            relationControl.push(this.createPersonsWithRelationships(applicant_details,individualsControl.controls.length-1));
+            relationControl.push(this.createPersonsWithRelationships(applicant_details, individualsControl.controls.length - 1));
           });
 
         }
@@ -637,7 +627,7 @@ export class GeneralInfoComponent implements OnInit {
   // submit form details
   temp: number = 0;
   submitGeneralForm(formData: any) {
-    
+
     // console.log('formData',formData);
     if (formData.individuals.length > 0) {
       formData.individuals.forEach((val, index) => {
@@ -653,20 +643,20 @@ export class GeneralInfoComponent implements OnInit {
         this.temp = 0;
         return;
       }
-      else if(this.temp <= formData.individuals.length){
+      else if (this.temp <= formData.individuals.length) {
         this.temp = 0;
       }
 
       let individualCtrl: any = this._generalForm.get('individuals') as FormArray;
       let individualCtrlLength: any = individualCtrl.controls.length;
-      
+
       if (individualCtrlLength > 0) {
 
         let icnt = 0;
         while (icnt < individualCtrlLength) {
 
           let individualChildCtrl: any = individualCtrl.controls[icnt];
-      
+
 
           individualChildCtrl.controls.age.clearValidators();
           individualChildCtrl.controls.qualification.clearValidators();
@@ -684,13 +674,12 @@ export class GeneralInfoComponent implements OnInit {
             individualChildCtrl.controls.qualification.setValidators(Validators.compose([Validators.required]));
 
           }
-          if(individualChildCtrl.controls.qualification.value == '' || individualChildCtrl.controls.qualification.value == '4' || individualChildCtrl.controls.qualification.value == '6')
-          {individualChildCtrl.controls.course_name.setValue(''); individualChildCtrl.controls.course_name.clearValidators();}else{ individualChildCtrl.controls.course_name.setValidators(Validators.compose([Validators.required]));}
+          if (individualChildCtrl.controls.qualification.value == '' || individualChildCtrl.controls.qualification.value == '4' || individualChildCtrl.controls.qualification.value == '6') { individualChildCtrl.controls.course_name.setValue(''); individualChildCtrl.controls.course_name.clearValidators(); } else { individualChildCtrl.controls.course_name.setValidators(Validators.compose([Validators.required])); }
 
           individualChildCtrl.controls.age.updateValueAndValidity();
           individualChildCtrl.controls.qualification.updateValueAndValidity();
           individualChildCtrl.controls.course_name.updateValueAndValidity();
-          
+
           icnt++;
         }
       }
@@ -846,10 +835,10 @@ export class GeneralInfoComponent implements OnInit {
     });
   }
   /******************* validate all form group and form array fields ENd Here ********/
-  pdf(fileURL){
+  pdf(fileURL) {
     window.open(fileURL);
   }
-  
+
   // imageCrop(pic,pic_name){
   //   console.log(pic,pic_name);
   //   let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
@@ -861,25 +850,43 @@ export class GeneralInfoComponent implements OnInit {
   //       console.log(dataresult);
   //   });
   // }
-  
-/** For DOCS Tab */
-public viewerOptions: any = {
-  navbar: false,
-  toolbar: {
-      zoomIn: 4,
-      zoomOut: 4,
-      oneToOne: 4,
-      reset: 4,
-      prev: 4,
-      play: {
-          show: 4,
-          size: 'large',
-      },
-      next: 4,
-      rotateLeft: 4,
-      rotateRight: 4,
-      flipHorizontal: 4,
-      flipVertical: 4,
+
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+      data: pic,
+    });
+    imageRef.afterClosed()
+      .subscribe(dataresult => {
+        if (dataresult == 1) {
+          this.documentsAndFilesList = [];
+          this.retriveFile();
+        }
+      });
   }
-};
+  retriveFile() {
+    this._pd.retriveFile(this.pdid, '18', null).subscribe(data => {
+      if (data.status == 200) {
+        if (data.records.length > 0) {
+          data.records.forEach((val, index) => {
+            let splitted = val.pd_document_name.split(".");
+            let DocumentsAndFiles = {
+              'document_id': val.pd_document_id,
+              'document_name': val.pd_document_name,
+              'document_title': val.pd_document_title,
+              'document': val.doc_url,
+              'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+              'is_show_report': val.is_show_report
+            }
+            this.documentsAndFilesList.push(DocumentsAndFiles);
+          });
+        }
+      }
+      else {
+        this.documentsAndFilesList = [];
+      }
+    });
+  }
+
 }
\ 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.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
index fe8f0d973..388754e33 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
@@ -64,42 +64,55 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
         </mat-tab-group>
     </mat-dialog-content>
 
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 cc247bddb..ae9dc3e94 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
@@ -12,6 +12,11 @@
     padding: 0px;
     color: #e00201;
 }
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
 //   .notificard{
 //     width: 25%;
 //     margin-top: -66px;
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 4309bd085..2d023f6b5 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
@@ -11,6 +11,7 @@ import {
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from "@angular/router";
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
     selector: 'app-lender-representative',
@@ -41,6 +42,7 @@ export class LenderRepresentativeComponent implements OnInit {
         private router: Router,
         // private snackBar: MatSnackBar,
         private _pd: PdTrigerService,
+        private dialog: MatDialog,
         private dialogRef: MatDialogRef<LenderRepresentativeComponent>,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
         this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id;
@@ -120,25 +122,7 @@ export class LenderRepresentativeComponent implements OnInit {
             //     control.push(this.createLRDetail());
             // }
         })
-        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
     }
     public initRepresentative(): void {
         this.representativeForm = this.fb.group({
@@ -211,5 +195,42 @@ export class LenderRepresentativeComponent implements OnInit {
             }
         });
     }
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 }
 
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 d33677e2a..f03c3a9ed 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
@@ -252,42 +252,55 @@
             </mat-tab>
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions>
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 3bb315cf9..3d14ee8da 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
@@ -13,7 +13,11 @@
 .mat-form-field-appearance-legacy .mat-hint{
   color:rgba(0, 0, 0, 0.8) !important;
 }
-
+.top .thumbnail .date {
+  position: absolute;
+  top: 4px;
+  right: -10px;
+}
 .matcard mat-form-field {
   margin: 0 2%;
   width:26%;
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 b623d86ad..0016ccb30 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
@@ -15,6 +15,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 
 @Component({
@@ -85,6 +86,7 @@ export class LoanDetailsComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         private dialogRef: MatDialogRef<LoanDetailsComponent>,
+        private dialog: MatDialog,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
 
         this.applicants = this.pd_all_details.pdapplicants_detials;
@@ -317,25 +319,7 @@ export class LoanDetailsComponent implements OnInit {
             this.loanDetailsForm.controls['owner_name'].updateValueAndValidity();
 
         }
-        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
     }
 
     getM_EndUseofLoad() {
@@ -918,4 +902,42 @@ export class LoanDetailsComponent implements OnInit {
             flipVertical: 4,
         }
     };
+
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
index 2d08f685b..cc6ef4316 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
@@ -227,42 +227,55 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
-                          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                            <div fxLayout="row wrap" style="padding:20px;">
-                                <div fxFlex="100">
-                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                        <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                            <div class="p-list">
-                                                <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                    <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                            <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                                <div fxLayout="row wrap" style="padding:20px;">
+                                    <div fxFlex="100">
+                                        <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                            <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                                <div class="p-list">
+                                                    <div class="top"> 
+                                                                    <!-- Thumbnail-->
+                                                                    <div class="thumbnail">
+                                                                        <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                        matTooltipPosition="right">
+                                                                                        <mat-icon>edit</mat-icon>
+                                                                        </button>
+                                                                        <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                    </div>
+                                                        <label *ngIf="doc.document_title != ''"
+                                                            style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                    
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div fxFlex="row">
-                                    <div fxFlex="100" class="m-gap p-gap">
-                                        <div fxLayout="row" fxLayoutWrap="wrap">
-                                            <div *ngFor="let doc of documentsAndFilesList">
-                                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                                fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                                <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                    <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                    <span class="d-block">{{doc.document_title}}</span>
-                                                <!-- </a> -->
-                                            </div>
+                                    <div fxFlex="row">
+                                        <div fxFlex="100" class="m-gap p-gap">
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                                <div *ngFor="let doc of documentsAndFilesList">
+                                                    <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                        fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                        *ngIf="doc.document_type == 'pdf';">
+                                                        <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                        <mat-icon
+                                                            style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                            (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                        <span class="d-block">{{doc.document_title}}</span>
+                                                        <!-- </a> -->
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                          </div>
                             <ng-template #noFiles>
-                                    <mat-card-content>
-                                      <p style="margin: 20px;">No Files</p>
-                                    </mat-card-content>
-                            </ng-template> 
+                                <mat-card-content>
+                                    <p style="margin: 20px;">No Files</p>
+                                </mat-card-content>
+                            </ng-template>
                         </ng-template>
-                </mat-tab>
+                    </mat-tab>
             </mat-tab-group>
 
         <!-- <mat-card>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.scss
index d354a177a..d12f81124 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.scss
@@ -14,7 +14,11 @@
     flex-direction: row;
     flex-wrap: wrap;
   }
-  
+  .top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
   .example-radio-button {
     margin: 0 4%;
     color: #000 !important
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.ts
index abb3ab1ce..71059d256 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.ts
@@ -4,6 +4,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angul
 import { NotifierService } from 'angular-notifier';
 import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
 import { parse } from 'url';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-neighbour-hood',
@@ -42,7 +43,7 @@ export class NeighbourHoodComponent implements OnInit {
   // amtInwords : any = [];
 
   // isOtherApplicant: any = [];
-  constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<NeighbourHoodComponent>) {
+  constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<NeighbourHoodComponent>,private dialog: MatDialog,) {
     this.parent_pdid = this.data.pdmaster_details.parent_pd_id;
     this.pdid = this.data.pdmaster_details.pd_id;
     this.notifier = notifier;
@@ -105,25 +106,7 @@ export class NeighbourHoodComponent implements OnInit {
     //   }
     // });
 
-    this._pd.retriveFile(this.pdid,'19',null).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
+    this.retriveFile();
 }
 pdf(fileURL){
   window.open(fileURL);
@@ -553,5 +536,41 @@ getOtherOrganisationOwner(value,i) {
    
     ChdCtrls.controls.other_organisation_owner.updateValueAndValidity();      
  }
-
+ imageCrop(pic) {
+  // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+  pic.pdid = this.pdid;
+  const imageRef = this.dialog.open(ImageCropComponent, {
+      data: pic,
+  });
+  imageRef.afterClosed()
+      .subscribe(dataresult => {
+          if(dataresult == 1){
+              this.documentsAndFilesList = [];
+              this.retriveFile();
+          }
+      });
+}
+retriveFile(){
+  this._pd.retriveFile(this.pdid,'19',null).subscribe(data => {
+    if (data.status == 200) {
+        if (data.records.length > 0) {
+            data.records.forEach((val, index) => {
+                let splitted = val.pd_document_name.split(".");
+                let DocumentsAndFiles = {
+                    'document_id':val.pd_document_id,
+                    'document_name': val.pd_document_name,
+                    'document_title': val.pd_document_title,
+                    'document': val.doc_url,
+                    'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                    'is_show_report':val.is_show_report
+                }
+                this.documentsAndFilesList.push(DocumentsAndFiles);
+            });
+        }
+    }
+    else {
+        this.documentsAndFilesList = [];
+    }
+});
+}
 }
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 50cde3a82..c2250da9f 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
@@ -155,42 +155,55 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                        <div fxLayout="row wrap" style="padding:20px;">
-                            <div fxFlex="100">
-                                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                        <div class="p-list">
-                                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                            <div fxLayout="row wrap" style="padding:20px;">
+                                <div fxFlex="100">
+                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                            <div class="p-list">
+                                                <div class="top"> 
+                                                                <!-- Thumbnail-->
+                                                                <div class="thumbnail">
+                                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                    matTooltipPosition="right">
+                                                                                    <mat-icon>edit</mat-icon>
+                                                                    </button>
+                                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                </div>
+                                                    <label *ngIf="doc.document_title != ''"
+                                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div fxFlex="row">
-                                <div fxFlex="100" class="m-gap p-gap">
-                                    <div fxLayout="row" fxLayoutWrap="wrap">
-                                        <div *ngFor="let doc of documentsAndFilesList">
-                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                <span class="d-block">{{doc.document_title}}</span>
-                                            <!-- </a> -->
-                                        </div>
+                                <div fxFlex="row">
+                                    <div fxFlex="100" class="m-gap p-gap">
+                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                            <div *ngFor="let doc of documentsAndFilesList">
+                                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                    *ngIf="doc.document_type == 'pdf';">
+                                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                    <mat-icon
+                                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                    <span class="d-block">{{doc.document_title}}</span>
+                                                    <!-- </a> -->
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                      </div>
                         <ng-template #noFiles>
-                                <mat-card-content>
-                                  <p style="margin: 20px;">No Files</p>
-                                </mat-card-content>
-                        </ng-template> 
+                            <mat-card-content>
+                                <p style="margin: 20px;">No Files</p>
+                            </mat-card-content>
+                        </ng-template>
                     </ng-template>
-            </mat-tab>
+                </mat-tab>
 
         </mat-tab-group>
 
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 5e2912012..3449777f2 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
@@ -16,6 +16,11 @@
 //   background: #62B013;
 //   color: white;
 // }
+.top .thumbnail .date {
+    position: absolute;
+    top: 4px;
+    right: -10px;
+}
   ::ng-deep .cdk-global-overlay-wrapper{
         justify-content: center !important;
 }
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 2404c6f6e..57a9e182d 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
@@ -28,6 +28,7 @@ import { RentalVerificationComponent } from './../rental-verification/rental-ver
 
 /**sweet alert */
 import Swal from 'sweetalert2';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
     selector: 'app-other-income',
@@ -173,25 +174,7 @@ export class OtherIncomeComponent implements OnInit {
                 //control.push(this.createDetail());
             }
         })
-        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+        this.retriveFile();
     }
     public initOtherincomeForm(): void {
         this.otherIncomeForm = this.fb.group({
@@ -463,4 +446,43 @@ export class OtherIncomeComponent implements OnInit {
         }
         ChdCtrls.controls.others_income_earned_by.updateValueAndValidity();
     }
+
+    imageCrop(pic) {
+        // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+        pic.pdid = this.pdid;
+        const imageRef = this.dialog.open(ImageCropComponent, {
+            data: pic,
+        });
+        imageRef.afterClosed()
+            .subscribe(dataresult => {
+                if(dataresult == 1){
+                    this.documentsAndFilesList = [];
+                    this.retriveFile();
+                }
+            });
+    }
+    retriveFile(){
+        this._pd.retriveFile(this.pdid,this.form_id,null).subscribe(data => {
+          if (data.status == 200) {
+              if (data.records.length > 0) {
+                  data.records.forEach((val, index) => {
+                      let splitted = val.pd_document_name.split(".");
+                      let DocumentsAndFiles = {
+                          'document_id':val.pd_document_id,
+                          'document_name': val.pd_document_name,
+                          'document_title': val.pd_document_title,
+                          'document': val.doc_url,
+                          'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                          'is_show_report':val.is_show_report
+                      }
+                      this.documentsAndFilesList.push(DocumentsAndFiles);
+                  });
+              }
+          }
+          else {
+              this.documentsAndFilesList = [];
+          }
+      });
+    }
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html
index 5bb3cfa30..03c6fc08f 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html
@@ -698,40 +698,53 @@
 
 <mat-tab label="Docs">
     <ng-template matTabContent>
-      <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-        <div fxLayout="row wrap" style="padding:20px;">
-            <div fxFlex="100">
-                <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                    <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                        <div class="p-list">
-                            <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}" style="width: 100%;height: 100%;">
-                            <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+        <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+            <div fxLayout="row wrap" style="padding:20px;">
+                <div fxFlex="100">
+                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                        <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                            <div class="p-list">
+                                <div class="top"> 
+                                                <!-- Thumbnail-->
+                                                <div class="thumbnail">
+                                                    <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                    matTooltipPosition="right">
+                                                                    <mat-icon>edit</mat-icon>
+                                                    </button>
+                                                    <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                </div>
+                                    <label *ngIf="doc.document_title != ''"
+                                        style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div fxFlex="row">
-                <div fxFlex="100" class="m-gap p-gap">
-                    <div fxLayout="row" fxLayoutWrap="wrap">
-                        <div *ngFor="let doc of documentsAndFilesList">
-                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                            fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                            <!-- <a href="http://www.google.com" target="_blank"> -->
-                                <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                <span class="d-block">{{doc.document_title}}</span>
-                            <!-- </a> -->
-                        </div>
+                <div fxFlex="row">
+                    <div fxFlex="100" class="m-gap p-gap">
+                        <div fxLayout="row" fxLayoutWrap="wrap">
+                            <div *ngFor="let doc of documentsAndFilesList">
+                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                    fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                    *ngIf="doc.document_type == 'pdf';">
+                                    <!-- <a href="http://www.google.com" target="_blank"> -->
+                                    <mat-icon
+                                        style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                        (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                    <span class="d-block">{{doc.document_title}}</span>
+                                    <!-- </a> -->
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-      </div>
         <ng-template #noFiles>
-                <mat-card-content>
-                  <p style="margin: 20px;">No Files</p>
-                </mat-card-content>
-        </ng-template> 
+            <mat-card-content>
+                <p style="margin: 20px;">No Files</p>
+            </mat-card-content>
+        </ng-template>
     </ng-template>
 </mat-tab>
 
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.scss
index 13b8a16c4..b4d3fd5f3 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.scss
@@ -16,6 +16,11 @@
   margin-left: 2%;
   margin-top: 1%;
 }
+.top .thumbnail .date {
+  position: absolute;
+  top: 4px;
+  right: -10px;
+}
 .total-rent-amt{
   margin-left: 1%;
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts
index f305e7e04..21f228a8b 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts
@@ -7,6 +7,7 @@ import { NotifierService } from 'angular-notifier';
 import { PdTrigerService } from './../../../../../../pd-service/pd-triger.service';
 /**sweet alert */
 import Swal from 'sweetalert2';
+import { ImageCropComponent } from '../../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-manage-rental-verification',
@@ -68,7 +69,7 @@ export class ManageRentalVerificationComponent implements OnInit {
     SwalButtonText: string;
     SwalMessage: string;
     
-    constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<ManageRentalVerificationComponent>) { 
+    constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<ManageRentalVerificationComponent>,private dialog: MatDialog) { 
     
       this.pageTitle = this.data.manage_status==1 ? 'Add RI Details' : 'Update RI Details';
       this.parent_pdid = this.data.parentData.pdmaster_details.parent_pd_id;
@@ -183,25 +184,7 @@ export class ManageRentalVerificationComponent implements OnInit {
           }); 
           this.loadFormData(this.data.editData);
 
-          this._pd.retriveFile(this.pdid,'17',null).subscribe(data => {
-            if (data.status == 200) {        
-                if(data.records.length>0){
-                    data.records.forEach((val, index) => {
-                        let splitted = val.pd_document_name.split("."); 
-                            let DocumentsAndFiles = {
-                                'document_name': val.pd_document_name,
-                                'document_title': val.pd_document_title,
-                                'document': val.doc_url,
-                                'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                            }
-                            this.documentsAndFilesList.push(DocumentsAndFiles);
-                        });
-                }
-            }
-            else{
-                this.documentsAndFilesList = [];
-            }
-        });
+          this.retriveFile();
 
     }
    
@@ -1053,6 +1036,44 @@ export class ManageRentalVerificationComponent implements OnInit {
     }
   }
   
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+  this._pd.retriveFile(this.pdid,'17',null).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
+
   // validate all form group and form array fields
   validateAllFormFields(formGroup: any) {
     Object.keys(formGroup.controls).forEach(field => {
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 8d3026592..124f7de79 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
@@ -389,42 +389,55 @@
 
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
-                          <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                            <div fxLayout="row wrap" style="padding:20px;">
-                                <div fxFlex="100">
-                                    <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                                        <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                            <div class="p-list">
-                                                <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                                    <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                            <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                                <div fxLayout="row wrap" style="padding:20px;">
+                                    <div fxFlex="100">
+                                        <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                            <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                                <div class="p-list">
+                                                    <div class="top"> 
+                                                                    <!-- Thumbnail-->
+                                                                    <div class="thumbnail">
+                                                                        <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                                        matTooltipPosition="right">
+                                                                                        <mat-icon>edit</mat-icon>
+                                                                        </button>
+                                                                        <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                                    </div>
+                                                        <label *ngIf="doc.document_title != ''"
+                                                            style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                                    
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div fxFlex="row">
-                                    <div fxFlex="100" class="m-gap p-gap">
-                                        <div fxLayout="row" fxLayoutWrap="wrap">
-                                            <div *ngFor="let doc of documentsAndFilesList">
-                                            <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                                fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                                <!-- <a href="http://www.google.com" target="_blank"> -->
-                                                    <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                                    <span class="d-block">{{doc.document_title}}</span>
-                                                <!-- </a> -->
-                                            </div>
+                                    <div fxFlex="row">
+                                        <div fxFlex="100" class="m-gap p-gap">
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                                <div *ngFor="let doc of documentsAndFilesList">
+                                                    <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                                        fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                                        *ngIf="doc.document_type == 'pdf';">
+                                                        <!-- <a href="http://www.google.com" target="_blank"> -->
+                                                        <mat-icon
+                                                            style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                            (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                                        <span class="d-block">{{doc.document_title}}</span>
+                                                        <!-- </a> -->
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                          </div>
                             <ng-template #noFiles>
-                                    <mat-card-content>
-                                      <p style="margin: 20px;">No Files</p>
-                                    </mat-card-content>
-                            </ng-template> 
+                                <mat-card-content>
+                                    <p style="margin: 20px;">No Files</p>
+                                </mat-card-content>
+                            </ng-template>
                         </ng-template>
-                </mat-tab>
+                    </mat-tab>
 
             </mat-tab-group>
         </mat-dialog-content>
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 f7e0b7e79..ec7c21807 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
@@ -104,6 +104,10 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
             }
         }
     }
-   
+    .top .thumbnail .date {
+        position: absolute;
+        top: 4px;
+        right: -10px;
+    }
 }
   
\ 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 698661228..23ddc5058 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
@@ -10,6 +10,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-stock',
@@ -60,6 +61,7 @@ export class StockComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialogRef: MatDialogRef<StockComponent>,
+    private dialog: MatDialog,
     private _pd: PdTrigerService, @Inject(MAT_DIALOG_DATA)
     public pd_all_details: any) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id
@@ -124,25 +126,7 @@ export class StockComponent implements OnInit {
 
     this.getUOM();
 
-    this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
+    this.retriveFile();
 }
 
   public initstockForms(record) {
@@ -899,4 +883,43 @@ export class StockComponent implements OnInit {
   //   this.wtrdCommentFlag[index] = false;
   // }
   // }
+
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+  this._pd.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
+
 }
\ 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.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index 5edc21461..e3553efcb 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
@@ -296,42 +296,55 @@
     
     <mat-tab label="Docs">
             <ng-template matTabContent>
-              <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
-                <div fxLayout="row wrap" style="padding:20px;">
-                    <div fxFlex="100">
-                        <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
-                            <div class="p-list-main mb-2" style="width: 60%;height: auto;" *ngIf="doc.document_type != 'pdf'">
-                                <div class="p-list">
-                                    <div class="top"> <img src="{{doc.document}}" alt="{{doc.document_name}}"style="width: 100%;height: 100%;">
-                                        <label *ngIf="doc.document_title != ''" style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                <div ngxViewer *ngIf="documentsAndFilesList.length>0; else noFiles">
+                    <div fxLayout="row wrap" style="padding:20px;">
+                        <div fxFlex="100">
+                            <div fxFlex="20" class="m-gap p-gap" *ngFor="let doc of documentsAndFilesList">
+                                <div class="p-list-main mb-2" *ngIf="doc.document_type != 'pdf'">
+                                    <div class="p-list">
+                                        <div class="top"> 
+                                                        <!-- Thumbnail-->
+                                                        <div class="thumbnail">
+                                                            <button mat-raised-button mat-icon-button class="date mr-1 mb-1 hover-icon" type="button" matTooltip="edit" (click)="imageCrop(doc)"
+                                                                            matTooltipPosition="right">
+                                                                            <mat-icon>edit</mat-icon>
+                                                            </button>
+                                                            <img src="{{doc.document}}" alt="{{doc.document_name}}">
+                                                        </div>
+                                            <label *ngIf="doc.document_title != ''"
+                                                style="font-size: 0.85rem">{{doc.document_title}}</label></div>
+                                        
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div fxFlex="row">
-                        <div fxFlex="100" class="m-gap p-gap">
-                            <div fxLayout="row" fxLayoutWrap="wrap">
-                                <div *ngFor="let doc of documentsAndFilesList">
-                                <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20"
-                                    fxFlex.lg="20" fxFlex.xl="20" *ngIf="doc.document_type == 'pdf';">
-                                    <!-- <a href="http://www.google.com" target="_blank"> -->
-                                        <mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;" (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
-                                        <span class="d-block">{{doc.document_title}}</span>
-                                    <!-- </a> -->
-                                </div>
+                        <div fxFlex="row">
+                            <div fxFlex="100" class="m-gap p-gap">
+                                <div fxLayout="row" fxLayoutWrap="wrap">
+                                    <div *ngFor="let doc of documentsAndFilesList">
+                                        <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50"
+                                            fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20"
+                                            *ngIf="doc.document_type == 'pdf';">
+                                            <!-- <a href="http://www.google.com" target="_blank"> -->
+                                            <mat-icon
+                                                style="color: #e00201;font-size: 60px !important;width:inherit !important;"
+                                                (click)="pdf(doc.document)">picture_as_pdf</mat-icon>
+                                            <span class="d-block">{{doc.document_title}}</span>
+                                            <!-- </a> -->
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-              </div>
                 <ng-template #noFiles>
-                        <mat-card-content>
-                          <p style="margin: 20px;">No Files</p>
-                        </mat-card-content>
-                </ng-template> 
+                    <mat-card-content>
+                        <p style="margin: 20px;">No Files</p>
+                    </mat-card-content>
+                </ng-template>
             </ng-template>
-    </mat-tab>
+        </mat-tab>
 
     </mat-tab-group>
 
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 411bc5979..cb75a2354 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
@@ -92,5 +92,9 @@
               }
           }
       }
-     
+      .top .thumbnail .date {
+        position: absolute;
+        top: 4px;
+        right: -10px;
+    }  
   }
\ 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 bd8878a13..8772a7163 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
@@ -9,6 +9,7 @@ import { MatDialog,MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
 
 /** Service */
 import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
 
 @Component({
   selector: 'app-supplier-info',
@@ -45,6 +46,7 @@ export class SupplierInfoComponent implements OnInit {
     notifier: NotifierService,
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
+    private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any, private dialogRef: MatDialogRef<SupplierInfoComponent>) {
     this.parent_pdid = this.pd_all_details.pdmaster_details.parent_pd_id
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
@@ -146,25 +148,7 @@ export class SupplierInfoComponent implements OnInit {
     // this.getPdSupplierFormDetails();
     this.getMasterDetails('COMPANYRELATIONSHIPS', 1);
     this.getMasterDetails('TITLES', 2);
-    this.pdTrigerService.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
-      if (data.status == 200) {        
-          if(data.records.length>0){
-              data.records.forEach((val, index) => {
-                  let splitted = val.pd_document_name.split("."); 
-                      let DocumentsAndFiles = {
-                          'document_name': val.pd_document_name,
-                          'document_title': val.pd_document_title,
-                          'document': val.doc_url,
-                          'document_type' : splitted[1] == 'pdf'?'pdf':'image'
-                      }
-                      this.documentsAndFilesList.push(DocumentsAndFiles);
-                  });
-          }
-      }
-      else{
-          this.documentsAndFilesList = [];
-      }
-  });
+    this.retriveFile();
 }
 
 
@@ -611,5 +595,41 @@ export class SupplierInfoComponent implements OnInit {
   //     }
   //   ]
   // }
-
+  imageCrop(pic) {
+    // let arr = { 'pic_name':pic_name,'pic':pic,'from_id':this.form_id}
+    pic.pdid = this.pdid;
+    const imageRef = this.dialog.open(ImageCropComponent, {
+        data: pic,
+    });
+    imageRef.afterClosed()
+        .subscribe(dataresult => {
+            if(dataresult == 1){
+                this.documentsAndFilesList = [];
+                this.retriveFile();
+            }
+        });
+}
+retriveFile(){
+    this.pdTrigerService.retriveFile(this.pdid,this.form_id,this.company_id).subscribe(data => {
+      if (data.status == 200) {
+          if (data.records.length > 0) {
+              data.records.forEach((val, index) => {
+                  let splitted = val.pd_document_name.split(".");
+                  let DocumentsAndFiles = {
+                      'document_id':val.pd_document_id,
+                      'document_name': val.pd_document_name,
+                      'document_title': val.pd_document_title,
+                      'document': val.doc_url,
+                      'document_type': splitted[1] == 'pdf' ? 'pdf' : 'image',
+                      'is_show_report':val.is_show_report
+                  }
+                  this.documentsAndFilesList.push(DocumentsAndFiles);
+              });
+          }
+      }
+      else {
+          this.documentsAndFilesList = [];
+      }
+  });
+}
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
index 4c26b2495..7a3840ae4 100755
--- a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
+++ b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
@@ -725,5 +725,15 @@ export class PdTrigerService {
                 )
     }
             
+    getBase64ImageFromURL(url): Observable<any> {
+        return this._http.post(this.apiUrl + 'convertBase64', { "img_url":url })
+                   .pipe(catchError(this.handleError('role', [])))
+    }
+
+    updatePDPhoto(values): Observable<any> {
+        values.fk_updatedby = this._aws.getlocale();
+        return this._http.post(this.apiUrl + 'updatePDPhoto', { "records":values })
+                   .pipe(catchError(this.handleError('role', [])))
+    }
 
 }
diff --git a/ng6-seed/src/app/quality-check/qc-list/qc-list.component.html b/ng6-seed/src/app/quality-check/qc-list/qc-list.component.html
index bbe37f0d7..166772fde 100755
--- a/ng6-seed/src/app/quality-check/qc-list/qc-list.component.html
+++ b/ng6-seed/src/app/quality-check/qc-list/qc-list.component.html
@@ -12,15 +12,12 @@
     <mat-tab-group (selectedTabChange)="onTabClick($event)">
     <mat-tab>
         <ng-template mat-tab-label><mat-icon>done</mat-icon>&nbsp;Completed </ng-template>
-        <app-completed-pd [bindFilterValue]="filterValue" (loadPdView)="viewPDDetails($event)"></app-completed-pd>
+        <app-completed-pd [bindFilterValue]="filterValue" (loadPdView)="viewPDDetails($event)"></app-completed-pd> 
       </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label><mat-icon>done_all</mat-icon>&nbsp;QC Completed </ng-template>
         <app-qc-completed-pd [bindFilterValue]="filterValue" (loadPdView)="viewPDDetails($event)"></app-qc-completed-pd>
-
-       
       </mat-tab>
-      
     </mat-tab-group>
   </mat-card>
 </mat-card-content>
diff --git a/ng6-seed/src/app/session/login/login-component.html b/ng6-seed/src/app/session/login/login-component.html
index 41ee7e92e..291756fcc 100755
--- a/ng6-seed/src/app/session/login/login-component.html
+++ b/ng6-seed/src/app/session/login/login-component.html
@@ -2,7 +2,8 @@
     <div class="form-bg">
         <div fxLayout="row" fxLayoutAlign="center" class="pt-2">
                     <!-- <p>SINEEDGE Login Details</p> -->
-                    <h3 class="page-title"><img [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 50px;;"> <span> SINEEDGE </span>
+                    <!-- [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" -->
+                    <h3 class="page-title"><img src="assets/images/PD.jpeg"  style="height: 50px;;"> <span> PD Genie </span>
                     </h3>
         </div>
         <div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
diff --git a/ng6-seed/src/assets/images/PD.jpeg b/ng6-seed/src/assets/images/PD.jpeg
new file mode 100644
index 000000000..a5ba3e49c
Binary files /dev/null and b/ng6-seed/src/assets/images/PD.jpeg differ