From aad5d4ee89d1cd2a339f622a625dca24b4c6fb16 Mon Sep 17 00:00:00 2001
From: Newatia <Archana.Newatia@fda.gov>
Date: Wed, 14 Aug 2024 16:42:55 -0400
Subject: [PATCH 1/2] updated product, application, ivp, impurities

---
 .../core/assets/data/product_dictionary.json  |    8 +-
 ...tance-form-ssg4m-process-card.component.ts |    6 +
 .../service/advanced-search.service.ts        |   10 +-
 .../application-form.component.ts             |    9 +-
 .../ingredient-form.component.html            |   26 +-
 .../ingredient-form.component.ts              |  158 +-
 src/app/fda/application/application.module.ts |    5 -
 src/app/fda/config/config.json                |    1 +
 .../impurities-form.component.ts              |    9 +-
 ...harmacology-assay-data-import.component.ts |    8 +-
 .../invitro-pharmacology-details.component.ts |    7 +-
 ...vitro-pharmacology-assay-form.component.ts |    9 +-
 ...ro-pharmacology-assayset-form.component.ts |    1 -
 .../invitro-pharmacology-form.component.html  |    2 +-
 .../invitro-pharmacology-form.component.ts    |  573 +++-
 ...tro-pharmacology-summary-form.component.ts |   15 +-
 ...acology-screening-data-import.component.ts |   12 +-
 .../invitro-pharmacology.component.ts         |   13 -
 .../json-dialog-fda.component.html            |    2 +-
 .../json-dialog-fda.component.ts              |   13 +-
 src/app/fda/product/model/product.model.ts    |   35 +-
 .../product-details-base.component.ts         |  223 +-
 .../product-details.component.html            | 2754 ++++++++++-------
 .../product-details.component.scss            |  206 +-
 .../product-details.component.ts              |   12 +-
 .../product-elist-details.component.ts        |    6 +-
 .../product-component-form.component.ts       |    1 -
 .../product-form/product-form.component.html  |   22 +-
 .../product-form/product-form.component.ts    |   29 +-
 .../product-ingredient-form.component.ts      |    1 -
 .../product-lot-form.component.ts             |    1 -
 src/app/fda/product/product.module.ts         |    1 -
 .../products-browse.component.html            |  236 +-
 .../products-browse.component.ts              |    5 +-
 .../fda/product/service/product.service.ts    |    2 +-
 src/styles/_styles.scss                       |    1 +
 36 files changed, 2651 insertions(+), 1771 deletions(-)

diff --git a/src/app/core/assets/data/product_dictionary.json b/src/app/core/assets/data/product_dictionary.json
index 8c189a667..37d178942 100644
--- a/src/app/core/assets/data/product_dictionary.json
+++ b/src/app/core/assets/data/product_dictionary.json
@@ -1,9 +1,9 @@
 {
-    "Administravail Pharmacedical Dosage Form":{
-        "lucenePath":"root_pharmacedicalDosageForm",
-        "description":"Pharmaceutical Form of the product",
+    "Administered Pharmaceutical Dosage Form":{
+        "lucenePath":"root_pharmaceuticalDosageForm",
+        "description":"Administered Pharmaceutical Dosage Form of the product",
         "type":"string",
-        "cvDomain":"PROD_PHARMACEDICAL_DOSAGE_FORM",
+        "cvDomain":"DOSAGE_FORM",
         "priority":null,
         "suggest":null
     },
diff --git a/src/app/core/substance-ssg4m/ssg4m-process/substance-form-ssg4m-process-card.component.ts b/src/app/core/substance-ssg4m/ssg4m-process/substance-form-ssg4m-process-card.component.ts
index edd3d1d05..e02869c6a 100644
--- a/src/app/core/substance-ssg4m/ssg4m-process/substance-form-ssg4m-process-card.component.ts
+++ b/src/app/core/substance-ssg4m/ssg4m-process/substance-form-ssg4m-process-card.component.ts
@@ -62,6 +62,12 @@ export class SubstanceFormSsg4mProcessCardComponent extends SubstanceCardBaseFil
         //TODO: make more configurable and standardized
         console.log("About to configure the scheme view");
         window['schemeUtil'].debug = false;
+
+        window['schemeUtil'].maxContinuousSteps = 1;
+        window['schemeUtil'].maxTextLen = 19;
+        window['schemeUtil'].BREAK_GAP = 300;
+        window['schemeUtil'].maxTitleTextLen = 100;
+
         const url = `${(this.configService.configData && this.configService.configData.apiBaseUrl) || '/'}api/v1/`;
         const httpp = this.http;
         window['schemeUtil'].apiBaseURL = url;
diff --git a/src/app/fda/advanced-search/service/advanced-search.service.ts b/src/app/fda/advanced-search/service/advanced-search.service.ts
index 8643d7fa7..a1983be7d 100644
--- a/src/app/fda/advanced-search/service/advanced-search.service.ts
+++ b/src/app/fda/advanced-search/service/advanced-search.service.ts
@@ -6,11 +6,9 @@ import { BaseHttpService } from '@gsrs-core/base';
 import { PagingResponse } from '@gsrs-core/utils';
 import { FacetParam, FacetHttpParams, FacetQueryResponse } from '@gsrs-core/facets-manager';
 import { SubstanceDetail, SubstanceName, SubstanceCode } from '@gsrs-core/substance/substance.model';
-import { ProductAll } from '../../product/model/product.model';
-import { ClinicalTrial } from '../../clinical-trials/clinical-trial/clinical-trial.model';
-// import { map, switchMap, tap } from 'rxjs/operators';
-// import { Facet } from '@gsrs-core/facets-manager';
+import { Product } from '../../product/model/product.model'
 import { Application, ApplicationIngredient } from '../../application/model/application.model';
+import { ClinicalTrial } from '../../clinical-trials/clinical-trial/clinical-trial.model';
 
 @Injectable(
   { providedIn: 'root' }
@@ -119,7 +117,7 @@ export class AdvancedSearchService extends BaseHttpService {
     pageSize: number = 10,
     searchTerm?: string,
     facets?: FacetParam
-  ): Observable<PagingResponse<ProductAll>> {
+  ): Observable<PagingResponse<Product>> {
     let params = new FacetHttpParams();
     params = params.append('skip', skip.toString());
     params = params.append('top', '1');  // setting top=1, faster result, no content
@@ -134,7 +132,7 @@ export class AdvancedSearchService extends BaseHttpService {
       params: params
     };
 
-    return this.http.get<PagingResponse<ProductAll>>(url, options);
+    return this.http.get<PagingResponse<Product>>(url, options);
   }
 
   getClinicalTrials(
diff --git a/src/app/fda/application/application-form/application-form.component.ts b/src/app/fda/application/application-form/application-form.component.ts
index 8cff542af..39347dcdc 100644
--- a/src/app/fda/application/application-form/application-form.component.ts
+++ b/src/app/fda/application/application-form/application-form.component.ts
@@ -11,6 +11,7 @@ import { ControlledVocabularyService } from '../../../core/controlled-vocabulary
 import { VocabularyTerm } from '../../../core/controlled-vocabulary/vocabulary.model';
 import { Application, ValidationMessage } from '../model/application.model';
 import { Subscription } from 'rxjs';
+import * as moment from 'moment';
 import { Title } from '@angular/platform-browser';
 import { take } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
@@ -455,11 +456,17 @@ export class ApplicationFormComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'application_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
     let cleanApplication = this.cleanApplication();
+
+    let data = {jsonData: cleanApplication, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: cleanApplication
+      data: data
     });
 
     //   this.overlayContainer.style.zIndex = '1002';
diff --git a/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.html b/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.html
index 00afa7526..9d8e45154 100644
--- a/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.html
+++ b/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.html
@@ -44,8 +44,8 @@
     <div class="col-2 flex-column related-substance">
       <div class="related-substance-border">
         <app-substance-search-selector (selectionUpdated)="ingredientNameUpdated($event)"
-          (showMessage)="showMessageIngredientName($event)" (searchValueOut)="searchValueOutChange($event)" eventCategory="ingredName" placeholder="Ingredient Name"
-          header="Ingredient Name" [subuuid]="substanceUuid">
+          (showMessage)="showMessageIngredientName($event)" (searchValueOut)="searchValueOutChange($event)"
+          eventCategory="ingredName" placeholder="Ingredient Name" header="Ingredient Name" [subuuid]="substanceUuid">
         </app-substance-search-selector>
 
         <div *ngIf="ingredientNameMessage" class="colorred font12px">
@@ -62,9 +62,11 @@
               {{active}} <span class="colorgray font11px">(Active Moiety)</span>
             </div>
           </div>
-          <div *ngIf="ingredient.substanceKey">
-            <span class="colororange">{{ingredient.substanceKey}}</span><span class="colorgray font11px">
-               ({{ingredient.substanceKeyType}})</span>
+          <div *ngIf="ingredient.substanceKey || ingredientName">
+            <span class="colororange">{{ingredient.substanceKey}}</span>
+            <span class="colorgray font11px">
+              <span *ngIf="ingredient.substanceKeyType"> ({{ingredient.substanceKeyType}})</span>
+            </span>
             <br>
             <button mat-icon-button color="primary" (click)="confirmDeleteIngredientName(ingredIndex)"
               matTooltip="Delete Ingredient Name {{ingredIndex + 1}}">
@@ -81,8 +83,8 @@
       <div class="related-substance-border">
         <app-substance-search-selector (selectionUpdated)="basisOfStrengthUpdated($event)"
           (showMessage)="showMessageBasisOfStrength($event)" (searchValueOut)="searchValueBasisOutChange($event)"
-          eventCategory="substanceRelationshipRelatedSub"
-          placeholder="Basis Of Strength" header="Basis Of Strength" [subuuid]="basisOfStrengthSubstanceUuid">
+          eventCategory="substanceRelationshipRelatedSub" placeholder="Basis Of Strength" header="Basis Of Strength"
+          [subuuid]="basisOfStrengthSubstanceUuid">
         </app-substance-search-selector>
 
 
@@ -100,9 +102,13 @@
             </div>
           </div>
 
-          <div *ngIf="ingredient.basisOfStrengthSubstanceKey">
-            <span class="colororange">{{ingredient.basisOfStrengthSubstanceKey}}</span><span class="colorgray font11px">
-              ({{ingredient.basisOfStrengthSubstanceKeyType}})</span>
+          <div *ngIf="ingredient.basisOfStrengthSubstanceKey || basisOfStrengthIngredientName">
+            <span class="colororange">{{ingredient.basisOfStrengthSubstanceKey}}</span>
+            <span class="colorgray font11px">
+              <span *ngIf="ingredient.basisOfStrengthSubstanceKeyType">
+                ({{ingredient.basisOfStrengthSubstanceKeyType}})
+              </span>
+            </span>
             <br>
             <button mat-icon-button color="primary" (click)="confirmDeleteBasisOfStrength(ingredIndex)"
               matTooltip="Delete Basis of Strength {{ingredIndex + 1}}">
diff --git a/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.ts b/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.ts
index 41f77ec9a..5d28a6c8c 100644
--- a/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.ts
+++ b/src/app/fda/application/application-form/ingredient-form/ingredient-form.component.ts
@@ -11,6 +11,7 @@ import { AuthService } from '@gsrs-core/auth/auth.service';
 import { ConfigService } from '@gsrs-core/config/config.service';
 import { GsrsModule } from '@gsrs-core/gsrs.module';
 import { GeneralService } from 'src/app/fda/service/general.service';
+import { A } from '@angular/cdk/keycodes';
 
 @Component({
   selector: 'app-ingredient-form',
@@ -32,6 +33,7 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
   basisOfStrengthIngredientName: string;
   basisOfStrengthSubstanceUuid: string;
   basisOfStrengthMessage = '';
+  bdnumNotPrimaryMessage = '';
   relationship: any;
   ingredientNameActiveMoiety = new Array<String>();
   basisOfStrengthActiveMoiety = new Array<String>();
@@ -141,6 +143,8 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
 
   deleteIngredientName() {
     this.ingredientNameMessage = '';
+    this.ingredient.$$ingredientNameValidation = '';
+
     if (this.ingredient.id != null) {
       // Display this message if deleting existing Ingredient Name which is in database.
       if (this.ingredientNameBdnumOld != null) {
@@ -168,6 +172,8 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
 
   deleteBasisOfStrength() {
     this.basisOfStrengthMessage = '';
+    this.ingredient.$$basisOfStrengthValidation = '';
+
     if (this.ingredient.id != null) {
       // Display this message if deleting existing Basis of Strength which is in database.
       if (this.basisofStrengthBdnumOld != null) {
@@ -186,26 +192,40 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
         const substanceCodes = response;
         for (let index = 0; index < substanceCodes.length; index++) {
           if (substanceCodes[index].codeSystem) {
-            if ((substanceCodes[index].codeSystem === this.substanceKeyTypeConfig) &&
-              (substanceCodes[index].type === 'PRIMARY')) {
-
-              if (type) {
+            if (substanceCodes[index].codeSystem === this.substanceKeyTypeConfig) {
+              if (substanceCodes[index].type === 'PRIMARY') {
+                if (type) {
+                  if (type === 'ingredientname') {
+                    this.ingredient.substanceKey = substanceCodes[index].code;
+                    this.ingredient.substanceKeyType = this.substanceKeyTypeConfig;
+
+                    if (!this.ingredient.basisOfStrengthSubstanceKey) {
+                      this.ingredient.basisOfStrengthSubstanceKey = substanceCodes[index].code;
+                      this.ingredient.basisOfStrengthSubstanceKeyType = this.substanceKeyTypeConfig;
+                    }
+                  }
+                  if (type === 'basisofstrength') {
+                    this.ingredient.basisOfStrengthSubstanceKey = substanceCodes[index].code;
+                    this.ingredient.basisOfStrengthSubstanceKeyType = this.substanceKeyTypeConfig;
+                  }
+                }
+              } else {
                 if (type === 'ingredientname') {
-                  this.ingredient.substanceKey = substanceCodes[index].code;
-                  this.ingredient.substanceKeyType = this.substanceKeyTypeConfig;
+                  this.ingredientNameMessage = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
+                  this.ingredient.$$ingredientNameValidation = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
 
                   if (!this.ingredient.basisOfStrengthSubstanceKey) {
-                    this.ingredient.basisOfStrengthSubstanceKey = substanceCodes[index].code;
-                    this.ingredient.basisOfStrengthSubstanceKeyType = this.substanceKeyTypeConfig;
+                    this.basisOfStrengthMessage = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
+                    this.ingredient.$$basisOfStrengthValidation = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
                   }
                 }
                 if (type === 'basisofstrength') {
-                  this.ingredient.basisOfStrengthSubstanceKey = substanceCodes[index].code;
-                  this.ingredient.basisOfStrengthSubstanceKeyType = this.substanceKeyTypeConfig;
+                  this.basisOfStrengthMessage = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
+                  this.ingredient.$$basisOfStrengthValidation = 'This BDNUM ' + substanceCodes[index].code + ' is not primary';
                 }
               }
               break;
-            }
+            } // codeSystem is same as substance key type config
           }
         }
       }
@@ -249,90 +269,6 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
     }
   }
 
-  /*
-  if (response.bdnum) {
-
-    if (type === 'ingredientname') {
-      this.ingredientNameMessage = '';
-      this.ingredient.bdnum = response.bdnum;
-      this.ingredientName = response.name;
-      this.ingredientNameSubstanceUuid = response.substanceId;
-
-      // Get Active Moiety
-      this.getActiveMoiety(response.substanceId, 'ingredientname');
-
-      // If Basis of Strenght is empty/null, copy the Ingredient Name to Basis of Strength
-      if (this.ingredient.basisOfStrengthBdnum == null) {
-        this.basisOfStrengthMessage = '';
-        this.ingredient.basisOfStrengthBdnum = response.bdnum;
-        this.basisOfStrengthName = response.name;
-        this.basisofStrengthSubstanceUuid = response.substanceId;
-
-        // Get Active Moiety
-        this.getActiveMoiety(response.substanceId, 'basisofstrength');
-      }
-      // Basis is strength
-    } else {
-      this.basisOfStrengthMessage = '';
-      this.ingredient.basisOfStrengthBdnum = response.bdnum;
-      this.basisOfStrengthName = response.name;
-      this.basisofStrengthSubstanceUuid = response.substanceId;
-
-      // Get Active Moiety
-      this.getActiveMoiety(response.substanceId, 'basisofstrength');
-    }
-
-  }
-  }
-  else {
-  if (type === 'ingredientname') {
-    this.ingredientNameMessage = 'There is no Ingredient Name found for this Substance Code';
-  } else {
-    this.basisOfStrengthMessage = 'There is no Basis of Strength found for this Substance Code';
-  }
-  }
-  */
-
-  /*
-  getSubstanceId(bdnum: string, type: string) {
-    if (bdnum != null) {
-      this.applicationService.getSubstanceDetailsByBdnum(bdnum).subscribe(response => {
-        if (response) {
-          if (response.substanceId) {
-            if (type === 'ingredientname') {
-              this.ingredientNameMessage = '';
-              this.ingredient.bdnum = response.bdnum;
-              this.ingredientName = response.name;
-              this.ingredientNameSubstanceUuid = response.substanceId;
-
-              // Get Active Moiety
-              this.getActiveMoiety(response.substanceId, 'ingredientname');
-
-            } else {    // Basis is strength
-              this.basisOfStrengthMessage = '';
-              this.ingredient.basisOfStrengthBdnum = response.bdnum;
-              this.basisOfStrengthName = response.name;
-              this.basisofStrengthSubstanceUuid = response.substanceId;
-
-              // Get Active Moiety
-              this.getActiveMoiety(response.substanceId, 'basisofstrength');
-            }
-          } else {
-            this.basisOfStrengthMessage = '';
-            this.basisOfStrengthMessage = 'No Ingredient Name found for this bdnum';
-          }
-        } else {
-          if (type === 'ingredientname') {
-            this.ingredientNameMessage = 'There is no Ingredient Name found for this bdnum';
-          } else {
-            this.basisOfStrengthMessage = 'There is no Basis of Strength found for this bdnum';
-          }
-        }
-      });
-    }
-  }
-  */
-
   getActiveMoiety(substanceUuid: string, type: string) {
     if (substanceUuid != null) {
       // Get Active Moiety - Relationship
@@ -360,7 +296,13 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
   }
 
   ingredientNameUpdated(substance: SubstanceSummary): void {
+    // Clear the Validation Message
     this.ingredientNameMessage = '';
+    this.ingredient.$$ingredientNameValidation = '';
+
+    // Clear Ingredient Name substance key
+    this.ingredient.substanceKey = '';
+
     if (substance != null) {
       const relatedSubstance: SubstanceRelated = {
         refPname: substance._name,
@@ -372,22 +314,20 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
 
       if (relatedSubstance != null) {
         if (relatedSubstance.refuuid != null) {
-          this.ingredientNameMessage = '';
+
+          // Clear Array
           this.ingredientNameActiveMoiety.length = 0;
 
           if (!this.substanceKeyTypeConfig) {
             alert('There is no Substance configuration found in config file: substance.linking.keyType.default. Unable to add Ingredient Name');
             this.ingredientNameMessage = 'Add Substance Key Type in Config';
           } else {
+
             this.getSubstanceCode(relatedSubstance.refuuid, 'ingredientname');
 
             this.substanceUuid = relatedSubstance.refuuid;
             this.ingredientName = relatedSubstance.name;
 
-            // Clear the Validation Message
-            this.ingredientNameMessage = '';
-            this.ingredient.$$ingredientNameValidation = '';
-
             // Populate Basis of Strength if it is empty/null
             if (!this.ingredient.basisOfStrengthSubstanceKey) {
 
@@ -397,11 +337,12 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
 
               this.basisOfStrengthIngredientName = relatedSubstance.name;
               this.basisOfStrengthSubstanceUuid = relatedSubstance.refuuid;
-              // Get Active Moiety
+              // Get Active Moiety for Basis of Strength
+              this.basisOfStrengthActiveMoiety.length = 0;  //Clear Array
               this.getActiveMoiety(this.substanceUuid, 'basisofstrength');
             }
 
-            // Get Active Moiety
+            // Get Active Moiety for Ingredient Name
             this.getActiveMoiety(this.substanceUuid, 'ingredientname');
           }
         }
@@ -412,6 +353,13 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
   }
 
   basisOfStrengthUpdated(substance: SubstanceSummary): void {
+    // Clear the Validation Message
+    this.basisOfStrengthMessage = '';
+    this.ingredient.$$basisOfStrengthValidation = '';
+
+    // Clear Basis of Strength Name substance key
+    this.ingredient.basisOfStrengthSubstanceKey = '';
+
     if (substance != null) {
       const relatedSubstance: SubstanceRelated = {
         refPname: substance._name,
@@ -423,7 +371,7 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
 
       if (relatedSubstance != null) {
         if (relatedSubstance.refuuid != null) {
-          this.basisOfStrengthMessage = '';
+
           this.basisOfStrengthActiveMoiety.length = 0;  //Clear Array
 
           if (!this.substanceKeyTypeConfig) {
@@ -435,10 +383,6 @@ export class IngredientFormComponent implements OnInit, OnDestroy {
             this.basisOfStrengthSubstanceUuid = relatedSubstance.refuuid;
             this.basisOfStrengthIngredientName = relatedSubstance.name;
 
-            // Clear the Validation Message
-            this.basisOfStrengthMessage = '';
-            this.ingredient.$$basisOfStrengthValidation = '';
-
             // Get Active Moiety
             this.getActiveMoiety(this.basisOfStrengthSubstanceUuid, 'basisofstrength');
           }
diff --git a/src/app/fda/application/application.module.ts b/src/app/fda/application/application.module.ts
index e7bd78a3c..f09f90c15 100644
--- a/src/app/fda/application/application.module.ts
+++ b/src/app/fda/application/application.module.ts
@@ -36,8 +36,6 @@ import { ApplicationDetailsBaseComponent } from './application-details/applicati
 import { ApplicationFormComponent } from './application-form/application-form.component';
 import { ApplicationProductFormComponent } from '../application/application-form/application-product-form/application-product-form.component';
 import { IngredientFormComponent } from './application-form/ingredient-form/ingredient-form.component';
-// import { JsonDialogFdaComponent } from '../json-dialog-fda/json-dialog-fda.component';
-// import { ConfirmDialogComponent } from './application-form/confirm-dialog/confirm-dialog.component';
 import { ApplicationService } from './service/application.service';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { SubstanceImageModule } from '@gsrs-core/substance/substance-image.module';
@@ -45,7 +43,6 @@ import { SubstanceSearchSelectorModule } from '../substance-search-select/substa
 import { FacetsManagerModule } from '@gsrs-core/facets-manager';
 import { JsonDialogFdaModule } from '../json-dialog-fda/json-dialog-fda.module';
 import { ConfirmDialogModule } from '../confirm-dialog/confirm-dialog.module';
-// import { CvInputComponent } from '@gsrs-core/substance-form/cv-input/cv-input.component';
 import { SubstanceFormModule } from '../../core/substance-form/substance-form.module';
 import { ApplicationTextSearchModule } from './application-text-search/application-text-search.module';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
@@ -54,8 +51,6 @@ import { CanActivateUpdateApplicationFormComponent } from './application-form/ca
 import { CanDeactivateApplicationFormComponent } from './application-form/can-deactivate-application-form.component';
 import { ApplicationLoadedComponent } from './application-loaded.component';
 
-// import { AppDateAdapter } from '../format-datepicker/format-datepicker';
-
 const applicationRoutes: Routes = [
   {
     path: 'browse-applications',
diff --git a/src/app/fda/config/config.json b/src/app/fda/config/config.json
index 0cb964f0a..c4a10ed3e 100644
--- a/src/app/fda/config/config.json
+++ b/src/app/fda/config/config.json
@@ -1018,6 +1018,7 @@
         "Dosage Form Name",
         "Ingredient Name (Preferred)",
         "Ingredient Name",
+        "Number of Ingredients",
         "Ingredient Type",
         "Product Type",
         "Product Code Type",
diff --git a/src/app/fda/impurities/impurities-form/impurities-form.component.ts b/src/app/fda/impurities/impurities-form/impurities-form.component.ts
index c1be82570..63a27fc51 100644
--- a/src/app/fda/impurities/impurities-form/impurities-form.component.ts
+++ b/src/app/fda/impurities/impurities-form/impurities-form.component.ts
@@ -494,10 +494,15 @@ export class ImpuritiesFormComponent implements OnInit, OnDestroy {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'impurities_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    let data = {jsonData: this.impurities, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: this.impurities
+      data: data
     });
 
     //   this.overlayContainer.style.zIndex = '1002';
@@ -509,7 +514,9 @@ export class ImpuritiesFormComponent implements OnInit, OnDestroy {
   saveJSON(): void {
     // apply the same cleaning to remove deleted objects and return what will be sent to the server on validation / submission
     let json = this.impurities;
+
     // this.json = this.cleanObject(substanceCopy);
+
     const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(json)));
     this.downloadJsonHref = uri;
 
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts
index 8b03b474f..339071ee5 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts
@@ -467,14 +467,20 @@ export class InvitroPharmacologyAssayDataImportComponent implements OnInit {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_bulk_assays_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
     let json: any = {};
     if (this.importedAssayJson !== undefined || this.importedAssayJson != null) {
       json = this.importedAssayJson;
     }
+
+    let data = {jsonData: json, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: json
+      data: data
     });
 
     // this.overlayContainer.style.zIndex = '1002';
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-details/invitro-pharmacology-details.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-details/invitro-pharmacology-details.component.ts
index 4d5661a89..a8765d73b 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-details/invitro-pharmacology-details.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-details/invitro-pharmacology-details.component.ts
@@ -167,10 +167,15 @@ export class InvitroPharmacologyDetailsComponent implements OnInit, OnDestroy {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_assay_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    let data = {jsonData: this.assay, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: this.assay
+      data: data
     });
 
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
index e3b66b00b..95324ff57 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
@@ -6,7 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { DatePipe, formatDate } from '@angular/common';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Subscription } from 'rxjs';
+import { forkJoin, Subscription } from 'rxjs';
 import { take, map } from 'rxjs/operators';
 import * as moment from 'moment';
 import * as XLSX from 'xlsx';
@@ -566,10 +566,15 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_assay_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    let data = {jsonData: this.invitroPharmacologyService.assay, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: this.invitroPharmacologyService.assay
+      data: data
     });
 
     //   this.overlayContainer.style.zIndex = '1002';
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assayset-form/invitro-pharmacology-assayset-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assayset-form/invitro-pharmacology-assayset-form.component.ts
index 47caab80a..39f90c27b 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assayset-form/invitro-pharmacology-assayset-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assayset-form/invitro-pharmacology-assayset-form.component.ts
@@ -25,7 +25,6 @@ import { GeneralService } from '../../../service/general.service';
 import { AppNotification, NotificationType } from '@gsrs-core/main-notification';
 import { StructureImageModalComponent } from '@gsrs-core/structure';
 import { SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component';
-import { JsonDialogFdaComponent } from '../../../json-dialog-fda/json-dialog-fda.component';
 import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
 
 /* Invitro Pharmacology Imports */
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
index b455e63bd..ead1d29d4 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
@@ -926,7 +926,7 @@
                           <app-substance-selector (selectionUpdated)="testAgentUpdated($event)"
                             eventCategory="substanceRelationshipRelatedSub"
                             placeholder="*Test Agent - Search by Name/CAS RN/UNII/BDNUM" header="Test Agent"
-                            [subuuid]="testAgentSubstanceUuid" [showMorelinks]="true">
+                            [subuuid]="assayResultInfo.invitroTestAgent.testAgentSubstanceUuid" [showMorelinks]="true">
                           </app-substance-selector>
                         </div>
 
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
index 034f03d24..e6c1c95dc 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { FormControl, Validators } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
@@ -7,8 +8,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { DatePipe, formatDate } from '@angular/common';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Subscription } from 'rxjs';
-import { take, map } from 'rxjs/operators';
+import { forkJoin, shareReplay, mergeMap, Subscription } from 'rxjs';
+import { take, map, catchError } from 'rxjs/operators';
 import * as moment from 'moment';
 import * as _ from 'lodash';
 import * as XLSX from 'xlsx';
@@ -50,8 +51,12 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   assay: InvitroAssayInformation;
   assayTemp: InvitroAssayInformation;
   firstAssayToSave: InvitroAssayInformation;
+  originalAssayFromDb: Array<InvitroAssayInformation> = [];
+
   firstAssaySavedResultInfo: InvitroAssayResultInformation;
+  originalAssayResultInfoFromDb: InvitroAssayResultInformation;
   assayResultInfo: InvitroAssayResultInformation = {};
+
   id?: number;
   totalAssayToSave = 0;
   assaySavedCounter = 0;
@@ -130,6 +135,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   isLinear = false;
 
   constructor(
+    public http: HttpClient,
     private _formBuilder: FormBuilder,
     private activatedRoute: ActivatedRoute,
     private router: Router,
@@ -192,16 +198,15 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
               const record = window.history.state.record;
               const response = JSON.parse(record);
               if (response) {
+
                 // this.scrub(response);
 
-                // Load Assay JSON into Assay Objects if value in Assay Id exists
-                this.invitroPharmacologyService.loadAssay(response);
-                this.assay = this.invitroPharmacologyService.assay;
+                // Get All Assay Sets
+                this.getAllAssaySets();
 
-                //this.getInvitroAssayDetails();
+                this.existingAssaysByAssaySetList = response;
 
-                // Get All the Assay Sets for checkboxes on the form
-                // this.getAllAssaySets();
+                this.loadDataFromImportJson();
 
                 // Stop the Loading/Spinner after the form data is loaded
                 this.isLoading = false;
@@ -253,11 +258,17 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
 
           this.existingAssaysByAssaySetList = response;
 
+          // Copy original records in the variable
+          this.originalAssayFromDb = _.cloneDeep(response);
+
           // Loop through Assays and find result information id where same as url id
           this.existingAssaysByAssaySetList.forEach(assay => {
             if (assay) {
+
+              // For loop for screening
               assay.invitroAssayScreenings.forEach((screening, indexScreeing) => {
                 if (screening) {
+
                   if (screening.invitroAssayResultInformation) {
 
                     // if Url Id is same as Result Information Id, use this screening records in the form
@@ -271,72 +282,32 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
                         screening._show = true;
 
                         //Copy Result Information
-                        this.createResultInfoObject();
+                        //  this.createResultInfoObject();
                       }
 
                       this.assayResultInfo = screening.invitroAssayResultInformation;
 
-                      /*
-                      this.assayResultInfo.batchNumber = screening.invitroAssayResultInformation.batchNumber;
-
-
-                      if (this.assayResultInfo.invitroReferences == null) {
-                        this.assayResultInfo.invitroReferences = [];
-                      }
-
-                      if (screening.invitroAssayResultInformation.invitroReferences.length > 0) {
-                        this.assayResultInfo.invitroReferences = screening.invitroAssayResultInformation.invitroReferences;
-                      }
-
-                       // screening.invitroAssayResultInformation.invitroReferences.forEach((reference, index) => {
-                       //    if (reference) {
-                       //     if (reference.primaryReference) {//
-                       //       if (reference.primaryReference == true) {
-                       //         this.referenceIndex = index;
-                       //         this.assayResultInfo.invitroReferences[index] = reference;
-                       //       }
-                       //     }
-                       //    }
-                       // });
-
-                      }
-
-                      if (screening.invitroAssayResultInformation.invitroLaboratory) {
-                        this.assayResultInfo.invitroLaboratory = screening.invitroAssayResultInformation.invitroLaboratory;
-                      }
+                      // copy the original invitroAssayResultInformation in variable
+                      this.originalAssayResultInfoFromDb = _.cloneDeep(screening.invitroAssayResultInformation);
 
-                      if (screening.invitroAssayResultInformation.invitroSponsor) {
-                        this.assayResultInfo.invitroSponsor = screening.invitroAssayResultInformation.invitroSponsor;
+                      // if references is null, create an object
+                      if (this.assayResultInfo.invitroReferences == null || (this.assayResultInfo.invitroReferences && this.assayResultInfo.invitroReferences.length == 0)) {
+                        this.assayResultInfo.invitroReferences = [{ primaryReference: true }];
                       }
 
-                      if (screening.invitroAssayResultInformation.invitroSponsorReport) {
-                        this.assayResultInfo.invitroSponsorReport = screening.invitroAssayResultInformation.invitroSponsorReport;
-                      }
-                       */
+                      // Test Agent assign substance key
                       if (screening.invitroAssayResultInformation.invitroTestAgent) {
-                        //   this.assayResultInfo.invitroTestAgent = screening.invitroAssayResultInformation.invitroTestAgent;
                         this.testAgentSubstanceKey = screening.invitroAssayResultInformation.invitroTestAgent.testAgentSubstanceKey;
                       }
 
-
                     } // if invitroAssayResultInformation.id == this.id
-
                   } // if invitroAssayResultInformation exists
+
                 } // if screening
-              });
+              }); // LOOP: screening
             }
           });
 
-          // before copying existing invitro pharamcology, delete the id
-          // if (newType && newType === 'copy') {
-          //   this.scrub(response);
-          // }
-
-          // this.invitroPharmacologyService.loadAssay(response);
-          // this.assay = this.invitroPharmacologyService.assay;
-
-          // } else {
-
           this.isLoading = false;
           this.loadingService.setLoading(this.isLoading);
         }
@@ -350,25 +321,6 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     }
   }
 
-  /*
-  getAllExistingAssays() {
-    const getInvitroSubscribe = this.invitroPharmacologyService.getAllAssays().subscribe(response => {
-      if (response) {
-        this.existingAssayList = response;
-      } else {
-        this.handleProductRetrivalError();
-      }
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-    }, error => {
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.handleProductRetrivalError();
-    });
-    this.subscriptions.push(getInvitroSubscribe);
-  }
-  */
-
   getAllAssaySets() {
     const getInvitroSubscribe = this.invitroPharmacologyService.getAllAssaySets().subscribe(response => {
       if (response) {
@@ -401,10 +353,6 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
           // add new screening
           const newInvitroAssayScreening: InvitroAssayScreening =
           {
-            // invitroReference: { invitroSponsor: {} },
-            //  invitroSponsorReport: { invitroSponsorSubmitters: [{}] },
-            //  invitroLaboratory: {},
-            //   invitroTestAgent: {},
             invitroAssayResult: {},
             invitroControls: []
           };
@@ -699,22 +647,84 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     this.assayResultInfo.invitroTestAgent = {};
   }
 
-  copyResultInfoForSaving() {
+  copyResultInfoForSaving(copyToOnlyLastScreening?: boolean) {
     // LOOP: assay list
     this.existingAssaysByAssaySetList.forEach((assay, indexAssay) => {
 
       // LOOP: screenings list
       assay.invitroAssayScreenings.forEach((screening, indexScreening) => {
-        // if Registering NEW RECORD, copy this Result Reference, Lab, Sponsor, Test Agent Info
-        //  if (!this.id) {
-        if (screening._show == true) {
-          screening.invitroAssayResultInformation = this.assayResultInfo;
-        }
-        //  }
+
+        // copy this Result Reference, Lab, Sponsor, Test Agent Info to assay object
+        if (copyToOnlyLastScreening == true) {
+          if (indexAssay == assay.invitroAssayScreenings.length - 1) {
+            if (screening._show == true) {
+              screening.invitroAssayResultInformation = this.assayResultInfo;
+            }
+          }
+        } else {
+          if (screening._show == true) {
+            screening.invitroAssayResultInformation = this.assayResultInfo;
+          }
+        } //else
       });
     });
   }
 
+  loadDataFromImportJson() {
+    // LOOP: assay list
+    this.existingAssaysByAssaySetList.forEach((assay, indexAssay) => {
+
+      // if (assay.invitroAssayScreenings == null) {
+      //   assay.invitroAssayScreenings = [];
+      // }
+
+      // LOOP: screenings list
+      assay.invitroAssayScreenings.forEach((screening, indexScreening) => {
+
+        // if Registering NEW RECORD, copy this Result Reference, Lab, Sponsor, Test Agent Info
+        if (screening._show == true) {
+
+          this.selectedAssaySet = screening.assaySet;
+
+          //Copy Result Information
+          this.createResultInfoObject();
+
+          if (screening.invitroAssayResultInformation) {
+            this.assayResultInfo = screening.invitroAssayResultInformation;
+
+
+            if (screening.invitroAssayResultInformation.id) {
+
+              // add new screening
+              const newInvitroAssayScreening: InvitroAssayScreening =
+              {
+                invitroAssayResult: {},
+                invitroControls: []
+              };
+
+              // Set to show on the UI
+              newInvitroAssayScreening._show = true;
+
+              newInvitroAssayScreening.assaySet = this.selectedAssaySet;
+
+              // Push new screening record in existing Assay
+              assay.invitroAssayScreenings.push(newInvitroAssayScreening);
+
+            }
+
+            if (screening._show) {
+              //  delete screening._show;
+            }
+
+          } // if screening.invitroAssayResultInformation exists
+
+
+        } // if screening._show == true
+
+      }); // LOOP: invitroAssayScreenings
+    }); // LOOP: assay
+  }
+
   createFirstAssayToSave() {
     // Using this assay list in the form
     if (this.existingAssaysByAssaySetList.length > 0) {
@@ -747,23 +757,17 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   }
 
   saveFirstNewAssay() {
-
-    /*this.validationMessages = null;
-    this.submissionMessage = '';
-    this.showSubmissionMessages = false;
-    this.validationResult = false;*/
-
     this.loadingService.setLoading(true);
     this.isLoading = true;
 
     this.isSavedSuccessfullyMessage = [];
 
+    // If saving Assays for existing Result
     if (this.id) {
-      this.saveRemainingAssays();
+      this.saveRemainingAssays(false);
     } else {
 
       // Registering NEW Screening, Saving the FIRST Assay
-
       // Create First Assay To Save
       if (this.firstAssayToSave == null) {
         this.createFirstAssayToSave();
@@ -822,10 +826,10 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
                 } else {
 
                   // remove the first screening, save the remaining screeing into the database
-                  this.existingAssaysByAssaySetList.splice(0, 1);
+                  // this.existingAssaysByAssaySetList.splice(0, 1);
 
                   // Save remaining assays
-                  this.saveRemainingAssays();
+                  this.saveRemainingAssays(true);
                 }
 
               } // if invitroAssayResultInformation exists
@@ -833,6 +837,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
             } // if responseAssay.invitroAssayScreenings.length > 0
           } // if response.id  // if saved successfully
         } // if response
+
       }, (error: SubstanceFormResults) => {
         this.showSubmissionMessages = true;
         this.loadingService.setLoading(false);
@@ -860,74 +865,279 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
 
   }
 
-  saveRemainingAssays() {
+  saveRemainingAssays(skipFirstRecord?: boolean) {
 
-    // Remove extra fields before saving
-    this.scrubExtraFields();
+    let assayApiUrlList: any = [];
+
+    const params = new HttpParams();
+    const options = {
+      params: params,
+      type: 'JSON',
+      headers: {
+        'Content-type': 'application/json'
+      }
+    };
+
+    const url = this.invitroPharmacologyService.apiBaseUrlWithInvitroPharmEntityUrl;
+
+    // Check if the JSON same as original.  If same json for invitroAssayResultInformation are not same
+    let isResultInfoSame = this.isJsonSame(this.originalAssayResultInfoFromDb, this.assayResultInfo);
+    if (isResultInfoSame == false) {
+      this.copyResultInfoForSaving(true);
+    }
 
     // Copy the screening to new variable
     let remainingAssays = _.cloneDeep(this.existingAssaysByAssaySetList);
 
-    remainingAssays.forEach(assay => {
+    // Remove extra fields before saving
+    this.scrubExtraFields(remainingAssays);
+
+    remainingAssays.forEach((assay, indexAssay) => {
       if (assay) {
 
-        assay.invitroAssayScreenings.forEach(screening => {
+        let isAssaySame = false;
+        this.originalAssayFromDb.forEach(originalAssay => {
+          if (originalAssay) {
+            if (originalAssay.id) {
+              if (originalAssay.id == assay.id) {
+                isAssaySame = this.isJsonSame(originalAssay, assay);
+              }
+            }
+          }
         });
 
-        // if registering new record, and invitroAssayResultInformation is null, assign the existing invitroAssayResultInformation
-        if (assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation == null) {
-          assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation = this.firstAssaySavedResultInfo;
+        // Only save to Database if the Assay record has changed otherwise will get server error "No Change Detected"
+        if (isAssaySame == false) {
+          // if registering new record, and invitroAssayResultInformation is null, assign the existing invitroAssayResultInformation
+          if (assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation == null) {
+            assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation = this.firstAssaySavedResultInfo;
+          } else {
+            // If No id found for invitroAssayResultInformation, copy the saved record
+            if (!assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation.id) {
+              assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation = this.firstAssaySavedResultInfo;
+            }
+          }
+
+          // Create API Url List to save into the database
+          if (skipFirstRecord == true && indexAssay == 0) {
+            // Do not save the first assay record
+          } else {
+
+            // make 5 Rest Api calls one at a time
+            const apiUrl = this.http.put<InvitroAssayInformation>(url, assay, options)
+            .pipe(
+              //mergeMap((apiCall) => res, 5))
+            shareReplay(1), catchError(error => { throw error; }));
+
+            assayApiUrlList.push(apiUrl);
+
+          }
         }
 
-        // Assign the assay to service assay
-        this.invitroPharmacologyService.assay = assay;
+      } // if assay
+    });  // FOR LOOP: Assay to Save
 
-        // Increment counter by 1
-        this.assaySavedCounter = this.assaySavedCounter + 1;
 
-        const saveSubscribe = this.invitroPharmacologyService.saveAssay().subscribe(response => {
+    let savedCount = 0;
 
-          if (response) {
+    // Save Assays into the database
+    forkJoin(assayApiUrlList).subscribe(
+      results => {
+        let resultList: any = [];
+        resultList = results;
+        // return list of array of the result
+        resultList.forEach(result => {
+          if (result.id) {
+            savedCount = savedCount + 1;
+          }
+        });
 
-            // Get the last screening from the returned/saved Assay
-            //   let screening = response.invitroAssayScreenings[response.invitroAssayScreenings.length - 1];
+        // if all the records are saved, refresh the page
+        if (savedCount == assayApiUrlList.length) {
 
-            // Get the saved result information from the database
-            // set invitroAssayResultInformation to local variable
-            //   if (screening.invitroAssayResultInformation) {
-            //     this.firstAssaySavedResultInfo = screening.invitroAssayResultInformation;
+          this.reloadPageAfterSave();
 
+          /*
+          this.validationMessages = null;
+          this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
+          this.showSubmissionMessages = true;
+          this.validationResult = false;
 
-            // Store in the list if this record was stored into the database successfully or not
-            this.isSavedSuccessfullyMessage.push(this.assaySavedCounter + '|' + response.id + '|' + 'true');
+          let forwardId = null;
+          if (this.firstAssaySavedResultInfo) {
+            if (this.firstAssaySavedResultInfo.id) {
+              forwardId = this.firstAssaySavedResultInfo.id;
+            }
+          } else if (this.id) {
+            forwardId = this.id;
+          }
 
-            this.loadingService.setLoading(false);
-            this.isLoading = false;
+          setTimeout(() => {
+            if (forwardId) {
+              this.invitroPharmacologyService.bypassUpdateCheck();
+              //const id = response.id;
+              this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+              this.router.onSameUrlNavigation = 'reload';
+              this.router.navigate(['/invitro-pharm/', forwardId, 'edit']);
+            } else {
+              alert("Something went wrong while retrieving the In-vitro Pharmacology Screening data");
+            }
+          }, 4000);  */
+        }
+      },
+    ) // forkJoin
 
-            this.validationMessages = null;
-            this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
-            this.showSubmissionMessages = true;
-            this.validationResult = false;
 
-            setTimeout(() => {
-              // // this.showSubmissionMessages = false;
-              //  this.submissionMessage = '';
-              if (response.id) {
-                this.invitroPharmacologyService.bypassUpdateCheck();
-                //const id = response.id;
-                this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-                this.router.onSameUrlNavigation = 'reload';
-                this.router.navigate(['/invitro-pharm/', this.id, 'edit']);
-              }
-            }, 4000);
-          } // if response remaining assays
+    if (assayApiUrlList.length == 0) {
+      this.reloadPageAfterSave();
+    }
 
-        });
-        this.subscriptions.push(saveSubscribe);
+    /*
+    // Assign the assay to service assay
+    this.invitroPharmacologyService.assay = assay;
 
-      } // if assay
+    // Increment counter by 1
+    this.assaySavedCounter = this.assaySavedCounter + 1;
+
+    const saveSubscribe = this.invitroPharmacologyService.saveAssay().subscribe(response => {
+
+      if (response) {
+
+        // Get the last screening from the returned/saved Assay
+        //   let screening = response.invitroAssayScreenings[response.invitroAssayScreenings.length - 1];
+
+        // Get the saved result information from the database
+        // set invitroAssayResultInformation to local variable
+        //   if (screening.invitroAssayResultInformation) {
+        //     this.firstAssaySavedResultInfo = screening.invitroAssayResultInformation;
+
+
+        // Store in the list if this record was stored into the database successfully or not
+        this.isSavedSuccessfullyMessage.push(this.assaySavedCounter + '|' + response.id + '|' + 'true');
+
+        this.loadingService.setLoading(false);
+        this.isLoading = false;
+
+        this.validationMessages = null;
+        this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
+        this.showSubmissionMessages = true;
+        this.validationResult = false;
+
+        setTimeout(() => {
+          // // this.showSubmissionMessages = false;
+          //  this.submissionMessage = '';
+          if (response.id) {
+            this.invitroPharmacologyService.bypassUpdateCheck();
+            //const id = response.id;
+            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigate(['/invitro-pharm/', this.id, 'edit']);
+          }
+        }, 4000);
+      } // if response remaining assays
+
+    });
+    this.subscriptions.push(saveSubscribe);
+     */
+
+  }
+
+  reloadPageAfterSave() {
+    this.validationMessages = null;
+    this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
+    this.showSubmissionMessages = true;
+    this.validationResult = false;
+
+    let forwardId = null;
+    if (this.firstAssaySavedResultInfo) {
+      if (this.firstAssaySavedResultInfo.id) {
+        forwardId = this.firstAssaySavedResultInfo.id;
+      }
+    } else if (this.id) {
+      forwardId = this.id;
+    }
+
+    setTimeout(() => {
+      if (forwardId) {
+        this.invitroPharmacologyService.bypassUpdateCheck();
+        //const id = response.id;
+        this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+        this.router.onSameUrlNavigation = 'reload';
+        this.router.navigate(['/invitro-pharm/', forwardId, 'edit']);
+      } else {
+        alert("Something went wrong while retrieving the In-vitro Pharmacology Screening data");
+      }
+
+      this.isLoading = false;
+      this.loadingService.setLoading(false);
+
+    }, 4000);
+  }
+
+  /*
+  saveBulkAssays(skipFirstRecord?: boolean) {
+    let assayApiUrlList: any = [];
+
+    const params = new HttpParams();
+    const options = {
+      params: params,
+      type: 'JSON',
+      headers: {
+        'Content-type': 'application/json'
+      }
+    };
+
+    const url = this.invitroPharmacologyService.apiBaseUrlWithInvitroPharmEntityUrl;
+
+    // Create API Url List to save into the database
+    this.assaysToSave.forEach((assay, indexAssay) => {
+      if (skipFirstRecord == true && indexAssay == 0) {
+        // Do not save the first assay record
+      } else {
+        const apiUrl = this.http.put<InvitroAssayInformation>(url, assay, options).pipe(
+          catchError(error => { throw error; }));
+
+        assayApiUrlList.push(apiUrl);
+      }
     });
+
+    let savedCount = 0;
+
+    // Save Assays into the database
+    forkJoin(assayApiUrlList).subscribe(
+      results => {
+        let resultList: any = [];
+        resultList = results;
+        // return list of array of the result
+        resultList.forEach(result => {
+          if (result.id) {
+            savedCount = savedCount + 1;
+          }
+        });
+
+        // if all the records are saved, refresh the page
+        if (savedCount == assayApiUrlList.length) {
+          this.validationMessages = null;
+          this.submissionMessage = 'In-vitro Pharmacology Assay data was saved successfully!';
+          this.showSubmissionMessages = true;
+          this.validationResult = false;
+
+          setTimeout(() => {
+            this.showSubmissionMessages = false;
+            this.submissionMessage = '';
+            this.invitroPharmacologyService.bypassUpdateCheck();
+            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigateByUrl('/invitro-pharm/assaySetBuilder?assaySet=' + this.selectedAssaySet);
+          }, 4000);
+        }
+
+        this.isLoading = false;
+        this.loadingService.setLoading(false);
+      },
+    )
   }
+  */
 
   submit(): void {
     this.isLoading = true;
@@ -940,7 +1150,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     // }
 
     // Remove extra fields before saving
-    this.scrubExtraFields();
+    this.scrubExtraFields(this.existingAssaysByAssaySetList);
 
     /*
     this.invitroPharmacologyService.saveBulkAssays(this.existingAssaysByAssaySetList).subscribe(response => {
@@ -1002,17 +1212,22 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_assay_screening_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
     // call copy
     if (!this.id) {
       this.copyResultInfoForSaving();
     }
 
     let json = this.existingAssaysByAssaySetList;
-    //let json = this.assayResultInfo;
+
+    let data = {jsonData: json, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: json
+      data: data
     });
 
     //   this.overlayContainer.style.zIndex = '1002';
@@ -1023,13 +1238,31 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
 
   saveJSON(): void {
     // apply the same cleaning to remove deleted objects and return what will be sent to the server on validation / submission
-    let json = this.invitroPharmacologyService.assay;
+    // let json = this.invitroPharmacologyService.assay;
     // this.json = this.cleanObject(substanceCopy);
+
+    if (this.existingAssaysByAssaySetList.length > 0) {
+
+      // copy the Result Information on the last screening or where _show == true
+      // call copy, THIS LINE MUST be before deleteing the _show field in the next code
+      this.existingAssaysByAssaySetList.forEach(assay => {
+        assay.invitroAssayScreenings.forEach(screening => {
+          if (screening) {
+            if (screening._show == true) {
+              screening.invitroAssayResultInformation = this.assayResultInfo;
+            }
+          }
+        });
+      });
+    }
+
+    let json = this.existingAssaysByAssaySetList;
+
     const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(json)));
     this.downloadJsonHref = uri;
 
     const date = new Date();
-    this.jsonFileName = 'assay_screening_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+    this.jsonFileName = 'invitro_assay_screening_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
   }
 
   importJSON(): void {
@@ -1102,7 +1335,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       }
 
       assay.invitroAssayScreenings[lastScreeningIndex].invitroSummary.targetName = assay.targetName;
-     
+
       // Assign Summary Target Name from Assay Target Name
       // if Assay Target Name Substance Key Type is UUID, assign it to Summary Target Name Substance UUID, otherwise
       // get the Substance Uuid
@@ -1171,9 +1404,9 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       /* SUBSTANCE KEY RESOLVER BEGIN                       */
       /**************************************************** */
       if (this.substanceKeyTypeForInvitroPharmacologyConfig) {
-       // alert('There is no Substance Key Type configuration found in the frontend config file: substance.linking.keyType.productKeyType:"UUID". Unable to add Ingredient Name when saving this record.');
-      //  this.ingredientNameMessage = 'Add Substance Key Type in Config';
-      //} else {
+        // alert('There is no Substance Key Type configuration found in the frontend config file: substance.linking.keyType.productKeyType:"UUID". Unable to add Ingredient Name when saving this record.');
+        //  this.ingredientNameMessage = 'Add Substance Key Type in Config';
+        //} else {
         // KEY RESOLVER
         if (this.substanceKeyTypeForInvitroPharmacologyConfig === 'UUID' || this.substanceKeyTypeForInvitroPharmacologyConfig === 'APPROVAL_ID') {
           this.assayResultInfo.invitroTestAgent.testAgentSubstanceKey = this.generalService.getSubstanceKeyByRelatedSubstanceResolver(relatedSubstance, this.substanceKeyTypeForInvitroPharmacologyConfig);
@@ -1401,6 +1634,22 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
         if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.testDate) {
           assay.invitroAssayScreenings[indexScreening].invitroAssayResult.testDate = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.testDate;
         }
+
+        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinAdded) {
+          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinAdded = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProteinAdded;
+        }
+
+        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProtein) {
+          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProtein = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProtein;
+        }
+
+        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentration) {
+          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentration = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProteinConcentration;
+        }
+
+        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentrationUnits) {
+          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentrationUnits = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProteinConcentrationUnits;
+        }
       }
     });
     // }
@@ -1469,8 +1718,23 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexScreening].invitroControls.splice(indexControl, 1);
   }
 
-  scrubExtraFields() {
-    this.existingAssaysByAssaySetList.forEach(assay => {
+  isJsonSame(sourceJson: any, destinationJson: any) {
+    let jsonSame = false;
+
+    console.log("SOURCE SOURCE: " + JSON.stringify(sourceJson));
+    console.log("DESTIONATION " + JSON.stringify(destinationJson));
+
+
+    if ((sourceJson) && (destinationJson)) {
+      if (JSON.stringify(sourceJson) == JSON.stringify(destinationJson)) {
+        jsonSame = true;
+      }
+    }
+    return jsonSame;
+  }
+
+  scrubExtraFields(assayToScrub) {
+    assayToScrub.forEach(assay => {
       if (assay) {
         assay.invitroAssayScreenings.forEach(screening => {
           if (screening) {
@@ -1533,11 +1797,4 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     return old;
   }
 
-  /*
-  updateDateTypeDate(event) {
-    const impDate = new Date(event);
-    // Adding one day since the Date object is decreasing one day.  moment.utc did not work.
-    this.invitroPharmacologyService.dateTypeDate = moment(impDate).add(1, 'days').format('MM/DD/yyyy');
-  }
-  */
 }
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-summary-form/invitro-pharmacology-summary-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-summary-form/invitro-pharmacology-summary-form.component.ts
index 1dc20ef9f..3b3164a9e 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-summary-form/invitro-pharmacology-summary-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-summary-form/invitro-pharmacology-summary-form.component.ts
@@ -699,18 +699,17 @@ export class InvitroPharmacologySummaryFormComponent implements OnInit, OnDestro
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_assay_summary_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    let data = {jsonData: this.assayToSave, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      // data: this.scrub(this.newAssayList)
-      // data: this.assayList
-
-      data: this.assayToSave
-      //data: this.cleanData(this.assayToSave)
-      // data: this.invitroPharmacologyService.assay
+      data: data
     });
 
-    //   this.overlayContainer.style.zIndex = '1002';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
     });
     this.subscriptions.push(dialogSubscription);
@@ -827,8 +826,6 @@ export class InvitroPharmacologySummaryFormComponent implements OnInit, OnDestro
       this.testAgentSubstanceKey = substance.uuid
       this.testAgent = substance._name;
 
-      this.testAgent = substance._name;
-
       this.resultInfo.invitroTestAgent = {};
       this.resultInfo.invitroTestAgent.testAgent = substance._name;
       this.resultInfo.invitroTestAgent.testAgentSubstanceUuid = substance.uuid
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-screening-data-import/invitro-pharmacology-screening-data-import.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-screening-data-import/invitro-pharmacology-screening-data-import.component.ts
index fad062e5a..074737364 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-screening-data-import/invitro-pharmacology-screening-data-import.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-screening-data-import/invitro-pharmacology-screening-data-import.component.ts
@@ -769,7 +769,7 @@ export class InvitroPharmacologyScreeningDataImportComponent implements OnInit {
     }
   }
   */
- 
+
   importAssayJSONIntoDatabase() {
 
     this.loadingService.setLoading(true);
@@ -865,18 +865,22 @@ export class InvitroPharmacologyScreeningDataImportComponent implements OnInit {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'invitro_pharm_bulk_assay_screenings_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
     let json: any = {};
     if (this.assayToSave.length > 0) {
-      //  if (this.importedAssayJson !== undefined || this.importedAssayJson != null) {
       json = this.assayToSave;
     }
+
+    let data = {jsonData: json, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: json
+      data: data
     });
 
-    // this.overlayContainer.style.zIndex = '1002';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
     });
     this.subscriptions.push(dialogSubscription);
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology.component.ts
index ad40c0444..865d89ae5 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology.component.ts
@@ -41,19 +41,6 @@ export class InvitroPharmacologyComponent implements OnInit {
 
 
   showJSON(): void {
-    /*
-    let cleanApplication = this.cleanApplication();
-    const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
-      width: '90%',
-      height: '90%',
-      data: cleanApplication
-    });
-
-    //   this.overlayContainer.style.zIndex = '1002';
-    const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
-    });
-    this.subscriptions.push(dialogSubscription);
-    */
   }
 
 }
\ No newline at end of file
diff --git a/src/app/fda/json-dialog-fda/json-dialog-fda.component.html b/src/app/fda/json-dialog-fda/json-dialog-fda.component.html
index 86e498471..3f7b52060 100644
--- a/src/app/fda/json-dialog-fda/json-dialog-fda.component.html
+++ b/src/app/fda/json-dialog-fda/json-dialog-fda.component.html
@@ -5,7 +5,7 @@ <h1>JSON Object structure</h1>
     <button mat-flat-button *ngIf="!raw" (click)="expand = !expand">{{expand? 'collapse':'expand'}}</button>
     <span class="middle-fill"></span>
     <a mat-flat-button color="primary" [href]="downloadJsonHref"
-      download="{{json.appType}}.json">
+      download="{{jsonFilename}}.json">
       <span>Export JSON</span>
     </a>
   </div>
diff --git a/src/app/fda/json-dialog-fda/json-dialog-fda.component.ts b/src/app/fda/json-dialog-fda/json-dialog-fda.component.ts
index 289e24771..c2e95ebb7 100644
--- a/src/app/fda/json-dialog-fda/json-dialog-fda.component.ts
+++ b/src/app/fda/json-dialog-fda/json-dialog-fda.component.ts
@@ -14,6 +14,8 @@ export class JsonDialogFdaComponent implements OnInit {
 
   public dialogRef: MatDialogRef<JsonDialogFdaComponent>;
   public json: any;
+  jsonFilename: null;
+
   expand = true;
   raw = false;
   downloadJsonHref: any;
@@ -26,7 +28,16 @@ export class JsonDialogFdaComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.json = this.data;
+    // if json data exists
+    if (this.data.jsonData) {
+    this.json = this.data.jsonData;
+    }
+
+    // if filename exists, save the json in this filename
+    if (this.data.jsonFilename) {
+      this.jsonFilename = this.data.jsonFilename;
+    }
+
     const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(this.json)));
     this.downloadJsonHref = uri;
   }
diff --git a/src/app/fda/product/model/product.model.ts b/src/app/fda/product/model/product.model.ts
index 11599327c..959f42448 100644
--- a/src/app/fda/product/model/product.model.ts
+++ b/src/app/fda/product/model/product.model.ts
@@ -11,7 +11,7 @@ export interface Product {
   status?: string;
   nonProprietaryName?: string;
   proprietaryName?: string;
-  pharmacedicalDosageForm?: string;
+  productContainer?: string;
   composeProductName?: string;
   releaseCharacteristic?: string;
   strengthCharacteristic?: string;
@@ -268,39 +268,6 @@ export interface ProductIngredient {
   $$basisOfStrengthValidation?: string;
 }
 
-export interface ProductAll {
-  id?: number;
-  appTypeNumber?: string;
-  appType?: string;
-  appNumber?: string;
-  /*
-  source?: string;
-  publicDomain?: number;
-  productType?: string;
-  sourceType?: string;
-  unitPresentation?: string;
-  routeAdmin?: string;
-  status?: string;
-  nonProprietaryName?: string;
-  proprietaryName?: string;
-  pharmacedicalDosageForm?: string;
-  composeProductName?: string;
-  releaseCharacteristic?: string;
-  strengthCharacteristic?: string;
-  countryCode?: string;
-  language?: string;
-  createdBy?: string;
-  createDate?: number;
-  modifiedBy?: string;
-  modifyDate?: number;
-  internalVersion?: number;
-  productNameList?: Array<ProductName>;
-  productCodeList?: Array<ProductCode>;
-  productCompanyList?: Array<ProductCompany>;
-  productManufactureItems?: Array<ProductComponent>;
-  */
-}
-
 export interface ValidationResults {
   valid?: boolean;
   validationMessages?: Array<ValidationMessage>;
diff --git a/src/app/fda/product/product-details/product-details-base.component.ts b/src/app/fda/product/product-details/product-details-base.component.ts
index 6bc9dee74..ccdb66ce5 100644
--- a/src/app/fda/product/product-details/product-details-base.component.ts
+++ b/src/app/fda/product/product-details/product-details-base.component.ts
@@ -1,23 +1,30 @@
 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { DomSanitizer, SafeUrl, Title } from '@angular/platform-browser';
+import * as defiant from '@gsrs-core/../../../node_modules/defiant.js/dist/defiant.min.js';
 import * as moment from 'moment';
-import { Title } from '@angular/platform-browser';
+import * as _ from 'lodash';
 
 /* GSRS Core Import */
 import { LoadingService } from '@gsrs-core/loading';
 import { GoogleAnalyticsService } from '@gsrs-core/google-analytics';
 import { UtilsService } from '../../../core/utils/utils.service';
+import { ConfigService } from '@gsrs-core/config';
 import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary/controlled-vocabulary.service';
 import { MainNotificationService } from '@gsrs-core/main-notification';
 import { AppNotification, NotificationType } from '@gsrs-core/main-notification';
 import { VocabularyTerm } from '@gsrs-core/controlled-vocabulary/vocabulary.model';
+import { StructureImageModalComponent, StructureService } from '@gsrs-core/structure';
+import { JsonDialogFdaComponent } from '../../json-dialog-fda/json-dialog-fda.component';
 
 /* GSRS Product Import */
 import { ProductService } from '../service/product.service';
 import { GeneralService } from '../../service/general.service';
-import { Product } from '../model/product.model';
+import { Product, ProductIngredient } from '../model/product.model';
+
 
 @Component({
   selector: 'app-product-details-base',
@@ -26,16 +33,32 @@ import { Product } from '../model/product.model';
 })
 export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDestroy {
 
+  private ACTIVE_INGREDIENT_UPPERCASE = 'ACTIVE INGREDIENT';
+  private ACTIVE_INGREDIENT_LOWERCASE = 'Active Ingredient';
+
+  activeIngredients: Array<ProductIngredient> = [];
+  otherIngredients: Array<ProductIngredient> = [];
+
+  showMoreLessActiveIngred = false;
+  showMoreLessOtherIngred = false;
+
+  showMoreLessSummaries = false;
+  showMoreLessFullDetails = false;
+
+  showMoreLessManufacture = false;
+
   ingredientNameActiveMoiety = new Array<String>();
   basisOfStrengthActiveMoiety = new Array<String>();
   productId: string;
   src: string;
   product: Product;
   iconSrcPath: string;
+  dailyMedUrlConfig = '';
   message = '';
   isAdmin = false;
   downloadJsonHref: any;
-  jsonFileName: string;
+  jsonFilename: string;
+  private overlayContainer: HTMLElement;
   subscriptions: Array<Subscription> = [];
   languageVocabulary: { [vocabularyTermValue: string]: VocabularyTerm } = {};
 
@@ -49,14 +72,23 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
     private gaService: GoogleAnalyticsService,
     private utilsService: UtilsService,
     public cvService: ControlledVocabularyService,
+    public configService: ConfigService,
     public titleService: Title,
+    public overlayContainerService: OverlayContainer,
+    public dialog: MatDialog,
     public sanitizer: DomSanitizer) { }
 
   ngOnInit() {
+    this.overlayContainer = this.overlayContainerService.getContainerElement();
+
     this.loadingService.setLoading(true);
     this.productId = this.activatedRoute.snapshot.params['id'];
     this.src = this.activatedRoute.snapshot.params['src'];
 
+    // Get Daily Med Url from Configuration
+    this.dailyMedUrlConfig = this.generalService.getDailyMedUrlConfig();
+    this.iconSrcPath = `${this.configService.environment.baseHref || ''}assets/icons/fda/icon_dailymed.png`;
+
     if (this.productId != null) {
       this.getProduct();
     } else {
@@ -117,6 +149,9 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
 
           // Get Ingredient Name for the Substance Key
           this.getSubstanceBySubstanceKey();
+
+          // Get Daily Med Url
+          this.getDailyMedUrlforProductCode();
         }
       }
     }, error => {
@@ -127,6 +162,14 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
   }
 
   getSubstanceBySubstanceKey() {
+    // Set to []
+    this.product._activeIngredients = [];
+    this.product._otherIngredients = [];
+
+    // Hide/Show
+    this.showMoreLessActiveIngred = true;
+    this.showMoreLessOtherIngred = true;
+
     if (this.product != null) {
       this.product.productManufactureItems.forEach(elementComp => {
         if (elementComp != null) {
@@ -148,6 +191,7 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
                       if (response) {
                         elementIngred._substanceUuid = response.uuid;
                         elementIngred._ingredientName = response._name;
+                        elementIngred._approvalId = response.approvalID;
                         let substanceApprovalId = response.approvalID;
 
                         // if Substance is public
@@ -160,6 +204,27 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
 
                         } // if Substance is public
 
+
+                        // if Ingredient Type exists
+                        if (elementIngred.ingredientType) {
+
+                          // Active Ingredient Count
+                          if (elementIngred.ingredientType == this.ACTIVE_INGREDIENT_UPPERCASE
+                            || elementIngred.ingredientType == this.ACTIVE_INGREDIENT_LOWERCASE) {
+
+                            // Store Active Ingredient in an Array
+                            this.product._activeIngredients.push(elementIngred);
+                          }
+                          // Inactive and Other Ingredient Count
+                          else if (elementIngred.ingredientType != this.ACTIVE_INGREDIENT_UPPERCASE
+                            && elementIngred.ingredientType != this.ACTIVE_INGREDIENT_LOWERCASE) {
+
+                            // Store Active Ingredient in an Array
+                            this.product._otherIngredients.push(elementIngred);
+                          }
+                        } // if Ingredient Type exists
+
+
                       } // if reponse
                     });
                     this.subscriptions.push(subSubscription);
@@ -229,13 +294,79 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
     }
   }
 
+  getDailyMedUrlforProductCode(): void {
+    this.product.productProvenances.forEach((prov, indexProv) => {
+      prov.productCodes.forEach(prodCode => {
+
+        // if Product Code Type is 'NDC CODE', show Daily Med link on the Product page.
+        if (prodCode) {
+          if (prodCode.productCode) {
+            if (prodCode.productCodeType && prodCode.productCodeType === 'NDC CODE') {
+              prodCode._dailyMedUrl = this.dailyMedUrlConfig + prodCode.productCode;
+            }
+          }
+        }
+      });
+    });
+  }
+
   saveJSON(): void {
-    let json = this.product;
-    const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(json)));
+    const copyProd = _.cloneDeep(this.product);
+    let cleanProduct = this.scrub(copyProd);
+
+    const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(cleanProduct)));
     this.downloadJsonHref = uri;
 
     const date = new Date();
-    this.jsonFileName = 'product_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+    this.jsonFilename = 'product_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+  }
+
+  showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'product_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    const copyProd = _.cloneDeep(this.product);
+    let cleanProduct = this.scrub(copyProd);
+
+    let data = {jsonData: cleanProduct, jsonFilename: jsonFilename};
+
+    const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
+      width: '90%',
+      height: '90%',
+      data: data
+    });
+
+    // this.overlayContainer.style.zIndex = '1002';
+    const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
+    });
+    this.subscriptions.push(dialogSubscription);
+  }
+
+  openImageModal(subUuid: string, displayName?: string, approvalID?: string): void {
+    let data: any;
+    data = {
+      structure: subUuid,
+      uuid: subUuid,
+      approvalID: approvalID,
+      displayName: displayName
+    };
+
+    const dialogRef = this.dialog.open(StructureImageModalComponent, {
+      height: '90%',
+      width: '680px',
+      panelClass: 'structure-image-panel',
+      data: data
+    });
+
+    this.overlayContainer.style.zIndex = '1002';
+
+    const subscription = dialogRef.afterClosed().subscribe(() => {
+      this.overlayContainer.style.zIndex = '1002';
+      subscription.unsubscribe();
+    }, () => {
+      this.overlayContainer.style.zIndex = '1002';
+      subscription.unsubscribe();
+    });
   }
 
   private handleSubstanceRetrivalError() {
@@ -255,4 +386,82 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
     return this.utilsService.getSafeStructureImgUrl(structureId, size, true);
   }
 
+  toggleShowMoreLessActiveIngred() {
+    this.showMoreLessActiveIngred = !this.showMoreLessActiveIngred;
+  }
+
+  toggleShowMoreLessOtherIngred() {
+    this.showMoreLessOtherIngred = !this.showMoreLessOtherIngred;
+  }
+
+  toggleShowMoreLessSummaries() {
+    this.showMoreLessSummaries = !this.showMoreLessSummaries;
+  }
+
+  toggleShowMoreLessFullDetails() {
+    this.showMoreLessFullDetails = !this.showMoreLessFullDetails;
+  }
+
+  toggleShowMoreLessManufacture() {
+    this.showMoreLessManufacture = !this.showMoreLessManufacture;
+  }
+
+  scrub(oldraw: any): any {
+    const old = oldraw;
+
+    const activeMoietyHolders = defiant.json.search(old, '//*[_ingredientNameActiveMoieties]');
+    for (let i = 0; i < activeMoietyHolders.length; i++) {
+      if (activeMoietyHolders[i]._ingredientNameActiveMoieties) {
+        delete activeMoietyHolders[i]._ingredientNameActiveMoieties;
+      }
+    }
+
+    const basisOfStrenghActiveMoietyHolders = defiant.json.search(old, '//*[_basisOfStrengthActiveMoieties]');
+    for (let i = 0; i < basisOfStrenghActiveMoietyHolders.length; i++) {
+      if (basisOfStrenghActiveMoietyHolders[i]._basisOfStrengthActiveMoieties) {
+        delete basisOfStrenghActiveMoietyHolders[i]._basisOfStrengthActiveMoieties;
+      }
+    }
+
+    const basisOfStrengthSubUuidHolders = defiant.json.search(old, '//*[_basisOfStrengthSubstanceUuid]');
+    for (let i = 0; i < basisOfStrengthSubUuidHolders.length; i++) {
+      if (basisOfStrengthSubUuidHolders[i]._basisOfStrengthSubstanceUuid) {
+        delete basisOfStrengthSubUuidHolders[i]._basisOfStrengthSubstanceUuid;
+      }
+    }
+
+    const basisOfStrengthIngNameHolders = defiant.json.search(old, '//*[_basisOfStrengthIngredientName]');
+    for (let i = 0; i < basisOfStrengthIngNameHolders.length; i++) {
+      if (basisOfStrengthIngNameHolders[i]._basisOfStrengthIngredientName) {
+        delete basisOfStrengthIngNameHolders[i]._basisOfStrengthIngredientName;
+      }
+    }
+
+    const substanceUuidHolders = defiant.json.search(old, '//*[_substanceUuid]');
+    for (let i = 0; i < substanceUuidHolders.length; i++) {
+      if (substanceUuidHolders[i]._substanceUuid) {
+        delete substanceUuidHolders[i]._substanceUuid;
+      }
+    }
+
+    const ingredientNameHolders = defiant.json.search(old, '//*[_ingredientName]');
+    for (let i = 0; i < ingredientNameHolders.length; i++) {
+      if (ingredientNameHolders[i]._ingredientName) {
+        delete ingredientNameHolders[i]._ingredientName;
+      }
+    }
+
+    const approvalIdHolders = defiant.json.search(old, '//*[_approvalId]');
+    for (let i = 0; i < approvalIdHolders.length; i++) {
+      if (approvalIdHolders[i]._approvalId) {
+        delete approvalIdHolders[i]._approvalId;
+      }
+    }
+
+    delete old['_activeIngredients'];
+    delete old['_otherIngredients'];
+
+    return old;
+  }
+
 }
diff --git a/src/app/fda/product/product-details/product-details/product-details.component.html b/src/app/fda/product/product-details/product-details/product-details.component.html
index f72231d70..e02c87f49 100644
--- a/src/app/fda/product/product-details/product-details/product-details.component.html
+++ b/src/app/fda/product/product-details/product-details/product-details.component.html
@@ -12,6 +12,16 @@
         Product Details &nbsp;&nbsp;&nbsp;&nbsp;
       </div>
 
+      <div class="margintopneg10px">
+        <!-- Show Json -->
+        <span *ngIf="product && product.id">
+          <a button mat-icon-button color="primary" (click)="showJSON()"
+             matTooltip='Show JSON'>
+            <mat-icon>article</mat-icon>
+          </a>&nbsp;
+        </span>
+      </div>
+
       <div class="margintopneg10px">
         <!-- Download Json -->
         <span *ngIf="product && product.id">
@@ -30,7 +40,7 @@
         </a>
       </div>
 
-      <div class="margintopneg10px">
+      <div class="margintopneg10px marginleft5px">
         <!-- Copy Product to New Register -->
         <a mat-icon-button [routerLink]="['/product/register']" [queryParams]="{copyId:product.id}"
           matTooltip='copy this Product to new Product registration form' *ngIf="isAdmin">
@@ -38,15 +48,6 @@
         </a>
       </div>
 
-      <!--
-      <div>
-        <span>
-          <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window" *ngIf="isAdmin">
-          </mat-icon>
-        </span>
-      </div>
-      -->
-
       <div class="width60percent marginleft50px font11px" *ngIf="product.id">
         <span class="colorgray">Created By:</span> {{product.createdBy}}&nbsp;&nbsp;&nbsp;
         <span class="colorgray">Create Date:</span>
@@ -56,991 +57,545 @@
       </div>
 
     </div> <!-- class=divflex -->
-  </div> <!-- class=divcenter-->
 
 
-  <!-- Product OVERVIEW -->
-  <div class="details-container margintop20px">
+    <div class="margintop10px font16px colorblue"><b>Product Summaries</b>
 
-    <mat-card class="bordergray">
-      <mat-card-title class="title2">
-        PRODUCT OVERVIEW
-      </mat-card-title>
-      <mat-card-content>
-
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Administravail Pharmacedical Dosage Form:
-            </div>
-            <div class="row-property-value">
-              {{product.pharmacedicalDosageForm}}
-            </div>
-          </div>
-          <div class="row-property">
-            <div class="row-property-key">
-              Route of Administration:
-            </div>
-            <div class="row-property-value">
-              {{product.routeAdmin}}
-            </div>
-          </div>
-        </div>
+      &nbsp;&nbsp;&nbsp;
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Effective Date:
-            </div>
-            <div class="row-property-value">
-              {{product.effectiveDate}}
-            </div>
-          </div>
-          <div class="row-property">
-            <div class="row-property-key">
-              Unit of Presentation:
-            </div>
-            <div class="row-property-value">
-              {{product.unitPresentation}}
-            </div>
-          </div>
-        </div>
+      <a href="" (click)="toggleShowMoreLessSummaries(); false">
+        <span *ngIf="showMoreLessSummaries"><b>Show</b></span>
+        <span *ngIf="!showMoreLessSummaries"><b>Hide</b></span>
+      </a>
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              End Date:
-            </div>
-            <div class="row-property-value">
-              {{product.endDate}}
-            </div>
-          </div>
-          <div class="row-property">
-            <div class="row-property-key">
-              Country Code:
-            </div>
-            <div class="row-property-value">
-              {{product.countryCode}}
-            </div>
-          </div>
-        </div>
+      <br>
+    </div>
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Shelf Life:
-            </div>
-            <div class="row-property-value">
-              {{product.shelfLife}}
-            </div>
-          </div>
+    <div *ngIf="!showMoreLessSummaries">
+      <br>
 
-          <div class="row-property">
-            <div class="row-property-key">
-              Language:
-            </div>
-            <div class="row-property-value">
-              {{product.language}}
-            </div>
-          </div>
-        </div>
+      <!-- Product Selective Details -->
+      <!-- GROUP BY PROVENANCE BEGIN -->
+      <mat-tab-group class="margintop10px" (selectedTabChange)="tabSelectedUpdated($event)">
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Storage Conditions:
-            </div>
-            <div class="row-property-value">
-              {{product.storageConditions}}
-            </div>
-          </div>
-          <div class="row-property">
-            <div class="row-property-key">
-              Manufacturer Code:
-            </div>
-            <div class="row-property-value">
-              {{product.manufacturerCode}}
-            </div>
-          </div>
-        </div>
+        <!-- ######################################################################## -->
+        <!-- MAT-TAB: PROVENANCE BEGIN - Display data in each tab for each Provenance -->
+        <!-- #########################################################################-->
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Number of Manufacture Item:
-            </div>
-            <div class="row-property-value">
-              {{product.numberOfManufactureItem}}
-            </div>
-          </div>
-          <div class="row-property">
-            <div class="row-property-key">
-              Manufacturer Code Type:
-            </div>
-            <div class="row-property-value">
-              {{product.manufacturerCodeType}}
-            </div>
-          </div>
-        </div>
+        <mat-tab class="margintopneg10 bordergray"
+          *ngFor="let prodProv of product.productProvenances; let indexProv = index">
 
-        <div class="row">
-          <div class="row-property">
-            <div class="row-property-key">
-              Manufacturer Name:
-            </div>
-            <div class="row-property-value">
-              {{product.manufacturerName}}
-            </div>
-          </div>
-        </div>
-
-      </mat-card-content>
-    </mat-card>
-  </div> <!-- class=details-container -->
-  <!-- Product OVERVIEW End -->
-
-
-  <!-- Product PROVENANCE Begin -->
-  <div class="details-container margintop20px">
-    <mat-card class="bordergray">
-      <mat-card-title class="title2">
-        PRODUCT PROVENANCE ({{product.productProvenances.length}})
-      </mat-card-title>
-      <div *ngIf="product.productProvenances.length > 0">
-        <mat-card-content>
-          <div class="marginbottom60px" *ngFor="let x of product.productProvenances; let i = index">
-
-            <hr *ngIf="i > 0">
-            <div class="colorgreen">
-              <b>Provenance {{(i+1)}} of {{product.productProvenances.length}}</b>
-            </div>
-            <br><br>
+          <ng-template mat-tab-label>
+            <span class="font13px">Provenance:</span>&nbsp;
+            <span class="font15px">
+              {{prodProv.provenance}}
+            </span>
+          </ng-template>
 
+          <div class="bordergray borderbottomnone">
             <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Provenance:
-                </div>
-                <div class="row-property-value">
-                  <span class="font16px colorred"><b>{{ x.provenance }}</b></span>
-                </div>
-              </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Product Status:
-                </div>
-                <div class="row-property-value">
-                  {{x.productStatus}}
-                </div>
-              </div>
-            </div>
 
-            <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Product Type:
-                </div>
-                <div class="row-property-value">
-                  {{ x.productType }}
-                </div>
-              </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Public Domain:
-                </div>
-                <div class="row-property-value">
-                  {{x.publicDomain}}
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Product Names:
                 </div>
-              </div>
-            </div>
+                <div class="row-property-value-2">
+                  <div *ngIf="prodProv.productNames.length > 0; else noProductName">
+                    <div *ngFor="let prodName of prodProv.productNames; let indexName = index">
+                      <div class="divflex">
+                        <div class="colororange font14px"><b>{{prodName.productName}}</b>
 
-            <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Application Type:
-                </div>
-                <div class="row-property-value">
-                  {{ x.applicationType }}
+                          <span *ngIf="prodName.productNameType">
+                            <span class="colorgray font11px">&nbsp;({{prodName.productNameType}})</span>
+                          </span>
+
+                        </div>
+
+                        <div *ngIf="prodName.displayName && prodName.displayName == true">
+                          &nbsp;
+                          <mat-icon class="margintopneg5" matTooltip="Display Name">check</mat-icon>
+                        </div>
+                      </div> <!-- class=divflex -->
+                    </div> <!-- FOR LOOP: productNames-->
+                  </div>
+                  <ng-template #noProductName>
+                    (No Product Name)
+                  </ng-template>
                 </div>
               </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Is Listed:
+
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Marketing Status:
                 </div>
-                <div class="row-property-value">
-                  {{x.isListed}}
+                <div class="row-property-value-2">
+                  {{prodProv.productStatus}}
                 </div>
               </div>
-            </div>
+            </div> <!-- row -->
+
 
             <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Application Number:
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Product Code:
                 </div>
-                <div class="row-property-value">
-                  {{x.applicationNumber}}
+                <div class="row-property-value-2">
+                  <span *ngFor="let prodCode of prodProv.productCodes; let i = index">
+                    <span *ngIf="i > 0"><br></span>
+                    <span class="font14px"><b>{{prodCode.productCode}}</b></span>
+                    <span class="colorgray font11px">&nbsp;({{prodCode.productCodeType}})</span>
+
+                    <!-- Display Daily Med link, if Product Code Type is 'NDC CODE'-->
+                    <span *ngIf="prodCode._dailyMedUrl">
+                      &nbsp;&nbsp;&nbsp;
+                      <a href="{{prodCode._dailyMedUrl}}" target="_blank" alt="Go to DailyMed website"
+                        title="Go to DailyMed website">
+                        <img [src]="iconSrcPath">
+                      </a>
+                      <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window">
+                      </mat-icon>
+                    </span>
+                  </span>
                 </div>
               </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Marketing Category Name:
+
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Product Type:
                 </div>
-                <div class="row-property-value">
-                  {{x.marketingCategoryName}}
+                <div class="row-property-value-2">
+                  {{prodProv.productType}}
                 </div>
               </div>
-            </div>
+
+            </div> <!-- row -->
+
 
             <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Control Substance Code:
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Labeler Name:
                 </div>
-                <div class="row-property-value">
-                  {{x.controlSubstanceCode}}
+                <div class="row-property-value-2">
+                  <div *ngFor="let prodComp of prodProv.productCompanies">
+                    {{prodComp.companyName}}
+                    <div *ngFor="let prodCompCode of prodComp.productCompanyCodes">
+                      {{prodCompCode.productCode}}
+                    </div>
+                  </div>
                 </div>
               </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Marketing Category Code:
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Labeler Code:
                 </div>
-                <div class="row-property-value">
-                  {{x.marketingCategoryCode}}
+                <div class="row-property-value-2">
+                  {{product.manufacturerCode}}
+                  <span *ngIf="product.manufacturerCodeType">
+                    <span class="colorgray font11px">&nbsp;({{product.manufacturerCodeType}})</span>
+                  </span>
                 </div>
               </div>
-            </div>
+            </div> <!-- row -->
+
 
             <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Control Substance Source:
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Country:
                 </div>
-                <div class="row-property-value">
-                  {{x.controlSubstanceSource}}
+                <div class="row-property-value-2">
+                  {{product.countryCode}}
                 </div>
               </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Control Substance Class:
+              <div class="row-property-2">
+                <div class="row-property-key-2">
+                  Application Type Number:
                 </div>
-                <div class="row-property-value">
-                  {{x.controlSubstanceClass}}
+                <div class="row-property-value-2">
+                  <span class="font14px" *ngIf="prodProv.applicationType">
+                    {{prodProv.applicationType}}
+                  </span>
+                  <span class="font14px" *ngIf="prodProv.applicationNumber">
+                    {{prodProv.applicationNumber}}
+                  </span>
                 </div>
               </div>
-            </div>
 
-            <div class="row">
-              <div class="row-property">
-                <div class="row-property-key">
-                  Jurisdictions:
-                </div>
-                <div class="row-property-value">
-                  {{ x.jurisdictions }}
-                </div>
-              </div>
-              <div class="row-property">
-                <div class="row-property-key">
-                  Product URL:
-                </div>
-                <div class="row-property-value">
-                  {{ x.productUrl }}
-                </div>
+            </div> <!-- row -->
+          </div>
+
+        </mat-tab>
+      </mat-tab-group> <!--  TAB GROUP END -->
+
+      <div class="bordergray bordertopnone">
+
+        <div class="row">
+          <div class="row-property-2">
+            <div class="row-property-key-2">
+              Dosage Form:
+            </div>
+            <div class="row-property-value-2">
+              <div *ngFor="let prodManuItem of product.productManufactureItems; let indexManuItem = index">
+                <span *ngIf="indexManuItem > 0">|</span>
+                {{prodManuItem.dosageForm}}
               </div>
             </div>
-            <!-- Product PROVENANCE Fields End -->
-
-
-            <!-- Product NAME Begin -->
-            <br><br>
-            <mat-card class="bordergray">
-              <mat-card-title class="title2 font14px colorblack">
-                PRODUCT NAME ({{x.productNames.length}})
-              </mat-card-title>
-              <div *ngIf="x.productNames.length > 0">
-                <mat-card-content>
-                  <table class="blueTable">
-                    <thead>
-                      <tr height="25px">
-                        <th>#</th>
-                        <th class="width300px">Product Name</th>
-                        <th>Product Type</th>
-                        <th>Language</th>
-                        <th>Term and Term Part</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr *ngFor="let prodName of x.productNames; let indexName = index">
-                        <td>{{indexName + 1}}</td>
-                        <td>
-                          <div class="divflex">
-                            <div>
-                              <span class="colororange font16px fontbold">{{ prodName.productName }}</span>
-                            </div>
+          </div>
+          <div class="row-property-2">
+            <div class="row-property-key-2">
+              Route of Administration:
+            </div>
+            <div class="row-property-value-2">
+              {{product.routeAdmin}}
+            </div>
+          </div>
+        </div> <!-- row -->
 
-                            <div class="margintopneg5px" *ngIf="prodName.displayName && prodName.displayName == true">
-                              &nbsp;
-                              <mat-icon matTooltip="Display Name">check</mat-icon>
-                            </div>
-                          </div>
-                        </td>
-                        <td>{{ prodName.productNameType }}</td>
-                        <td>{{ prodName.language }}</td>
-                        <td>
-                          <div *ngFor="let prodPart of prodName.productTermAndParts; let indexPart = index">
-                            <b>Term:</b>&nbsp;{{prodPart.productTerm}}
-                            <b>Term Part:</b>&nbsp;&nbsp;{{prodPart.productTermPart}}<br><br>
-                          </div>
-                        </td>
-                      </tr>
-
-                      <tr *ngIf="x.productNames.length < 1">
-                        <td colspan="3">
-                          No Product Name Available
-                        </td>
-                      </tr>
-
-                    </tbody>
-                  </table>
-                </mat-card-content>
-              </div>
-            </mat-card>
-            <!-- Product NAME END -->
-
-
-            <!-- Product CODE BEGIN -->
-            <div class="details-container margintop30px">
-              <mat-card class="bordergray">
-                <mat-card-title class="title2 font14px colorblack">
-                  PRODUCT CODE ({{x.productCodes.length}})
-                </mat-card-title>
-                <div *ngIf="x.productCodes.length">
-                  <mat-card-content>
-                    <table class="blueTable">
-                      <thead>
-                        <tr>
-                          <th>#</th>
-                          <th>Product Code</th>
-                          <th>Product Code Type</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr *ngFor="let prodCode of x.productCodes; let i = index">
-                          <td>{{i + 1}}</td>
-                          <td>{{ prodCode.productCode }}</td>
-                          <td>{{ prodCode.productCodeType }}</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </mat-card-content>
-                </div>
-              </mat-card>
+
+        <!-- Display Ingredients -->
+        <div class="row">
+          <div class="row-property-2">
+            <div class="row-property-key-2">
+              Substance Name
+              <br>(Active):&nbsp;
+              <span class="colormaroon font16px"><b>({{product._activeIngredients.length}})</b></span>
             </div>
-            <!-- Product CODE END -->
-
-
-            <!-- Product COMPANY BEGIN -->
-            <div class="details-container margintop30px">
-              <mat-card class="bordergray">
-                <mat-card-title class="title2 font14px colorblack">
-                  PRODUCT COMPANY ({{x.productCompanies.length}})
-                </mat-card-title>
-                <div *ngIf="x.productCompanies.length > 0">
-                  <mat-card-content>
-                    <div class="marginbottom20px" *ngFor="let prodComp of x.productCompanies; let i = index">
-
-                      <div class="colorgreen">
-                        <b>Company {{(i+1)}} of {{x.productCompanies.length}}</b>
-                      </div>
-                      <br><br>
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Name:
-                          </div>
-                          <div class="row-property-value">
-                            {{prodComp.companyName}}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Role:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyRole }}
-                          </div>
-                        </div>
-                      </div>
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Address:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyAddress }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            City:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyCity }}
-                          </div>
-                        </div>
-                      </div>
+            <div class="row-property-value">
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            State:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyState }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Zip:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyZip }}
-                          </div>
-                        </div>
-                      </div>
+              <!-- Display ACTIVE Substance -->
+              <ol class="olstyle">
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company GPS Latitude:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyGpsLatitude }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Country:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyCountry }}
-                          </div>
-                        </div>
-                      </div>
+                <div *ngFor="let prodIngred of product._activeIngredients; let indexActiveIngred = index">
+                  <div *ngIf="prodIngred._ingredientName; else noActiveIngredientName">
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company GPS Longitude:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyGpsLongitude }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company GPS Elevation:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyGpsElevation }}
-                          </div>
-                        </div>
-                      </div>
+                    <!-- Show/Hide Link, if substance Name has more than 5 records -->
+                    <span *ngIf="indexActiveIngred == 5">
+                      <br>
+                      <a href="" (click)="toggleShowMoreLessActiveIngred(); false">
+                        <span *ngIf="showMoreLessActiveIngred"><b>Show More</b></span>
+                        <span *ngIf="!showMoreLessActiveIngred"><b>Show Less</b></span>
+                      </a>
+                      <br>
+                    </span>
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Start Marketing Date:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.startMarketingDate }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Public Domain:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyPublicDomain }}
-                          </div>
-                        </div>
-                      </div>
+                    <div *ngIf="(!showMoreLessActiveIngred && indexActiveIngred >= 5) || indexActiveIngred < 5">
+                      <br>
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            End Marketing Date:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.endMarketingDate }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Product ID:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyProductId }}
-                          </div>
-                        </div>
-                      </div>
+                      <li>
+                        <div class="divflex">
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Company Document ID:
+                          <div *ngIf="prodIngred._substanceUuid; else noActiveSubUuid">
+                            <a [routerLink]="['/substances', prodIngred._substanceUuid]"
+                              target="_blank">{{prodIngred._ingredientName}}
+                            </a>
                           </div>
-                          <div class="row-property-value">
-                            {{ prodComp.companyDocumentId }}
+                          <ng-template #noActiveSubUuid>
+                            {{prodIngred._ingredientName}}
+                          </ng-template>
+
+                          <div class="margintopneg15 marginleft10px" *ngIf="prodIngred._substanceUuid">
+                            <button mat-icon-button color="primary" style="padding:0px;margin:0px;"
+                              (click)="openImageModal(prodIngred._substanceUuid, prodIngred._ingredientName, prodIngred._approvalId)">
+                              <mat-icon matTooltip="Show Substance chemical structure">analytics
+                              </mat-icon>
+                            </button>
                           </div>
+
+                        </div> <!-- class=divflex -->
+
+                        <!-- Show Average -->
+                        <div *ngIf="prodIngred.average">
+                          <span class="font11px">Average:
+                            <b>{{prodIngred.average}}&nbsp;{{prodIngred.unit}}
+                            </b>
+                          </span>
                         </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Provenance Document ID:
+
+                        <div class="divflex">
+                          <!-- Original Numerator -->
+                          <div>
+                            <span *ngIf="prodIngred.originalNumeratorNumber">
+                              <span class="font11px">Numerator:
+                                <b>{{ prodIngred.originalNumeratorNumber }}&nbsp;{{ prodIngred.originalNumeratorUnit
+                                  }}
+                                </b>
+                              </span>
+                            </span>
                           </div>
-                          <div class="row-property-value">
-                            {{ prodComp.provenanceDocumentId }}
+
+                          <!-- Original Denominator -->
+                          <div class="marginleft5px">
+                            <span *ngIf="prodIngred.originalDenominatorNumber">
+                              <span class="font11px">Denominator:
+                                <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
+                                  prodIngred.originalDenominatorUnit
+                                  }}
+                                </b>
+                              </span>
+                            </span>
                           </div>
+                        </div> <!-- divflex -->
+
+                        <!-- Display Ingredient Type -->
+                        <div class="colorgreen" *ngIf="prodIngred.ingredientType">
+                          ({{ prodIngred.ingredientType }})
                         </div>
-                      </div>
+                      </li>
+
+                    </div> <!-- Hide/Show link -->
+
+                  </div> <!-- if _ingredientName exists -->
+                  <ng-template #noActiveIngredientName>
+                    (No Substance Name)
+                  </ng-template>
+                </div> <!-- For Loop: activeIngredients List -->
+
+              </ol>
 
-                      <!-- Product Company Code Begin -->
-                      <div class="details-container margintop30px">
-                        <mat-card class="bordergray">
-                          <mat-card-title class="title2 font14px colorblack">
-                            Company Code ({{prodComp.productCompanyCodes.length}})
-                          </mat-card-title>
-                          <div *ngIf="prodComp.productCompanyCodes.length">
-                            <mat-card-content>
-                              <table class="blueTable">
-                                <thead>
-                                  <tr>
-                                    <th>#</th>
-                                    <th>Company Code</th>
-                                    <th>Company Code Type</th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-                                  <tr *ngFor="let compCode of prodComp.productCompanyCodes; let compCodeIndex = index">
-                                    <td>{{ compCodeIndex + 1}}</td>
-                                    <td>{{ compCode.companyCode }}</td>
-                                    <td>{{ compCode.companyCodeType }}</td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                            </mat-card-content>
-                          </div>
-                        </mat-card>
-                      </div>
-                      <!-- Product Company Code End -->
-                      <br><br>
-                      <hr *ngIf="(i+1) < x.productCompanies.length">
-                    </div> <!-- Company loop-->
-                  </mat-card-content>
-                </div>
-              </mat-card>
             </div>
-            <!-- Product COMPANY End -->
-
-
-            <!-- Product Documentation in Provenance Begin -->
-            <div class="details-container margintop30px">
-              <mat-card class="bordergray">
-                <mat-card-title class="title2 font14px colorblack">
-                  PRODUCT DOCUMENTATION IDs ({{x.productDocumentations.length}})
-                </mat-card-title>
-                <div *ngIf="x.productDocumentations.length">
-                  <mat-card-content>
-                    <table class="blueTable">
-                      <thead>
-                        <tr>
-                          <th>#</th>
-                          <th>Document ID</th>
-                          <th>Product Document Type</th>
-                          <th>Set Id Version</th>
-                          <th>Effective Time</th>
-                          <th>Jurisdictions</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr *ngFor="let prodDoc of x.productDocumentations; let i = index">
-                          <td>{{i + 1}}</td>
-                          <td>{{ prodDoc.documentId }}</td>
-                          <td>{{ prodDoc.documentType }}</td>
-                          <td>{{ prodDoc.setIdVersion }}</td>
-                          <td>{{ prodDoc.effectiveTime }}</td>
-                          <td>{{ prodDoc.jurisdictions }}</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </mat-card-content>
-                </div>
-              </mat-card>
+          </div> <!-- Active Substance -->
+
+
+          <!-- Display Inactive Substance -->
+          <div class="row-property-2">
+            <div class="row-property-key-2">
+              Substance Name
+              <br>(Inactive/Other):&nbsp;
+              <span class="colormaroon font16px"><b>({{product._otherIngredients.length}})</b></span>
             </div>
-            <!-- Product Documentation End -->
-
-
-            <!-- Product INDICATION BEGIN -->
-            <div class="details-container margintop30px">
-              <mat-card class="bordergray">
-                <mat-card-title class="title2 font14px colorblack">
-                  PRODUCT INDICATION ({{x.productIndications.length}})
-                </mat-card-title>
-                <div *ngIf="x.productIndications.length > 0">
-                  <mat-card-content>
-                    <div class="marginbottom20px" *ngFor="let prodInd of x.productIndications; let i = index">
-
-                      <div class="colorgreen">
-                        <b>Indication {{(i+1)}} of {{x.productIndications.length}}</b>
-                      </div>
-                      <br><br>
-
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication:
+
+            <div class="row-property-value-2">
+              <!-- Display Other Substance -->
+
+              <ol class="olstyle">
+
+                <div *ngFor="let prodIngred of product._otherIngredients; let indexOtherIngred = index">
+                  <div *ngIf=" prodIngred._ingredientName; else noOtherIngredientName">
+
+                    <!-- Show/Hide Link, if substance Name has more than 5 records -->
+                    <span *ngIf="indexOtherIngred == 5">
+                      <br>
+                      <a href="" (click)="toggleShowMoreLessOtherIngred(); false">
+                        <span *ngIf="showMoreLessOtherIngred"><b>Show More</b></span>
+                        <span *ngIf="!showMoreLessOtherIngred"><b>Show Less</b></span>
+                      </a>
+                      <br>
+                    </span>
+
+                    <div *ngIf="(!showMoreLessOtherIngred && indexOtherIngred >= 5) || indexOtherIngred < 5">
+                      <br>
+
+                      <li>
+                        <div class="divflex">
+
+                          <div *ngIf="prodIngred._substanceUuid; else noInactiveSubUuid">
+                            <a [routerLink]="['/substances', prodIngred._substanceUuid]"
+                              target="_blank">{{prodIngred._ingredientName}}
+                            </a>
                           </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indication }}
+                          <ng-template #noInactiveSubUuid>
+                            {{prodIngred._ingredientName}}
+                          </ng-template>
+
+                          <div class="margintopneg15 marginleft10px" *ngIf="prodIngred._substanceUuid">
+                            <button mat-icon-button color="primary" style="padding:0px;margin:0px;"
+                              (click)="openImageModal(prodIngred._substanceUuid, prodIngred._ingredientName, prodIngred._approvalId)">
+                              <mat-icon matTooltip="Click to view Substance chemical structure">analytics
+                              </mat-icon>
+                            </button>
                           </div>
+
                         </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Text:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationText }}
-                          </div>
+
+                        <!-- Show Average -->
+                        <div *ngIf="prodIngred.average">
+                          <span class="font11px">Average:
+                            <b>{{prodIngred.average}}&nbsp;{{prodIngred.unit}}
+                            </b>
+                          </span>
                         </div>
-                      </div>
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Code:
+                        <div class="divflex">
+                          <!-- Original Numerator -->
+                          <div>
+                            <span *ngIf="prodIngred.originalNumeratorNumber">
+                              <span class="font11px">Numerator:
+                                <b>{{ prodIngred.originalNumeratorNumber }}&nbsp;{{ prodIngred.originalNumeratorUnit
+                                  }}
+                                </b>
+                              </span>
+                            </span>
                           </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationCode }}
+
+                          <!-- Original Denominator -->
+                          <div class="marginleft5px">
+                            <span *ngIf="prodIngred.originalDenominatorNumber">
+                              <span class="font11px">Denominator:
+                                <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
+                                  prodIngred.originalDenominatorUnit
+                                  }}
+                                </b>
+                              </span>
+                            </span>
                           </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Code Type:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationCodeType }}
-                          </div>
-                        </div>
-                      </div>
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Group:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationGroup }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Source:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationSource }}
-                          </div>
-                        </div>
-                      </div>
+                        </div> <!-- divflex -->
 
-                      <div class="row">
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Source Type:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationSourceType }}
-                          </div>
-                        </div>
-                        <div class="row-property">
-                          <div class="row-property-key">
-                            Indication Source URL:
-                          </div>
-                          <div class="row-property-value">
-                            {{ prodInd.indicationSourceUrl }}
-                          </div>
+                        <!-- Display Ingredient Type -->
+                        <div class="colorgreen" *ngIf="prodIngred.ingredientType">
+                          ({{ prodIngred.ingredientType }})
                         </div>
-                      </div>
-                    </div>
-                  </mat-card-content>
-                </div>
-              </mat-card>
+
+                      </li>
+
+                    </div> <!-- Hide/Show link -->
+
+                  </div> <!-- if _ingredientName exists -->
+                  <ng-template #noOtherIngredientName>
+                    (No Substance Name)
+                  </ng-template>
+                </div> <!-- For Loop: otherIngredients List -->
+
+              </ol>
+
             </div>
-            <!-- Product INDICATION END -->
+          </div> <!-- Inactive Substance -->
 
+        </div> <!-- row Substance Name-->
+      </div> <!-- class = bordergray -->
 
-          </div> <!-- Product Provenance loop-->
-        </mat-card-content>
-      </div>
-    </mat-card>
-  </div> <!-- class="details-container"-->
-  <!-- Product Provenance -->
-
-
-  <!-- TAB BEGINS HERE for Manufacture Item -->
-  <div class="details-container margintop20px">
-    <mat-card>
-      <mat-card-title class="title2">
-        MANUFACTURE ITEM ({{product.productManufactureItems.length}})
-      </mat-card-title>
-      <div *ngIf="product.productManufactureItems.length > 0">
-        <mat-card-content>
-          <br>
-          <mat-tab-group>
-            <mat-tab label="Manufacture item {{index + 1}}"
-              *ngFor="let prodComp of product.productManufactureItems; let index = index">
-
-              <!-- Component/Manufacturing Begin -->
-              <mat-card class="bordergray">
-                <mat-card-content>
-                  <br>
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Dosage Form:
-                      </div>
-                      <div class="row-property-value">
-                        {{ prodComp.dosageForm }}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Amount:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.amount}}
-                      </div>
-                    </div>
-                  </div>
+    </div> <!-- *ngIf="!showMoreLessSummaries" -->
+    <br>
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Dosage Form Code:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.dosageFormCode}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Unit:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.unit}}
-                      </div>
-                    </div>
-                  </div>
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Dosage Form Code Type:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.dosageFormCodeType}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Scoring:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charNumFragments}}
-                      </div>
-                    </div>
-                  </div>
+    <!-- PRODUCT FULL DETAILS -->
+    <div class="margintop10px font16px colorblue"><b>Product Full Details</b>
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Flavor Name:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charFlavor}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Size:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charSize}}
-                      </div>
-                    </div>
-                  </div>
+      &nbsp;&nbsp;&nbsp;
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Color Name:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charColor}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Imprint Text:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charImprintText}}
-                      </div>
-                    </div>
-                  </div>
+      <a href="" (click)="toggleShowMoreLessFullDetails(); false">
+        <span *ngIf="showMoreLessFullDetails"><b>Show</b></span>
+        <span *ngIf="!showMoreLessFullDetails"><b>Hide</b></span>
+      </a>
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Shape Name:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.charShape}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Route of Administration:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.routeOfAdministration}}
-                      </div>
-                    </div>
-                  </div>
+      <br>
+    </div>
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Dosage Form Note:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.dosageFormNote}}
-                      </div>
-                    </div>
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Composition Note:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.compositionNote}}
-                      </div>
-                    </div>
-                  </div>
+    <div *ngIf="!showMoreLessFullDetails">
 
-                  <div class="row">
-                    <div class="row-property">
-                      <div class="row-property-key">
-                        Provenance Manufacture Item ID:
-                      </div>
-                      <div class="row-property-value">
-                        {{prodComp.provenanceManufactureItemId}}
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Manufacuture Item/Component -->
+      <mat-accordion multi="true">
 
+        <!-- TAB BEGINS HERE for Manufacture Item -->
+        <div class="details-container margintop20px">
 
-                  <!-- Product MANUFACTURER BEGIN -->
-                  <mat-card class="bordergray margintop30px">
-                    <mat-card-title class="title2 font14px colorblack">
-                      <span>MANUFACTURER ITEM CODE ({{prodComp.productManufacturers.length}})</span>
-                    </mat-card-title>
-                    <div *ngIf="prodComp.productManufacturers.length > 0">
-                      <mat-card-content>
-                        <div *ngFor="let prodManu of prodComp.productManufacturers; let indexManu = index">
-                          <hr *ngIf="indexManu > 0">
-                          <div class="row">
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufacturer Name:
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturerName }}
-                              </div>
+          <!-- EXPANSION: PRODUCT MANUFACTURE ITEM -->
+          <mat-expansion-panel [expanded]="true" class="width1028px">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="title2"><b>MANUFACTURE ITEM ({{product.productManufactureItems.length}})</b></div>
+              </mat-panel-title>
+              <mat-panel-description>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div *ngIf="product.productManufactureItems.length > 0">
+
+              <mat-tab-group>
+                <mat-tab label="Manufacture item {{index + 1}}"
+                  *ngFor="let prodComp of product.productManufactureItems; let index = index">
+
+                  <!-- Component/Manufacturing Begin -->
+                  <mat-card class="bordergreen">
+                    <mat-card-content>
+
+                      <div class="divflex">
+                        <div>&nbsp;</div>
+                        <div class="middle-fill">&nbsp;</div>
+                        <div class="margintopneg5px">
+                          <a href="" (click)="toggleShowMoreLessManufacture(); false">
+                            <span *ngIf="showMoreLessFullManufacture"><b>Show</b></span>
+                            <span *ngIf="!showMoreLessFullManufacture"><b>Hide</b></span>
+                          </a>
+                        </div>
+                      </div> <!-- divflex -->
+
+                      <div *ngIf="!showMoreLessManufacture">
+
+                        <div class="row margintopneg10px">
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Dosage Form:
                             </div>
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufacturer Role:
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturerRole }}
-                              </div>
+                            <div class="row-property-value">
+                              {{ prodComp.dosageForm }}
                             </div>
                           </div>
-
-                          <div class="row">
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufacturer Code:
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturerCode }}
-                              </div>
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Amount:
                             </div>
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufacturer Code Type:
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturerCodeType }}
-                              </div>
+                            <div class="row-property-value">
+                              {{prodComp.amount}}
                             </div>
                           </div>
+                        </div>
 
-                          <div class="row">
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufactured Item Code:
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturedItemCode }}
-                              </div>
+                        <div class="row">
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Dosage Form Code:
                             </div>
-                            <div class="row-property">
-                              <div class="row-property-key">
-                                Manufactured Item Code Type
-                              </div>
-                              <div class="row-property-value">
-                                {{ prodManu.manufacturedItemCodeType }}
-                              </div>
+                            <div class="row-property-value">
+                              {{prodComp.dosageFormCode}}
                             </div>
-                          </div> <!-- row -->
-                          <br>
-                        </div> <!-- loop -->
-                      </mat-card-content>
-                    </div>
-                  </mat-card>
-                  <!-- Product MANUFACTURER END -->
-
-
-                  <!-- Lot -->
-                  <br><br>
-                  <mat-card class="bordergray">
-                    <mat-card-content>
-                      <div *ngFor="let lot of prodComp.productLots; let indexLot = index">
-                        <br>
-                        <hr *ngIf="indexLot > 0">
+                          </div>
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Unit:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.unit}}
+                            </div>
+                          </div>
+                        </div>
 
-                        <div class="title2">
-                          <span class="colorgreen">LOT {{indexLot + 1}}</span>
+                        <div class="row">
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Dosage Form Code Type:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.dosageFormCodeType}}
+                            </div>
+                          </div>
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Scoring:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.charNumFragments}}
+                            </div>
+                          </div>
                         </div>
+
                         <div class="row">
                           <div class="row-property">
                             <div class="row-property-key">
-                              Lot Type:
+                              Flavor Name:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.charFlavor}}
+                            </div>
+                          </div>
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Size:
                             </div>
                             <div class="row-property-value">
-                              {{ lot.lotType }}
+                              {{prodComp.charSize}}
                             </div>
                           </div>
                         </div>
@@ -1048,18 +603,18 @@
                         <div class="row">
                           <div class="row-property">
                             <div class="row-property-key">
-                              Lot Number:
+                              Color Name:
                             </div>
                             <div class="row-property-value">
-                              {{ lot.lotNo }}
+                              {{prodComp.charColor}}
                             </div>
                           </div>
                           <div class="row-property">
                             <div class="row-property-key">
-                              Lot Size:
+                              Imprint Text:
                             </div>
                             <div class="row-property-value">
-                              {{ lot.lotSize }}
+                              {{prodComp.charImprintText}}
                             </div>
                           </div>
                         </div>
@@ -1067,297 +622,1232 @@
                         <div class="row">
                           <div class="row-property">
                             <div class="row-property-key">
-                              Expiry Date:
+                              Shape Name:
                             </div>
                             <div class="row-property-value">
-                              {{ lot.expiryDate }}
+                              {{prodComp.charShape}}
                             </div>
                           </div>
                           <div class="row-property">
                             <div class="row-property-key">
-                              Manufacture Date:
+                              Route of Administration:
                             </div>
                             <div class="row-property-value">
-                              {{ lot.manufactureDate }}
+                              {{prodComp.routeOfAdministration}}
                             </div>
                           </div>
                         </div>
-                        <!-- Lot -->
 
+                        <div class="row">
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Dosage Form Note:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.dosageFormNote}}
+                            </div>
+                          </div>
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Composition Note:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.compositionNote}}
+                            </div>
+                          </div>
+                        </div>
 
-                        <!-- Display Ingredient BEGIN -->
-                        <br>
-                        <mat-card class="bordergray">
-                          <mat-card-title class="title2">
-                            <span class="title3 colororange">
-                              INGREDIENTS
-                              ({{lot.productIngredients.length}})
-                            </span>
-                          </mat-card-title>
-                          <mat-card-content>
-                            <div *ngFor="let ingred of lot.productIngredients; let indexIng = index">
-                              <hr *ngIf="indexIng > 0">
+                        <div class="row">
+                          <div class="row-property">
+                            <div class="row-property-key">
+                              Provenance Manufacture Item ID:
+                            </div>
+                            <div class="row-property-value">
+                              {{prodComp.provenanceManufactureItemId}}
+                            </div>
+                          </div>
+                        </div>
+                        <!-- Manufacuture Item/Component -->
 
-                              <div class="colorgreen">
-                                <b>Ingredient {{(indexIng+1)}} of {{lot.productIngredients.length}}</b>
-                              </div>
-                              <br><br>
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Applicant Ingredient Name:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ingred.applicantIngredName}}
-                                  </div>
-                                </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Ingredient Type:
+                        <!-- Product MANUFACTURER BEGIN -->
+                        <mat-card class="bordergray margintop30px">
+                          <mat-card-title class="title2 font14px colorblack">
+                            <span>MANUFACTURER ITEM CODE ({{prodComp.productManufacturers.length}})</span>
+                          </mat-card-title>
+                          <div *ngIf="prodComp.productManufacturers.length > 0">
+                            <mat-card-content>
+                              <div *ngFor="let prodManu of prodComp.productManufacturers; let indexManu = index">
+                                <hr *ngIf="indexManu > 0">
+                                <div class="row">
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufacturer Name:
+                                    </div>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturerName }}
+                                    </div>
                                   </div>
-                                  <div class="row-property-value-2">
-                                    <span class="colorgreen"><b>{{ ingred.ingredientType }}</b></span>
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufacturer Role:
+                                    </div>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturerRole }}
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Ingredient Name:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    <div *ngIf="ingred._substanceUuid">
-                                      <a [routerLink]="['/substances', ingred._substanceUuid]"
-                                        target="_blank">{{ingred._ingredientName}}</a>
+                                <div class="row">
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufacturer Code:
                                     </div>
-
-                                    <!-- Display Active Moiety of Ingredient Name -->
-                                    <div class="margintop10px"
-                                      *ngFor="let active of ingred._ingredientNameActiveMoieties; let activeIndex = index">
-                                      <span class="font12px"><b>{{active}}</b></span>
-                                      <span class="colorgray font11px">&nbsp;(Active Moiety)</span>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturerCode }}
                                     </div>
-
                                   </div>
-                                </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Ingredient Function:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.ingredientFunction }}
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufacturer Code Type:
+                                    </div>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturerCodeType }}
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Basis Of Strength:
+                                <div class="row">
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufactured Item Code:
+                                    </div>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturedItemCode }}
+                                    </div>
                                   </div>
-                                  <div class="row-property-value-2">
-                                    <div *ngIf="ingred._basisOfStrengthSubstanceUuid">
-                                      <a [routerLink]="['/substances', ingred._basisOfStrengthSubstanceUuid]"
-                                        target="_blank">{{ingred._basisOfStrengthIngredientName}}</a>
+                                  <div class="row-property">
+                                    <div class="row-property-key">
+                                      Manufactured Item Code Type:
                                     </div>
-
-                                    <!-- Display Active Moiety of Basis of Strength -->
-                                    <div class="margintop10px"
-                                      *ngFor="let active of ingred._basisOfStrengthActiveMoieties; let activeIndex = index">
-                                      <span class="font12px"><b>{{active}}</b></span>
-                                      <span class="colorgray font11px">&nbsp;(Active Moiety)</span>
+                                    <div class="row-property-value">
+                                      {{ prodManu.manufacturedItemCodeType }}
                                     </div>
-
                                   </div>
-                                </div>
+                                </div> <!-- row -->
+                                <br>
+                              </div> <!-- loop -->
+                            </mat-card-content>
+                          </div>
+                        </mat-card>
+                        <!-- Product MANUFACTURER END -->
 
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Ingredient Location:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.ingredientLocation }}
-                                    <span *ngIf="ingred.ingredientLocationText">
-                                      ({{ingred.ingredientLocationText}})
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
+                      </div>  <!-- *ngIf="!showMoreLessManufacture" -->
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Average:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.average }}
-                                  </div>
-                                </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Low:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.low }}
-                                  </div>
-                                </div>
-                              </div>
+                      <!-- Lot -->
+                      <mat-card [ngClass]="!showMoreLessManufacture?'bordergray margintop20px':''">
+                        <mat-card-content>
+                          <div *ngFor="let lot of prodComp.productLots; let indexLot = index">
+                            <span *ngIf="indexLot > 0"><br></span>
+                            <hr *ngIf="indexLot > 0">
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Unit:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.unit }}
-                                  </div>
-                                </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    High:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.high }}
-                                  </div>
-                                </div>
-                              </div>
+                            <div *ngIf="!showMoreLessManufacture">
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Original Numerator Number:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.originalNumeratorNumber }}
-                                  </div>
+                            <div class="title2">
+                              <span class="colorgreen">LOT {{indexLot + 1}}</span>
+                            </div>
+
+                            <div class="row">
+                              <div class="row-property">
+                                <div class="row-property-key">
+                                  Lot Type:
                                 </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Original Denominator Number:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.originalDenominatorNumber }}
-                                  </div>
+                                <div class="row-property-value">
+                                  {{ lot.lotType }}
                                 </div>
                               </div>
+                            </div>
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Original Numerator Unit:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.originalNumeratorUnit }}
-                                  </div>
+                            <div class="row">
+                              <div class="row-property">
+                                <div class="row-property-key">
+                                  Lot Number:
                                 </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Original Denominator Unit:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.originalDenominatorUnit }}
-                                  </div>
+                                <div class="row-property-value">
+                                  {{ lot.lotNo }}
                                 </div>
                               </div>
-
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Manufacturer:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.manufacturer }}
-                                  </div>
+                              <div class="row-property">
+                                <div class="row-property-key">
+                                  Lot Size:
                                 </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Lot No:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.ingredLotNo }}
-                                  </div>
+                                <div class="row-property-value">
+                                  {{ lot.lotSize }}
                                 </div>
                               </div>
+                            </div>
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Manufacture Ingredient Catalog ID:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.manufactureIngredientCatalogId }}
-                                  </div>
+                            <div class="row">
+                              <div class="row-property">
+                                <div class="row-property-key">
+                                  Expiry Date:
                                 </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Manufacture Ingredient URL:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.manufactureIngredientUrl }}
-                                  </div>
+                                <div class="row-property-value">
+                                  {{ lot.expiryDate }}
                                 </div>
                               </div>
-
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Grade:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.grade }}
-                                  </div>
+                              <div class="row-property">
+                                <div class="row-property-key">
+                                  Manufacture Date:
                                 </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Release Characteristics:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.releaseCharacteristic }}
-                                  </div>
+                                <div class="row-property-value">
+                                  {{ lot.manufactureDate }}
                                 </div>
                               </div>
+                            </div>
+                            <!-- Lot -->
+                          </div>  <!-- *ngIf="!showMoreLessManufacture" -->
 
-                              <div class="row">
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Confidentiality Code:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.confidentialityCode }}
-                                  </div>
-                                </div>
-                                <div class="row-property">
-                                  <div class="row-property-key-2">
-                                    Notes:
-                                  </div>
-                                  <div class="row-property-value-2">
-                                    {{ ingred.notes }}
+
+                            <!-- Display Ingredient BEGIN -->
+
+                            <mat-card class="margintop5px bordergray">
+                              <mat-card-title class="title2">
+                                <span class="title3 colororange">
+                                  INGREDIENTS
+                                  ({{lot.productIngredients.length}})
+                                </span>
+                              </mat-card-title>
+                              <mat-card-content>
+
+                                <div class="margintop15px" *ngFor="let ingred of lot.productIngredients; let indexIng = index">
+
+                                  <span *ngIf="indexIng > 0"><br></span>
+
+                                  <div class="ingredienttitle">&nbsp;</div>
+
+                                  <div class="colorgreen marginbottom10px margintopneg30px padleft20px">
+                                    <b>Ingredient<span class="badge-one">
+                                        {{(indexIng+1)}}&nbsp;
+                                      </span>&nbsp; of {{lot.productIngredients.length}}
+                                    </b>
                                   </div>
-                                </div>
-                              </div>
-                              <br>
-                            </div> <!-- Ingredient LOOP -->
-                            <!-- Ingredient END -->
 
-                          </mat-card-content>
-                        </mat-card>
-                        <br>
+                                  <div class="bordergray">
+
+                                    <div class="row margintop10px">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Applicant Ingredient Name:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ingred.applicantIngredName}}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Ingredient Type:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          <span class="colorgreen"><b>{{ ingred.ingredientType }}</b></span>
+                                        </div>
+                                      </div>
+                                    </div>
 
-                      </div> <!-- lot loop -->
-                    </mat-card-content>
-                  </mat-card>
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Ingredient Name:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          <div *ngIf="ingred._substanceUuid">
+                                            <a [routerLink]="['/substances', ingred._substanceUuid]" target="_blank">
+                                              <span class="colorblue font16px">
+                                                <b>{{ingred._ingredientName}}</b>
+                                              </span>
+                                            </a>
+                                          </div>
+
+                                          <!-- Display Active Moiety of Ingredient Name -->
+                                          <div class="margintop10px"
+                                            *ngFor="let active of ingred._ingredientNameActiveMoieties; let activeIndex = index">
+                                            <span class="font12px"><b>{{active}}</b></span>
+                                            <span class="colorgray font11px">&nbsp;(Active Moiety)</span>
+                                          </div>
+
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Ingredient Function:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.ingredientFunction }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Basis Of Strength:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          <div *ngIf="ingred._basisOfStrengthSubstanceUuid">
+                                            <a [routerLink]="['/substances', ingred._basisOfStrengthSubstanceUuid]"
+                                              target="_blank">{{ingred._basisOfStrengthIngredientName}}</a>
+                                          </div>
+
+                                          <!-- Display Active Moiety of Basis of Strength -->
+                                          <div class="margintop10px"
+                                            *ngFor="let active of ingred._basisOfStrengthActiveMoieties; let activeIndex = index">
+                                            <span class="font12px"><b>{{active}}</b></span>
+                                            <span class="colorgray font11px">&nbsp;(Active Moiety)</span>
+                                          </div>
+
+                                        </div>
+                                      </div>
+
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Ingredient Location:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.ingredientLocation }}
+                                          <span *ngIf="ingred.ingredientLocationText">
+                                            ({{ingred.ingredientLocationText}})
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
 
-                </mat-card-content>
-              </mat-card>
-              <!-- Component/Manufacturing End -->
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Average:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.average }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Low:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.low }}
+                                        </div>
+                                      </div>
+                                    </div>
 
-            </mat-tab>
-          </mat-tab-group>
-        </mat-card-content>
-      </div>
-    </mat-card>
-  </div> <!-- details-container -->
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Unit:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.unit }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          High:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.high }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Original Numerator Number:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.originalNumeratorNumber }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Original Denominator Number:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.originalDenominatorNumber }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Original Numerator Unit:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.originalNumeratorUnit }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Original Denominator Unit:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.originalDenominatorUnit }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Manufacturer:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.manufacturer }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Manufacturer Lot No:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.ingredLotNo }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Manufacture Ingredient Catalog ID:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.manufactureIngredientCatalogId }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Manufacture Ingredient URL:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.manufactureIngredientUrl }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Grade:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.grade }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Release Characteristics:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.releaseCharacteristic }}
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <div class="row">
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Confidentiality Code:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.confidentialityCode }}
+                                        </div>
+                                      </div>
+                                      <div class="row-property">
+                                        <div class="row-property-key-2">
+                                          Notes:
+                                        </div>
+                                        <div class="row-property-value-2">
+                                          {{ ingred.notes }}
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <br>
+
+                                  </div> <!-- border -->
+                                </div> <!-- Ingredient LOOP -->
+                                <!-- Ingredient END -->
+
+                              </mat-card-content>
+                            </mat-card>
+                            <br>
+
+                          </div> <!-- lot loop -->
+                        </mat-card-content>
+                      </mat-card>
+
+                    </mat-card-content>
+                  </mat-card>
+                  <!-- Component/Manufacturing End -->
+
+                </mat-tab>
+              </mat-tab-group>
+
+            </div>
+
+          </mat-expansion-panel>
+        </div> <!-- details-container -->
+
+
+        <!-- Product PROVENANCE Begin -->
+        <div class="details-container">
+
+          <!-- EXPANSION: PRODUCT OVERVIEW -->
+          <mat-expansion-panel [expanded]="true" class="width1028px">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="title2"><b>PRODUCT PROVENANCE ({{product.productProvenances.length}})</b></div>
+              </mat-panel-title>
+              <mat-panel-description>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div *ngIf="product.productProvenances.length > 0">
+              <div class="marginbottom60px" *ngFor="let x of product.productProvenances; let i = index">
+
+                <hr *ngIf="i > 0">
+                <div class="colorgreen">
+                  <b>Provenance {{(i+1)}} of {{product.productProvenances.length}}</b>
+                </div>
+                <br>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Provenance:
+                    </div>
+                    <div class="row-property-value">
+                      <span class="font16px colorred"><b>{{ x.provenance }}</b></span>
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Product Status:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.productStatus}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Product Type:
+                    </div>
+                    <div class="row-property-value">
+                      {{ x.productType }}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Public Domain:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.publicDomain}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Application Type:
+                    </div>
+                    <div class="row-property-value">
+                      {{ x.applicationType }}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Is Listed:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.isListed}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Application Number:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.applicationNumber}}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Marketing Category Name:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.marketingCategoryName}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Control Substance Code:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.controlSubstanceCode}}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Marketing Category Code:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.marketingCategoryCode}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Control Substance Source:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.controlSubstanceSource}}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Control Substance Class:
+                    </div>
+                    <div class="row-property-value">
+                      {{x.controlSubstanceClass}}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Jurisdictions:
+                    </div>
+                    <div class="row-property-value">
+                      {{ x.jurisdictions }}
+                    </div>
+                  </div>
+                  <div class="row-property">
+                    <div class="row-property-key">
+                      Product URL:
+                    </div>
+                    <div class="row-property-value wordwrap">
+                      <a href="{{ x.productUrl }}" target="_blank">
+                        {{ x.productUrl }}
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Product PROVENANCE Fields End -->
+
+
+                <!-- Product NAME Begin -->
+                <br><br>
+                <mat-card class="bordergray">
+                  <mat-card-title class="title2 font14px colorblack">
+                    PRODUCT NAME ({{x.productNames.length}})
+                  </mat-card-title>
+                  <div *ngIf="x.productNames.length > 0">
+                    <mat-card-content>
+                      <table class="blueTable">
+                        <thead>
+                          <tr height="25px">
+                            <th>#</th>
+                            <th class="width300px">Product Name</th>
+                            <th>Product Type</th>
+                            <th>Language</th>
+                            <th>Term and Term Part</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let prodName of x.productNames; let indexName = index">
+                            <td>{{indexName + 1}}</td>
+                            <td>
+                              <div class="divflex">
+                                <div>
+                                  <span class="colororange font16px fontbold">{{ prodName.productName }}</span>
+                                </div>
+
+                                <div class="margintopneg5px"
+                                  *ngIf="prodName.displayName && prodName.displayName == true">
+                                  &nbsp;
+                                  <mat-icon matTooltip="Display Name">check</mat-icon>
+                                </div>
+                              </div>
+                            </td>
+                            <td>{{ prodName.productNameType }}</td>
+                            <td>{{ prodName.language }}</td>
+                            <td>
+                              <div *ngFor="let prodPart of prodName.productTermAndParts; let indexPart = index">
+                                <b>Term:</b>&nbsp;{{prodPart.productTerm}}
+                                <b>Term Part:</b>&nbsp;&nbsp;{{prodPart.productTermPart}}<br><br>
+                              </div>
+                            </td>
+                          </tr>
+
+                          <tr *ngIf="x.productNames.length < 1">
+                            <td colspan="3">
+                              No Product Name Available
+                            </td>
+                          </tr>
+
+                        </tbody>
+                      </table>
+                    </mat-card-content>
+                  </div>
+                </mat-card>
+                <!-- Product NAME END -->
+
+
+                <!-- Product CODE BEGIN -->
+                <div class="details-container margintop30px">
+                  <mat-card class="bordergray">
+                    <mat-card-title class="title2 font14px colorblack">
+                      PRODUCT CODE ({{x.productCodes.length}})
+                    </mat-card-title>
+                    <div *ngIf="x.productCodes.length">
+                      <mat-card-content>
+                        <table class="blueTable">
+                          <thead>
+                            <tr>
+                              <th>#</th>
+                              <th>Product Code</th>
+                              <th>Product Code Type</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr *ngFor="let prodCode of x.productCodes; let i = index">
+                              <td>{{i + 1}}</td>
+                              <td>{{ prodCode.productCode }}</td>
+                              <td>{{ prodCode.productCodeType }}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </mat-card-content>
+                    </div>
+                  </mat-card>
+                </div>
+                <!-- Product CODE END -->
+
+
+                <!-- Product COMPANY BEGIN -->
+                <div class="details-container margintop30px">
+                  <mat-card class="bordergray">
+                    <mat-card-title class="title2 font14px colorblack">
+                      PRODUCT COMPANY ({{x.productCompanies.length}})
+                    </mat-card-title>
+                    <div *ngIf="x.productCompanies.length > 0">
+                      <mat-card-content>
+                        <div class="marginbottom20px" *ngFor="let prodComp of x.productCompanies; let i = index">
+
+                          <div class="colorgreen">
+                            <b>Company {{(i+1)}} of {{x.productCompanies.length}}</b>
+                          </div>
+                          <br>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Name:
+                              </div>
+                              <div class="row-property-value">
+                                {{prodComp.companyName}}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Role:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyRole }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Address:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyAddress }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                City:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyCity }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                State:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyState }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Zip:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyZip }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company GPS Latitude:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyGpsLatitude }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Country:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyCountry }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company GPS Longitude:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyGpsLongitude }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company GPS Elevation:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyGpsElevation }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Start Marketing Date:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.startMarketingDate }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Public Domain:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyPublicDomain }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                End Marketing Date:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.endMarketingDate }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Product ID:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyProductId }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Company Document ID:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.companyDocumentId }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Provenance Document ID:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodComp.provenanceDocumentId }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- Product Company Code Begin -->
+                          <div class="details-container margintop30px">
+                            <mat-card class="bordergray">
+                              <mat-card-title class="title2 font14px colorblack">
+                                Company Code ({{prodComp.productCompanyCodes.length}})
+                              </mat-card-title>
+                              <div *ngIf="prodComp.productCompanyCodes.length">
+                                <mat-card-content>
+                                  <table class="blueTable">
+                                    <thead>
+                                      <tr>
+                                        <th>#</th>
+                                        <th>Company Code</th>
+                                        <th>Company Code Type</th>
+                                      </tr>
+                                    </thead>
+                                    <tbody>
+                                      <tr
+                                        *ngFor="let compCode of prodComp.productCompanyCodes; let compCodeIndex = index">
+                                        <td>{{ compCodeIndex + 1}}</td>
+                                        <td>{{ compCode.companyCode }}</td>
+                                        <td>{{ compCode.companyCodeType }}</td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </mat-card-content>
+                              </div>
+                            </mat-card>
+                          </div>
+                          <!-- Product Company Code End -->
+                          <br>
+                          <hr *ngIf="(i+1) < x.productCompanies.length">
+                        </div> <!-- Company loop-->
+                      </mat-card-content>
+                    </div>
+                  </mat-card>
+                </div>
+                <!-- Product COMPANY End -->
+
+
+                <!-- Product Documentation in Provenance Begin -->
+                <div class="details-container margintop30px">
+                  <mat-card class="bordergray">
+                    <mat-card-title class="title2 font14px colorblack">
+                      PRODUCT DOCUMENTATION IDs ({{x.productDocumentations.length}})
+                    </mat-card-title>
+                    <div *ngIf="x.productDocumentations.length">
+                      <mat-card-content>
+                        <table class="blueTable">
+                          <thead>
+                            <tr>
+                              <th>#</th>
+                              <th>Document ID</th>
+                              <th>Product Document Type</th>
+                              <th>Set Id Version</th>
+                              <th>Effective Time</th>
+                              <th>Jurisdictions</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr *ngFor="let prodDoc of x.productDocumentations; let i = index">
+                              <td>{{i + 1}}</td>
+                              <td>{{ prodDoc.documentId }}</td>
+                              <td>{{ prodDoc.documentType }}</td>
+                              <td>{{ prodDoc.setIdVersion }}</td>
+                              <td>{{ prodDoc.effectiveTime }}</td>
+                              <td>{{ prodDoc.jurisdictions }}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </mat-card-content>
+                    </div>
+                  </mat-card>
+                </div>
+                <!-- Product Documentation End -->
+
+
+                <!-- Product INDICATION BEGIN -->
+                <div class="details-container margintop30px">
+                  <mat-card class="bordergray">
+                    <mat-card-title class="title2 font14px colorblack">
+                      PRODUCT INDICATION ({{x.productIndications.length}})
+                    </mat-card-title>
+                    <div *ngIf="x.productIndications.length > 0">
+                      <mat-card-content>
+                        <div class="marginbottom20px" *ngFor="let prodInd of x.productIndications; let i = index">
+
+                          <div class="colorgreen">
+                            <b>Indication {{(i+1)}} of {{x.productIndications.length}}</b>
+                          </div>
+                          <br><br>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indication }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Text:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationText }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Code:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationCode }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Code Type:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationCodeType }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Group:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationGroup }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Source:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationSource }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row">
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Source Type:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationSourceType }}
+                              </div>
+                            </div>
+                            <div class="row-property">
+                              <div class="row-property-key">
+                                Indication Source URL:
+                              </div>
+                              <div class="row-property-value">
+                                {{ prodInd.indicationSourceUrl }}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </mat-card-content>
+                    </div>
+                  </mat-card>
+                </div>
+                <!-- Product INDICATION END -->
+
+              </div> <!-- Product Provenance loop-->
+
+              <!--</mat-card-content>  -->
+            </div> <!-- if Product Provenance Length > 0 -->
+            <!--</mat-card>  -->
+          </mat-expansion-panel>
+
+        </div> <!-- class="details-container"-->
+        <!-- Product Provenance -->
+
+
+        <!-- Product OVERVIEW -->
+        <div class="details-container">
+
+          <!-- EXPANSION: PRODUCT OVERVIEW -->
+          <mat-expansion-panel [expanded]="true" class="width1028px">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="title2"><b>PRODUCT OVERVIEW</b></div>
+              </mat-panel-title>
+              <mat-panel-description>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Product Container:
+                </div>
+                <div class="row-property-value">
+                  {{product.productContainer}}
+                </div>
+              </div>
+              <div class="row-property">
+                <div class="row-property-key">
+                  Route of Administration:
+                </div>
+                <div class="row-property-value">
+                  {{product.routeAdmin}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Effective Date:
+                </div>
+                <div class="row-property-value">
+                  {{product.effectiveDate}}
+                </div>
+              </div>
+              <div class="row-property">
+                <div class="row-property-key">
+                  Unit of Presentation:
+                </div>
+                <div class="row-property-value">
+                  {{product.unitPresentation}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  End Date:
+                </div>
+                <div class="row-property-value">
+                  {{product.endDate}}
+                </div>
+              </div>
+              <div class="row-property">
+                <div class="row-property-key">
+                  Country:
+                </div>
+                <div class="row-property-value">
+                  {{product.countryCode}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Shelf Life:
+                </div>
+                <div class="row-property-value">
+                  {{product.shelfLife}}
+                </div>
+              </div>
+
+              <div class="row-property">
+                <div class="row-property-key">
+                  Language:
+                </div>
+                <div class="row-property-value">
+                  {{product.language}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Storage Conditions:
+                </div>
+                <div class="row-property-value">
+                  {{product.storageConditions}}
+                </div>
+              </div>
+              <div class="row-property">
+                <div class="row-property-key">
+                  Manufacturer Code:
+                </div>
+                <div class="row-property-value">
+                  {{product.manufacturerCode}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Number of Manufacture Item:
+                </div>
+                <div class="row-property-value">
+                  {{product.numberOfManufactureItem}}
+                </div>
+              </div>
+              <div class="row-property">
+                <div class="row-property-key">
+                  Manufacturer Code Type:
+                </div>
+                <div class="row-property-value">
+                  {{product.manufacturerCodeType}}
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="row-property">
+                <div class="row-property-key">
+                  Manufacturer Name:
+                </div>
+                <div class="row-property-value">
+                  {{product.manufacturerName}}
+                </div>
+              </div>
+            </div>
+
+            <!-- Product OVERVIEW End -->
+          </mat-expansion-panel>
+
+        </div> <!-- Product Overview class=details-container -->
+
+      </mat-accordion>
+    </div> <!-- *ngIf="!showMoreLessFullDetails" -->
+
+    <br><br>
+
+  </div> <!-- class=divcenter-->
 
 </div> <!-- product && product.id -->
\ No newline at end of file
diff --git a/src/app/fda/product/product-details/product-details/product-details.component.scss b/src/app/fda/product/product-details/product-details/product-details.component.scss
index 8a9171cbe..72f3a36ba 100644
--- a/src/app/fda/product/product-details/product-details/product-details.component.scss
+++ b/src/app/fda/product/product-details/product-details/product-details.component.scss
@@ -1,5 +1,6 @@
 .details-container {
   width: 100%;
+  max-width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,10 +43,9 @@
 }
 
 .mat-card {
+ /* min-width: 1028px;*/
   max-width: 1028px;
   width: 100%;
-  /*box-sizing: border-box;*/
-    /*margin-bottom: 20px;*/
 }
 
 .mat-card-title {
@@ -92,10 +92,30 @@
 
 .row-property-2 {
   display: flex;
-  width: 100%;
+  width: 50%;
 }
 
 .row-property-key-2 {
+  min-width: 35%;
+  max-width: 35%;
+  padding: 9px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.row-property-value-2 {
+  min-width: 65%;
+  max-width: 65%;
+  padding: 9px;
+  font-size: 13px;
+}
+
+.row-property-3 {
+  display: flex;
+  width: 33%;
+}
+
+.row-property-key-3 {
   min-width: 50%;
   max-width: 50%;
   padding: 9px;
@@ -103,7 +123,7 @@
   font-weight: 600;
 }
 
-.row-property-value-2 {
+.row-property-value-3 {
   min-width: 50%;
   max-width: 50%;
   padding: 9px;
@@ -130,6 +150,7 @@
   font-size: 12px;
 }
 
+
 .title {
   font-size: 26px;
   font-weight: bold;
@@ -144,7 +165,8 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  margin-bottom: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   flex-direction: row;
   align-items: center;
   white-space: nowrap;
@@ -163,10 +185,34 @@
   margin-top: -10px;
 }
 
+.margintopneg15 {
+  margin-top: -15px;
+}
+
+.margintopneg20px {
+  margin-top: -20px;
+}
+
+.margintopneg30px {
+  margin-top: -30px;
+}
+
+.margintop5px {
+  margin-top: 5px;
+}
+
 .margintop10px {
   margin-top: 10px;
 }
 
+.margintop12px {
+  margin-top: 12px;
+}
+
+.margintop15px {
+  margin-top: 15px;
+}
+
 .margintop20px {
   margin-top: 20px;
 }
@@ -183,6 +229,10 @@
   margin-top: 100px;
 }
 
+.marginbottom10px {
+  margin-bottom: 10px;
+}
+
 .marginbottom20px {
   margin-bottom: 20px;
 }
@@ -191,10 +241,18 @@
   margin-bottom: 60px;
 }
 
+.marginleft5px {
+  margin-left: 5px;
+}
+
 .marginleft50px {
   margin-left: 50px;
 }
 
+.padtopneg20px {
+  padding-top: -20px;
+}
+
 .padtop17px {
   padding-top: 17px;
 }
@@ -203,6 +261,10 @@
   padding-top: 50px;
 }
 
+.padleft10px {
+  padding-left: 10px;
+}
+
 .padleft20px {
   padding-left: 20px;
 }
@@ -235,6 +297,10 @@
   font-size: 14px;
 }
 
+.font15px {
+  font-size: 15px;
+}
+
 .font16px {
   font-size: 16px;
 }
@@ -251,6 +317,14 @@
   color: var(--regular-black-color);
 }
 
+.colorwhite {
+  color: var(--regular-white-color);
+}
+
+.coloroffwhite {
+  color: var(--light-yellow-color-2);
+}
+
 .colorred {
   color: var(--regular-red-color);
 }
@@ -267,6 +341,10 @@
   color: var(--regular-blue-color);
 }
 
+.colorlightblue {
+  color: var(--blue-color);
+}
+
 .colorgreen {
   color: var(--regular-green-color);
 }
@@ -275,6 +353,18 @@
   border: 1px solid var(--regular-grey-color);
 }
 
+.bordergreen {
+  border: 1px solid var(--regular-green-color);
+}
+
+.bordertopnone {
+  border-top: none;
+}
+
+.borderbottomnone {
+  border-bottom: none;
+}
+
 .colororange {
   color: var(--orange-color);
 }
@@ -288,6 +378,11 @@
   max-width: 650px;
 }
 
+.width1028px {
+  min-width: 1028px;
+  max-width: 1028px;
+}
+
 .width45percent {
   width: 45%;
 }
@@ -318,6 +413,59 @@ hr {
   height: 5px;
 }
 
+.wordwrap {
+  word-wrap: break-word;
+}
+
+.middle-fill {
+  flex: 1 1 auto;
+}
+
+.olstyle {
+  /* list-style-position: inside;*/
+   padding-left: 0px;
+   margin-top: 0px;
+ }
+
+.badge-one {
+  background-color: green;
+  color: white;
+  padding: 3px 3px;
+  text-align: center;
+  border-radius: 5px;
+  margin-left: 7px;
+  margin-top: -15px;
+  min-width: 10px;
+  max-height: 10px;
+  border: 1px solid gray;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1px;
+}
+
+.badge-two {
+  background-color: rgb(113, 94, 2);
+  color: white;
+  padding: 6px 6px;
+  text-align: center;
+  border-radius: 10px;
+  margin-left: 7px;
+  margin-top: -15px;
+  min-width: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1px;
+}
+
+.ingredienttitle {
+   width: 190px;
+   height: 40px;
+   background-color: var(--legend-bg-color);
+   border-radius: 10px 10px 0px 0px;
+   border: 1px solid gray;
+   border-bottom: none;
+}
+
 table.blueTable {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   /*font-family: Verdana, Geneva, sans-serif;*/
@@ -353,7 +501,6 @@ table.blueTable thead th {
   font-weight: 700;
   color: var(--table-th-color);
   border-left: 1px solid var(--table-th-border-color-2);
-  /*border: 1px solid rgb(249, 249, 247);*/
   padding: 10px 10px;
 }
 
@@ -391,27 +538,50 @@ table.blueTable tfoot .links a{
   padding-left: 5px;
 }
 
-/* label style */
-.mat-tab-label{
-  background: var(--pale-border-color-rgb-3);
-  color:  var(--red-label-color);
-  min-width: 60px!important;
+/* TABS Style */
+.tab-style {
+  border-width: 9px;
+  border-style: solid;
+  border-color: red;
+}
 
+/* TAB STYLE BEGIN */
+:host ::ng-deep .mat-tab-list .mat-tab-label {
+  min-width: 200px;
+  max-width: 2000px;
+  height: 35px;
+  padding-top: 5px;
+  margin-right: 7px;
+  text-align: top;
+  color: #393939;
+  opacity: 1 !important;
+  border-radius: 10px 10px 0px 0px;
+  background-color: var(--regular-lightgray-color-2);
+  padding-top: -10px;
 }
 
-:host ::ng-deep .mat-tab-label-active {
-  color: var(--regular-white-color);
+:host ::ng-deep .mat-tab-label-content {
+  margin-top: -5px;
+}
+
+:host ::ng-deep .mat-tab-header {
+  margin-top: -10px; /* tab margin*/
+  border-bottom: 1px solid rgb(205, 201, 201);
+}
+
+:host ::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
+  background-color: var(--tabstyle-bg-color-7);
+  color: #FFFFFF;
   font-weight: bold;
-  /*background-color: var(--pale-border-color-rgb-3);*/
-  background-color: var(--orange-color-rgb);
-  border-radius: 5px;
+  padding-top: -10px;
 }
 
 :host ::ng-deep .mat-ink-bar {
-  background-color: var(--primary-color, --orange-color-rgb) !important;
-  height: 2px;
+  display: none !important;
 }
 
+/* TAB STYLE END */
+
 @media(max-width: 700px) {
   .mat-card-title {
     flex-direction: column;
diff --git a/src/app/fda/product/product-details/product-details/product-details.component.ts b/src/app/fda/product/product-details/product-details/product-details.component.ts
index aa34168d4..db8d44e0f 100644
--- a/src/app/fda/product/product-details/product-details/product-details.component.ts
+++ b/src/app/fda/product/product-details/product-details/product-details.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { ProductService } from '../../service/product.service';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { LoadingService } from '@gsrs-core/loading';
 import { Title } from '@angular/platform-browser';
 import { MainNotificationService } from '@gsrs-core/main-notification';
@@ -9,9 +10,11 @@ import { AppNotification, NotificationType } from '@gsrs-core/main-notification'
 import { GoogleAnalyticsService } from '@gsrs-core/google-analytics';
 import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary/controlled-vocabulary.service';
 import { UtilsService } from '../../../../core/utils/utils.service';
+import { ConfigService } from '@gsrs-core/config';
 import { ProductDetailsBaseComponent } from '../product-details-base.component';
 import { GeneralService } from '../../../service/general.service';
 import { AuthService } from '@gsrs-core/auth/auth.service';
+import { ProductService } from '../../service/product.service';
 
 @Component({
   selector: 'app-product-details',
@@ -30,16 +33,19 @@ export class ProductDetailsComponent extends ProductDetailsBaseComponent impleme
     gaService: GoogleAnalyticsService,
     utilsService: UtilsService,
     cvService: ControlledVocabularyService,
+    public configService: ConfigService,
     public authService: AuthService,
     titleService: Title,
+    overlayContainerService: OverlayContainer,
+    dialog: MatDialog,
     public sanitizer: DomSanitizer
   ) {
     super(productService, generalService, activatedRoute, loadingService, mainNotificationService,
-      router, gaService, utilsService, cvService, titleService, sanitizer);
+      router, gaService, utilsService, cvService, configService, titleService, overlayContainerService, dialog, sanitizer);
   }
 
   ngOnInit() {
-    this.authService.hasAnyRolesAsync('Admin', 'Updater', 'SuperUpdater').subscribe(response => {
+    this.authService.hasAnyRolesAsync('Admin', ', Updater', 'SuperUpdater').subscribe(response => {
       this.isAdmin = response;
     });
 
diff --git a/src/app/fda/product/product-details/product-elist-details/product-elist-details.component.ts b/src/app/fda/product/product-details/product-elist-details/product-elist-details.component.ts
index 4912bfc7c..63e01b739 100644
--- a/src/app/fda/product/product-details/product-elist-details/product-elist-details.component.ts
+++ b/src/app/fda/product/product-details/product-elist-details/product-elist-details.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
 import { ProductService } from '../../service/product.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { LoadingService } from '@gsrs-core/loading';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
@@ -39,10 +41,12 @@ export class ProductElistDetailsComponent extends ProductDetailsBaseComponent im
     public cvService: ControlledVocabularyService,
     public configService: ConfigService,
     titleService: Title,
+    public overlayContainerService: OverlayContainer,
+    dialog: MatDialog,
     public sanitizer: DomSanitizer
   ) {
     super(producService, generalService, activatedRoute, loadingService, mainNotificationService,
-      router, gaService, utilsService, cvService, titleService, sanitizer);
+      router, gaService, utilsService, cvService, configService, titleService, overlayContainerService, dialog, sanitizer);
   }
 
   ngOnInit() {
diff --git a/src/app/fda/product/product-form/product-component/product-component-form.component.ts b/src/app/fda/product/product-form/product-component/product-component-form.component.ts
index 488a44966..d0d0441b7 100644
--- a/src/app/fda/product/product-form/product-component/product-component-form.component.ts
+++ b/src/app/fda/product/product-form/product-component/product-component-form.component.ts
@@ -14,7 +14,6 @@ import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { JsonDialogFdaComponent } from '../../../json-dialog-fda/json-dialog-fda.component';
 import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
 
 @Component({
diff --git a/src/app/fda/product/product-form/product-form.component.html b/src/app/fda/product/product-form/product-form.component.html
index ae0fe1c09..5f0d38f4b 100644
--- a/src/app/fda/product/product-form/product-form.component.html
+++ b/src/app/fda/product/product-form/product-form.component.html
@@ -157,9 +157,9 @@
                 </mat-expansion-panel-header>
 
                 <div class="form-row">
-                  <app-cv-input class="col-2-1" domain="DOSAGE_FORM" title="Administravail Pharmacedical Dosage Form"
-                    name="pharmacedicalDosageForm" [model]="product.pharmacedicalDosageForm"
-                    (valueChange)="product.pharmacedicalDosageForm = $event">
+                  <app-cv-input class="col-2-1" domain="PROD_CONTAINER" title="Product Container"
+                    name="productContainer" [model]="product.productContainer"
+                    (valueChange)="product.productContainer = $event">
                   </app-cv-input>
 
                   <app-cv-input class="col-2-1" domain="PROD_ROUTE_OF_ADMIN" title="Route of Administration"
@@ -175,7 +175,8 @@
                   </mat-form-field>
 
                   <mat-form-field class="col-4-1">
-                    <input matInput placeholder="End Date (mm/dd/yyyy)" [(ngModel)]="product.endDate" name="storageConditions" />
+                    <input matInput placeholder="End Date (mm/dd/yyyy)" [(ngModel)]="product.endDate"
+                      name="endDate" />
                   </mat-form-field>
 
                   <app-cv-input class="col-2-1" domain="PROD_UNIT_PRESENTATION" title="Unit of Presentation"
@@ -305,14 +306,15 @@
                         [model]="prodProv.productType" (valueChange)="prodProv.productType = $event">
                       </app-cv-input>
 
-                      <mat-form-field class="col-4-1">
-                        <input matInput placeholder="Marketing Category Code"
-                          [(ngModel)]="prodProv.marketingCategoryCode" name="marketingCategoryCode" />
-                      </mat-form-field>
+                      <app-cv-input class="col-4-1" domain="PROD_MARKETING_CATEGORY_NAME"
+                        title="Marketing Category Name" name="marketingCategoryName"
+                        [model]="prodProv.marketingCategoryName" (valueChange)="updateMarketingCategoryName($event, prodProvIndex)">
+                      </app-cv-input>
 
                       <mat-form-field class="col-4-1">
-                        <input matInput placeholder="Marketing Category Name"
-                          [(ngModel)]="prodProv.marketingCategoryName" name="marketingCategoryName" />
+                        <input matInput placeholder="Marketing Category Code"
+                          [(ngModel)]="prodProv.marketingCategoryCode" name="marketingCategoryCode"
+                          [disabled]="disableMarketingCategoryCode" />
                       </mat-form-field>
                     </div>
 
diff --git a/src/app/fda/product/product-form/product-form.component.ts b/src/app/fda/product/product-form/product-form.component.ts
index 48e71fffe..d57cae9e4 100644
--- a/src/app/fda/product/product-form/product-form.component.ts
+++ b/src/app/fda/product/product-form/product-form.component.ts
@@ -44,6 +44,7 @@ export class ProductFormComponent implements OnInit, AfterViewInit, OnDestroy {
   username = null;
   title = null;
   isAdmin = false;
+  disableMarketingCategoryCode = true;
   expiryDateMessage = '';
   manufactureDateMessage = '';
   viewProductUrl = '';
@@ -491,11 +492,17 @@ export class ProductFormComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   showJSON(): void {
+    const date = new Date();
+    let jsonFilename = 'product_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
     let cleanProduct = this.cleanProduct();
+
+    let data = {jsonData: cleanProduct, jsonFilename: jsonFilename};
+
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
       height: '90%',
-      data: cleanProduct
+      data: data
     });
 
     // this.overlayContainer.style.zIndex = '1002';
@@ -794,6 +801,26 @@ export class ProductFormComponent implements OnInit, AfterViewInit, OnDestroy {
     return this.productService.getViewProductUrl(this.id);
   }
 
+  updateMarketingCategoryName(event: any, prodProvIndex: number) {
+
+    this.product.productProvenances[prodProvIndex].marketingCategoryName = event;
+
+    const cvSubscription = this.cvService.getDomainVocabulary('PROD_MARKETING_CATEGORY_NAME').subscribe(response => {
+      const marketingCatNameVocabulary = response['PROD_MARKETING_CATEGORY_NAME'].dictionary;
+
+      if (marketingCatNameVocabulary) {
+        if (event) {
+          if (marketingCatNameVocabulary[event]) {
+            if (marketingCatNameVocabulary[event].description) {
+              this.product.productProvenances[prodProvIndex].marketingCategoryCode = marketingCatNameVocabulary[event].description;
+            }
+          }
+        }
+      }
+    });
+    this.subscriptions.push(cvSubscription);
+  }
+
   scrub(oldraw: any): any {
     const old = oldraw;
     const idHolders = defiant.json.search(old, '//*[id]');
diff --git a/src/app/fda/product/product-form/product-ingredient-form/product-ingredient-form.component.ts b/src/app/fda/product/product-form/product-ingredient-form/product-ingredient-form.component.ts
index 21e093be8..55f6b7a21 100644
--- a/src/app/fda/product/product-form/product-ingredient-form/product-ingredient-form.component.ts
+++ b/src/app/fda/product/product-form/product-ingredient-form/product-ingredient-form.component.ts
@@ -15,7 +15,6 @@ import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { JsonDialogFdaComponent } from '../../../json-dialog-fda/json-dialog-fda.component';
 import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
 import { SubstanceSearchSelectorComponent } from '../../../substance-search-select/substance-search-selector.component';
 import { SubstanceRelated, SubstanceSummary } from '@gsrs-core/substance';
diff --git a/src/app/fda/product/product-form/product-lot-form/product-lot-form.component.ts b/src/app/fda/product/product-form/product-lot-form/product-lot-form.component.ts
index 3fd840ab5..d6ac00dff 100644
--- a/src/app/fda/product/product-form/product-lot-form/product-lot-form.component.ts
+++ b/src/app/fda/product/product-form/product-lot-form/product-lot-form.component.ts
@@ -14,7 +14,6 @@ import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { JsonDialogFdaComponent } from '../../../json-dialog-fda/json-dialog-fda.component';
 import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
 
 @Component({
diff --git a/src/app/fda/product/product.module.ts b/src/app/fda/product/product.module.ts
index b4c57db15..7e4ddf936 100644
--- a/src/app/fda/product/product.module.ts
+++ b/src/app/fda/product/product.module.ts
@@ -35,7 +35,6 @@ import { SubstanceSearchSelectorModule } from '../substance-search-select/substa
 import { SubstanceImageModule } from '@gsrs-core/substance/substance-image.module';
 import { SubstanceFormModule } from '../../core/substance-form/substance-form.module';
 import { FacetsManagerModule } from '@gsrs-core/facets-manager';
-import { JsonDialogFdaComponent } from '../json-dialog-fda/json-dialog-fda.component';
 
 /* GSRS Product Imports */
 import { ProductTextSearchModule } from './product-text-search/product-text-search.module';
diff --git a/src/app/fda/product/products-browse/products-browse.component.html b/src/app/fda/product/products-browse/products-browse.component.html
index c848275b4..325eee944 100644
--- a/src/app/fda/product/products-browse/products-browse.component.html
+++ b/src/app/fda/product/products-browse/products-browse.component.html
@@ -219,63 +219,9 @@
                         <mat-icon svgIcon="edit"></mat-icon>
                       </a>
 
-                      <!-- COMMENTING THIS OUT RIGHT NOW DUE TO SECURITY ISSUE
-                      &nbsp;&nbsp;
-                      <span *ngIf="prodCode.productCodeType && prodCode.productCodeType === 'NDC CODE'">
-                        <a href="{{dailyMedUrl}}{{prodCode.productCode}}" target="_blank" alt="Go to DailyMed website"
-                          title="Go to DailyMed website">
-                          <img [src]="iconSrcPath">
-                        </a>
-                        <mat-icon class="small-icon margintop20px" svgIcon="open_in_new"
-                          matTooltip="opens in new window">
-                        </mat-icon>
-                      </span>
-                      -->
-
                     </span> <!-- loop productCode -->
                   </span> <!-- loop productProvenance-->
 
-
-                  <!--
-                  <!- - If fromtable is SPL, display SPL Details links - ->
-                  <span *ngIf="product.fromtable === 'SPL'">
-                    <div class="padtop7px">
-                      <a class="substance-name" [routerLink]="['/product-elist', product.productId]" target="_blank"
-                        alt="View SPL Product Record" title="View SPL Product Record"><span
-                          *ngIf="product.productNDC; else noProdNDC">{{product.productNDC}}</span>
-                        <ng-template #noProdNDC>(NO ID)</ng-template>
-                      </a>
-                    </div>
-                    <div class="padtop15px padbottom7px">
-                      <ng-container *ngIf="product.productNDC !== null">
-                        <a href="{{dailyMedUrl}}{{product.productNDC}}" target="_blank" alt="Go to DailyMed website"
-                          title="Go to DailyMed website">
-                          <img [src]="iconSrcPath">
-                        </a>
-                        <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window">
-                        </mat-icon>
-                      </ng-container>
-                    </div>
-                  </span>
-                   -->
-
-                  <!-- If fromtable is GSRS, display GSRS Details links -->
-                  <!--
-                  <span *ngIf="product.fromtable === 'GSRS'">
-                    <a class="substance-name" [routerLink]="['/product', product.productId]" target="_blank"
-                      alt="View Product Record"><span
-                        *ngIf="product.productNDC; else noProdNDCSRS">{{product.productNDC}}</span>
-                      <ng-template #noProdNDCSRS>(NO ID)</ng-template>
-                    </a>
-                    &nbsp;&nbsp;
-                    <!- - Edit GSRS record button - ->
-                    <a [routerLink]="['/product', product.productId, 'edit']" target="_blank" *ngIf="isAdmin"
-                      matTooltip='Edit Product Record'>
-                      <mat-icon svgIcon="edit"></mat-icon>
-                    </a>
-                  </span>
-                  -->
-
                 </td>
               </ng-container>
 
@@ -300,7 +246,8 @@
                         <div *ngFor="let prodIngred of prodLot.productIngredients; let indexActiveIngred = index">
 
                           <span *ngIf=" prodIngred.ingredientType; else noIngredientType">
-                            <span *ngIf="prodIngred.ingredientType === 'Active Ingredient'">
+                            <span
+                              *ngIf="prodIngred.ingredientType === 'Active Ingredient' || prodIngred.ingredientType === 'ACTIVE INGREDIENT'">
 
                               <span *ngIf="prodIngred._ingredientName">
                                 <li>
@@ -341,27 +288,6 @@
                     </div> <!-- loop ManufactureItems -->
                   </ol>
 
-                  <!--
-                  <ol class="olstyle">
-                    <div *ngFor="let ing of product.productIngredientAllList; let indexIng = index">
-                      <div *ngIf="ing.substanceName">
-                        <div *ngIf="ing.ingredientType">
-                          <div
-                            *ngIf="(ing.ingredientType === 'ACTIVE INGREDIENT') || (ing.ingredientType === 'Active Ingredient')">
-                            <li>
-                              <a [routerLink]="['/substances', ing.substanceUuid]" target="_blank">{{ing.substanceName}}
-                              </a>
-                              <button mat-button class="structure-parameters"
-                                (click)="openImageModal($event, ing.substanceUuid)">
-                                <mat-icon style="padding:0px;margin:0px;">analytics</mat-icon>
-                              </button>
-                            </li>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </ol>
-                  -->
                 </td>
               </ng-container>
 
@@ -390,11 +316,6 @@
               <ng-container matColumnDef="country">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Country </th>
                 <td mat-cell *matCellDef="let product">
-                  <!--
-                  <div *ngFor="let prodComp of product.productCompanyAllList; let i = index">
-                    {{prodComp.countryWithoutCode}}
-                  </div>
-                  -->
                   <div *ngFor="let prodProv of product.productProvenances">
                     <div *ngFor="let prodComp of prodProv.productCompanies">
                       {{prodComp.companyCity}}
@@ -408,7 +329,7 @@
               </ng-container>
 
               <ng-container matColumnDef="status">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Status </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Marketing Status </th>
                 <td mat-cell *matCellDef="let product">
                   <div *ngFor="let prodProv of product.productProvenances">
                     {{prodProv.productStatus}}
@@ -425,23 +346,6 @@
                 </td>
               </ng-container>
 
-              <!--
-              <ng-container matColumnDef="ingredientType">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Ingredient Type </th>
-                <td mat-cell *matCellDef="let product">
-                  <div *ngFor="let prodIng of product.productIngredientAllList; let i = index">
-                    <div *ngIf="prodIng.substanceUuid">
-
-                      <div *ngIf="(substance.uuid === prodIng.substanceUuid)">
-                        {{prodIng.ingredientType}}
-                      </div>
-
-                    </div>
-                  </div>
-                </td>
-              </ng-container>
-              -->
-
               <ng-container matColumnDef="applicationNumber">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Application Number </th>
                 <td mat-cell *matCellDef="let product">
@@ -464,18 +368,6 @@
                     </a>
                     -->
                   </span>
-                  <!--
-                    *ngIf="(product.appType && product.appNumber); else noAppType">
-                    <a href="{{getAppTypeNumberUrl(product.appType, product.appNumber)}}" target="_blank"><span
-                        class="approval-id">{{product.appTypeNumber}}</span>
-                    </a>
-                  </span>
-                  <ng-template #noAppType>
-                    <span class="approval-id">
-                      {{product.appTypeNumber}}
-                    </span>
-                  </ng-template>
-                -->
                 </td>
               </ng-container>
 
@@ -564,83 +456,6 @@
 
                   <!-- Product Provenance TAB Begin -->
                   <!-- INSIDE TAB MAT-CARD BEGIN -->
-                  <!--
-                  <mat-card class="style width90percent bordergray">
-
-                    <mat-title>
-
-                      <div class="middle-fill">&nbsp;</div>
-                    </mat-title>
-
-                    <mat-card-content class="marginleftneg15px">
-                    -->
-
-                  <!-- COMMENT THIS OUT NOW
-
-                      <div class="divflex marginleftneg10px">
-                        <div>
-                          <span class="font13px">Product Name:</span>&nbsp;&nbsp;
-                        </div>
-
-                          <div>
-                          <!- - Product Name Display BEGIN - ->
-
-                          <!- - Check and loop Product Provenances- ->
-                          <!- -
-                          <span *ngIf="product.productProvenances.length > 0; else noProdNameFromProv">
-                            <span *ngFor="let prodProv of product.productProvenances; let i = index">
-                            - ->
-                          <!- - Check and loop Product Names - ->
-                          <span *ngIf="prodProv.productNames.length > 0; else noProdNameFromName">
-                            <span *ngFor="let prodName of prodProv.productNames">
-
-                              <!- - if Product Name exits - ->
-                              <span *ngIf="prodName.productName; else noProdName">
-                                <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                                  <span
-                                    *ngIf="prodName.displayName && prodName.displayName == true; else noDisplayName">
-                                    {{prodName.productName}}
-                                  </span>
-                                  <ng-template #noDisplayName>
-                                    <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                                      (NO Product Name)
-                                    </a>
-                                  </ng-template>
-                                </a>
-                              </span>
-                              <ng-template #noProdName>
-                                <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                                  (NO Product Name)
-                                </a>
-                              </ng-template>
-
-                            </span> <!- - for loop ProductNames - ->
-                          </span> <!- - if productNames size > 0 - ->
-                          <ng-template #noProdNameFromName>
-                            <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                              (NO Product Name)
-                            </a>
-                          </ng-template>
-
-
-                          <!- - </span> - ->
-                          <!- - for loop ProductProvenances - ->
-                          <!- - </span> - ->
-                          <!- - if productProdvenances size > 0 - ->
-
-                          <ng-template #noProdNameFromProv>
-                            <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                              (NO Product Name)
-                            </a>
-                          </ng-template>
-
-                        </div>
-                        <!- - Product Name Display END  - ->
-
-
-                      </div> <!- - class=divflex - ->
-                      COMMENT END HERE -->
-
 
                   <div class="row margintop10px">
                     <div class="row-property">
@@ -699,22 +514,9 @@
                               title="Go to DailyMed website">
                               <img [src]="iconSrcPath">
                             </a>
-                            <mat-icon class="small-icon" svgIcon="open_in_new"
-                              matTooltip="opens in new window">
+                            <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window">
                             </mat-icon>
                           </span>
-
-                          <!-- COMMENTING THIS OUT RIGHT NOW DUE TO SECURITY ISSUE
-                                &nbsp;&nbsp;
-                                <span *ngIf="prodCode.productCodeType && prodCode.productCodeType === 'NDC CODE'">
-                                  <a href="{{dailyMedUrl}}{{prodCode.productCode}}" target="_blank"
-                                    alt="Go to DailyMed website" title="Go to DailyMed website">
-                                    <img [src]="iconSrcPath">
-                                  </a>
-                                  <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window">
-                                  </mat-icon>
-                                </span>
-                                -->
                         </span>
                       </div>
                     </div>
@@ -734,46 +536,22 @@
                         Labeler Name:
                       </div>
                       <div class="row-property-value">
-                        <!--
-                            <div *ngFor="let prodComp of product.productCompanyAllList; let indexComp = index">
-                            -->
                         <div *ngFor="let prodComp of prodProv.productCompanies">
                           {{prodComp.companyName}}
-                          <!--
-                                <div *ngFor="let prodCode of prodComp.productCompanyCodes">
-                                  <span
-                                    *ngIf="prodCode.companyCodeType && prodCode.companyCodeType.companyCodeType === 'DUNS NUMBER'">
-                                    <span *ngIf="prodCode.companyCode">&nbsp;({{prodCode.companyCode}})</span>
-                                  </span>
-                                </div>
-                                 -->
                         </div>
                       </div>
                     </div>
-
                     <div class="row-property">
                       <div class="row-property-key">
                         Application Type Number:
                       </div>
                       <div class="row-property-value">
-
                         <span class="font14px" *ngIf="prodProv.applicationType">
                           {{prodProv.applicationType}}
                         </span>
                         <span class="font14px" *ngIf="prodProv.applicationNumber">
                           {{prodProv.applicationNumber}}
                         </span>
-                        <!-- COMMENTING THIS OUT RIGHT NOW DUE TO SECURITY ISSUE
-                              <a href="{{getAppTypeNumberUrl(prodProv.applicationType, prodProv.applicationNumber)}}"
-                                target="_blank">
-                                <span class="font14px" *ngIf="prodProv.applicationType">
-                                  {{prodProv.applicationType}}
-                                </span>
-                                <span class="font14px" *ngIf="prodProv.applicationNumber">
-                                  {{prodProv.applicationNumber}}
-                                </span>
-                              </a>
-                            -->
                       </div>
                     </div>
                   </div>
@@ -805,14 +583,8 @@
                     </div>
                   </div>
 
-                  <!--
-                    </mat-card-content>
-                  </mat-card>
-                   -->
-
                   <!-- INSIDE TAB MAT_CARD END -->
 
-
                 </mat-tab>
               </mat-tab-group>
               <!-- GROUP BY PROVENANCE END -->
diff --git a/src/app/fda/product/products-browse/products-browse.component.ts b/src/app/fda/product/products-browse/products-browse.component.ts
index 2b9c36143..6f29e20ae 100644
--- a/src/app/fda/product/products-browse/products-browse.component.ts
+++ b/src/app/fda/product/products-browse/products-browse.component.ts
@@ -498,13 +498,13 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
 
                   // if Ingredient Type exists
                   if (elementIngred.ingredientType) {
+
                     // Active Ingredient Count
                     if (elementIngred.ingredientType == this.ACTIVE_INGREDIENT_UPPERCASE
                       || elementIngred.ingredientType == this.ACTIVE_INGREDIENT_LOWERCASE) {
 
                       // Store Active Ingredient in an Array
                       product._activeIngredients.push(elementIngred);
-
                     }
                     // Inactive and Other Ingredient Count
                     else if (elementIngred.ingredientType != this.ACTIVE_INGREDIENT_UPPERCASE
@@ -512,10 +512,10 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
 
                       // Store Active Ingredient in an Array
                       product._otherIngredients.push(elementIngred);
-
                     }
                   } // if Ingredient Type exists
 
+
                   /*
                   // Get Substance Details, uuid, approval_id, substance name
                   if (elementIngred.substanceKey) {
@@ -540,6 +540,7 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
                     });
                   });
                   */
+                 
                 } // response
               });
               this.subscriptions.push(substanceSubscription);
diff --git a/src/app/fda/product/service/product.service.ts b/src/app/fda/product/service/product.service.ts
index ce6d66791..17f72a5ae 100644
--- a/src/app/fda/product/service/product.service.ts
+++ b/src/app/fda/product/service/product.service.ts
@@ -8,7 +8,7 @@ import { PagingResponse } from '@gsrs-core/utils';
 import { UtilsService } from '@gsrs-core/utils/utils.service';
 import { Facet } from '@gsrs-core/facets-manager';
 import { FacetParam, FacetHttpParams, FacetQueryResponse } from '@gsrs-core/facets-manager';
-import { Product, ProductProvenance, ProductName, ProductTermAndPart, ProductCode, ProductAll, ProductDocumentation } from '../model/product.model';
+import { Product, ProductProvenance, ProductName, ProductTermAndPart, ProductCode, ProductDocumentation } from '../model/product.model';
 import { ProductCompany, ProductCompanyCode, ProductIndication, ProductManufactureItem, ProductManufacturer, ProductLot, ProductIngredient } from '../model/product.model';
 import { ValidationResults } from '../model/product.model';
 import { SubstanceSuggestionsGroup } from '@gsrs-core/utils/substance-suggestions-group.model';
diff --git a/src/styles/_styles.scss b/src/styles/_styles.scss
index d9c627e53..3cb6122bd 100644
--- a/src/styles/_styles.scss
+++ b/src/styles/_styles.scss
@@ -11,6 +11,7 @@
     --regular-white-color: white;
     --regular-offwhite-color: rgb(242, 242, 242);
     --regular-lightgray-color: lightgray;
+    --regular-lightgray-color-2: rgb(232, 232, 232);
     --regular-gainsboro-color: gainsboro;
     --regular-grey-color: grey;
     --regular-transparent-color: transparent;

From 9bd39826101c8dde8c06d63d629cc77f2f6e6568 Mon Sep 17 00:00:00 2001
From: Newatia <Archana.Newatia@fda.gov>
Date: Tue, 20 Aug 2024 11:20:32 -0400
Subject: [PATCH 2/2] updated product application ivp

---
 .../core/assets/data/product_dictionary.json  |   8 +-
 .../core/facets-manager/facet-display.pipe.ts |   8 +-
 src/app/fda/config/config.json                |   5 +-
 .../invitro-pharmacology-form.component.html  |  69 +-
 .../invitro-pharmacology-form.component.ts    | 734 +++++++-----------
 .../model/invitro-pharmacology.model.ts       |   4 +-
 .../service/invitro-pharmacology.service.ts   |   3 +-
 .../product-details-base.component.ts         |   6 +-
 .../product-details.component.html            |   8 +-
 .../product-text-search.component.ts          |  51 +-
 .../products-browse.component.html            | 211 +++--
 .../products-browse.component.scss            |   4 +
 .../products-browse.component.ts              | 100 ++-
 src/app/fda/service/general.service.ts        |   7 +-
 14 files changed, 610 insertions(+), 608 deletions(-)

diff --git a/src/app/core/assets/data/product_dictionary.json b/src/app/core/assets/data/product_dictionary.json
index 37d178942..263fe500f 100644
--- a/src/app/core/assets/data/product_dictionary.json
+++ b/src/app/core/assets/data/product_dictionary.json
@@ -1,9 +1,9 @@
 {
-    "Administered Pharmaceutical Dosage Form":{
-        "lucenePath":"root_pharmaceuticalDosageForm",
-        "description":"Administered Pharmaceutical Dosage Form of the product",
+    "Product Container":{
+        "lucenePath":"root_productContainer",
+        "description":"Product Container of the product",
         "type":"string",
-        "cvDomain":"DOSAGE_FORM",
+        "cvDomain":"PROD_CONTAINER",
         "priority":null,
         "suggest":null
     },
diff --git a/src/app/core/facets-manager/facet-display.pipe.ts b/src/app/core/facets-manager/facet-display.pipe.ts
index cf14e66e8..ed384b5eb 100644
--- a/src/app/core/facets-manager/facet-display.pipe.ts
+++ b/src/app/core/facets-manager/facet-display.pipe.ts
@@ -16,8 +16,6 @@ export class FacetDisplayPipe implements PipeTransform {
 	     codeTerm = this.configService.configData.approvalCodeName;
 	  }
 
-
-
     if (args) {
       if (args === 'userList') {
         if (name.includes(':')){
@@ -98,6 +96,12 @@ export class FacetDisplayPipe implements PipeTransform {
     if (name === 'root_submitDate') {
       return 'Submit Date';
     }
+    if (name === 'root_creationDate') {
+      return 'Record Create Date';
+    }
+    if (name === 'root_lastModifiedDate') {
+      return 'Record Last Edited';
+    }
 
     return name.trim();
   }
diff --git a/src/app/fda/config/config.json b/src/app/fda/config/config.json
index c4a10ed3e..a16732a6c 100644
--- a/src/app/fda/config/config.json
+++ b/src/app/fda/config/config.json
@@ -969,7 +969,6 @@
       ]
     },
     "applications": {
-
       "default": [
         "Application Type",
         "Center",
@@ -1039,8 +1038,8 @@
       "admin": [
         "Record Created By",
         "Record Last Edited By",
-        "Record Create Date",
-        "Record Last Edited"
+        "root_creationDate",
+        "root_lastModifiedDate"
       ]
     },
     "ctclinicaltrial": {
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
index ead1d29d4..66eb23d96 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.html
@@ -72,7 +72,7 @@
 
       <div class="dismiss-container">
         <span class="middle-fill"></span>
-        <button mat-flat-button color="primary" (click)="saveFirstNewAssay()"
+        <button mat-flat-button color="primary" (click)="saveAssays()"
           [disabled]="isLoading || (this.validationResult === false)">{{validationMessages &&
           validationMessages.length > 0?'Dismiss All and ':''}}
           Submit</button>
@@ -138,52 +138,43 @@
             <!-- **** MAT-ACCORDIAN BEGIN *** -->
             <mat-accordion multi="true">
 
-              <!-- ################################################################# -->
-              <!-- ################################################################# -->
-              <!-- SCREENING DETAILS BEGIN -->
+              <!-- POPUP SAVING ASSAY/SCREENIG BEGIN -->
+              <ng-template #saveTemplate>
 
-              <!-- Screening Loop -->
-              <!--
-              <div class="marginbottom15px"
-                *ngFor="let screening of assay.invitroAssayScreenings; let screeningIndex = index">
-              -->
+                <br>
+                <div class="font20px fontbold" mat-dialog-title>
+                  Saving Screening Records ...
+                </div>
 
-              <!-- Add divider if more than one screening -->
-              <!--
-                      <span *ngIf="screeningIndex > 0">
-                        <br>
-                        <hr><br>
-                      </span>
+                <div mat-dialog-content>
+                  <div class="font17px">
+                    <br>
+                    Record <b><span class="colormaroon">{{totalRecordSavedInDatabase}}</span> of
+                      {{assaysToSave.length}}</b> saved successfully
+                  </div>
+                </div> <!-- mat-dialog-content -->
 
+                <!-- CLOSE BUTTON -->
+                <!--
+                <div mat-dialog-actions>
+                  <span class="middle-fill"></span>
+                  <button class="mat-raised-button mat-primary" (click)="close()" mat-dialog-close>Close</button>
+                </div>
+                -->
 
-                      <div class="margintop10px font20px fontbold">Screening {{(screeningIndex+1)}} of
-                        {{assay.invitroAssayScreenings.length}}
-                        &nbsp;&nbsp;&nbsp;&nbsp;
+              </ng-template>
+              <!-- POPUP SAVING ASSAY/SCREENIG END -->
 
-                        <!- - DELETE SCREENING BUTTON - ->
-                        <button mat-icon-button color="primary" (click)="confirmDeleteScreening(screeningIndex)"
-                          matTooltip="Delete Screening {{(screeningIndex+1)}}">
-                          <mat-icon>delete_forever</mat-icon>
-                        </button>
-                      </div>
 
-                      <br>
-                      -->
+              <!-- ################################################################# -->
+              <!-- ################################################################# -->
+              <!-- SCREENING DETAILS BEGIN -->
 
               <!-- ************************************************************ -->
               <!-- ************************************************************ -->
               <!-- MAT-STEPPER BEGIN -->
               <mat-stepper orientation="horizontal" [linear]="isLinear" #stepper>
 
-                <!-- SET ICONS -->
-                <ng-template matStepperIcon="phone">
-                  <mat-icon>call_end</mat-icon>
-                </ng-template>
-                <ng-template matStepperIcon="chat">
-                  <mat-icon>forum</mat-icon>
-                </ng-template>
-
-
                 <!-- ################### REFERENCE AND LABORATORY STEP ################# -->
                 <mat-step [stepControl]="firstFormGroup">
                   <!--
@@ -1165,7 +1156,6 @@
                     <div class="" *ngFor="let screening of assay.invitroAssayScreenings; let indexScreening = index">
 
                       <!-- IF SHOW IS TRUE -->
-
                       <div *ngIf="screening._show == true">
 
                         <!-- Result - FIRST ROW  -->
@@ -1205,7 +1195,7 @@
                           <div class="divflex margintopneg5px width100px alignright">
                             <!-- COPY BUTTON -->
                             <div class="margintop10px">
-                              <a href="" (click)="copyAssaySummaryRow(indexAssay); false"
+                              <a href="" (click)="copyAssayResultRow(indexAssay); false"
                                 matTooltip='copy this screening row to new row'>
                                 <mat-icon class="margintopneg10px" svgIcon="file_copy"></mat-icon>
                               </a>
@@ -1311,12 +1301,11 @@
                             </app-cv-input>
                           </div>
 
-
                           <!-- Result - FOURTH ROW  -->
                           <div class="form-row margintop10px">
                             <mat-checkbox class="col-4-1 margintop15px textalignleft"
-                              [checked]="screening.invitroAssayResult.plasmaProteinAdded"
-                              (change)="setPlasmaProteinCheckBox($event.checked, screeningIndex)">Plasma Protein
+                              [(ngModel)]="screening.invitroAssayResult.plasmaProteinAdded"
+                              (change)="setPlasmaProteinCheckBox($event, screeningIndex)">Plasma Protein
                               Added?
                             </mat-checkbox>
 
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
index e6c1c95dc..eef4f328f 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -46,20 +46,27 @@ import {
 })
 export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
 
+  @ViewChild('saveTemplate', { static: false }) private saveTemplate;
+
   substanceKeyTypeForInvitroPharmacologyConfig = null;
 
   assay: InvitroAssayInformation;
-  assayTemp: InvitroAssayInformation;
   firstAssayToSave: InvitroAssayInformation;
-  originalAssayFromDb: Array<InvitroAssayInformation> = [];
+  originalAssaysFromDb: Array<InvitroAssayInformation> = [];
+  assaysToSave: Array<InvitroAssayInformation> = [];
 
-  firstAssaySavedResultInfo: InvitroAssayResultInformation;
   originalAssayResultInfoFromDb: InvitroAssayResultInformation;
   assayResultInfo: InvitroAssayResultInformation = {};
 
+  assayToSaveApiUrlList: Array<any> = [];
+
   id?: number;
   totalAssayToSave = 0;
-  assaySavedCounter = 0;
+  totalRecordSavedInDatabase = 0;
+
+  numberOfRecordToSaveParallel = 1;
+  numberOfRecordToSaveEndIndex = 1;
+  numberOfRecordToSaveStartIndex = 0;
 
   // Form Control
   existingAssayControl = new FormControl();
@@ -243,6 +250,10 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     }, 600);
   }
 
+  ngAfterViewInit(changes: any) {
+    //this.openModalSave(this.saveTemplate);
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.forEach(subscription => {
       subscription.unsubscribe();
@@ -259,7 +270,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
           this.existingAssaysByAssaySetList = response;
 
           // Copy original records in the variable
-          this.originalAssayFromDb = _.cloneDeep(response);
+          this.originalAssaysFromDb = _.cloneDeep(response);
 
           // Loop through Assays and find result information id where same as url id
           this.existingAssaysByAssaySetList.forEach(assay => {
@@ -365,9 +376,6 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
           // Push new screening record in existing Assay
           assay.invitroAssayScreenings.push(newInvitroAssayScreening);
 
-          // Delete Assay Set Object
-          //  delete assay.invitroAssaySets;
-
         }); // LOOP: assay
 
       } else {
@@ -725,323 +733,237 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     }); // LOOP: assay
   }
 
-  createFirstAssayToSave() {
-    // Using this assay list in the form
-    if (this.existingAssaysByAssaySetList.length > 0) {
-
-      // Get the first Assay from the list
-      this.firstAssayToSave = this.existingAssaysByAssaySetList[0];
+  openModalSave(template: TemplateRef<any>) {
+    const dialogRef = this.dialog.open(template, {
+      minWidth: '50%',
+      maxWidth: '50%'
+    });
 
-      // copy the Result Information on the last screening or where _show == true
-      // call copy, THIS LINE MUST be before deleteing the _show field in the next code
-      this.firstAssayToSave.invitroAssayScreenings.forEach(screening => {
-        if (screening) {
-          if (screening._show == true) {
-            screening.invitroAssayResultInformation = this.assayResultInfo;
-          }
-        }
-      });
+    this.overlayContainer.style.zIndex = '1002';
 
-      // delete _show field before saving
-      this.firstAssayToSave.invitroAssayScreenings.forEach(screening => {
-        if (screening) {
-          if (screening._show) {
-            delete screening._show;
-          }
-        }
-      });
+    dialogRef.afterClosed().subscribe(result => {
+      this.overlayContainer.style.zIndex = null;
+    });
+  }
 
-      // Assign assay to Servive assay
-      this.invitroPharmacologyService.assay = this.firstAssayToSave;
-    }
+  close() {
+    this.dialog.closeAll();
   }
 
-  saveFirstNewAssay() {
-    this.loadingService.setLoading(true);
-    this.isLoading = true;
+  /************************************************************************************************** */
+  /****************************************************************************************************/
+  /* SAVING ASSAY/SCREEING FUNCTIONS BEGIN                                                            */
+  /************************************************************************************************** */
 
-    this.isSavedSuccessfullyMessage = [];
+  saveAssays() {
 
-    // If saving Assays for existing Result
-    if (this.id) {
-      this.saveRemainingAssays(false);
-    } else {
+    this.openModalSave(this.saveTemplate);
 
-      // Registering NEW Screening, Saving the FIRST Assay
-      // Create First Assay To Save
-      if (this.firstAssayToSave == null) {
-        this.createFirstAssayToSave();
-      }
+    // Create new Summary Record from Screening/Result record
+    this.createNewSummary();
 
-      // Create Summary Object to copy Result data
-      this.createNewSummary();
+    // Copy the Assays/Screening to new variable
+    this.assaysToSave = _.cloneDeep(this.existingAssaysByAssaySetList);
 
-      const saveFirstAssaySubscribe = this.invitroPharmacologyService.saveAssay().subscribe(response => {
+    this.generateAssayToSave();
+  }
 
-        //Add a counter for each assay get saved
-        this.assaySavedCounter = this.assaySavedCounter + 1;
+  generateAssayToSave() {
+    let isAssaySame = false;
+    let assayToSaveApiUrlList: Array<any> = [];
 
-        if (response) {
-          // Clear validation and submission message
-          //this.loadingService.setLoading(false);
-          //this.isLoading = false;
-          this.validationMessages = null;
-          this.showSubmissionMessages = false;
-          this.submissionMessage = '';
-
-          if (response.id) {
-            if (response.invitroAssayScreenings.length > 0) {
-
-              // Store in the list if this record was stored into the database successfully or not
-              this.isSavedSuccessfullyMessage.push(this.assaySavedCounter + '|' + response.id + '|' + 'true');
-
-              // Get the last screening from the returned/saved Assay
-              let screening = response.invitroAssayScreenings[response.invitroAssayScreenings.length - 1];
-
-              // Get the saved result information from the database
-              // set invitroAssayResultInformation to local variable
-              if (screening.invitroAssayResultInformation) {
-                this.firstAssaySavedResultInfo = screening.invitroAssayResultInformation;
-
-                // if ** ONLY ONE ** record exists, go to edit page, otherwise save rest of the assays
-                if (this.existingAssaysByAssaySetList.length == 1) {
-
-                  this.isLoading = false;
-                  this.loadingService.setLoading(this.isLoading);
-
-                  this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
-                  this.showSubmissionMessages = true;
-
-                  setTimeout(() => {
-                    this.showSubmissionMessages = false;
-                    this.submissionMessage = '';
-                    if (response.id) {
-                      this.invitroPharmacologyService.bypassUpdateCheck();
-                      const id = response.id;
-                      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-                      this.router.onSameUrlNavigation = 'reload';
-                      this.router.navigate(['/invitro-pharm/', this.firstAssaySavedResultInfo.id, 'edit']);
-                    }
-                  }, 4000);
-                } else {
-
-                  // remove the first screening, save the remaining screeing into the database
-                  // this.existingAssaysByAssaySetList.splice(0, 1);
-
-                  // Save remaining assays
-                  this.saveRemainingAssays(true);
-                }
+    let endIndex = this.numberOfRecordToSaveEndIndex * this.numberOfRecordToSaveParallel;
 
-              } // if invitroAssayResultInformation exists
+    while (this.numberOfRecordToSaveStartIndex < endIndex && this.numberOfRecordToSaveStartIndex < this.assaysToSave.length) {
 
-            } // if responseAssay.invitroAssayScreenings.length > 0
-          } // if response.id  // if saved successfully
-        } // if response
+      // Get Assay
+      let assay = this.assaysToSave[this.numberOfRecordToSaveStartIndex];
 
-      }, (error: SubstanceFormResults) => {
-        this.showSubmissionMessages = true;
-        this.loadingService.setLoading(false);
-        this.isLoading = false;
-        this.submissionMessage = null;
-        if (error.validationMessages && error.validationMessages.length) {
-          this.validationResult = error.isSuccessfull;
-          this.validationMessages = error.validationMessages
-            .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING');
-          this.showSubmissionMessages = true;
-        } else {
-          this.submissionMessage = 'There was a problem with your submission';
-          this.addServerError(error.serverError);
-          setTimeout(() => {
-            this.showSubmissionMessages = false;
-            this.submissionMessage = null;
-          }, 8000);
-        }
-      }
-      );
+      // copy the Result Information on the last screening or where _show == true
+      // call copy, THIS LINE MUST be before deleteing the _show field in the next code
 
-      //); // save one Assay record first
-      this.subscriptions.push(saveFirstAssaySubscribe);
-    } // else
+      // if REGISTERING New Screeing record
+      if (!this.id) {
 
-  }
+        // if saving FIRST record, copy the form Assay Result Information
+        if (this.numberOfRecordToSaveStartIndex == 0) {
 
-  saveRemainingAssays(skipFirstRecord?: boolean) {
+          if (assay.invitroAssayScreenings.length > 0) {
 
-    let assayApiUrlList: any = [];
+            assay.invitroAssayScreenings.forEach(screening => {
+              if (screening) {
+                if (screening._show == true) {
+                  // Set result information from the FORM for the first Assay Record
+                  screening.invitroAssayResultInformation = this.assayResultInfo;
+                }
+              }
+            });
 
-    const params = new HttpParams();
-    const options = {
-      params: params,
-      type: 'JSON',
-      headers: {
-        'Content-type': 'application/json'
-      }
-    };
+            // delete _show field before saving
+            this.scrubShowFieldsSingle(assay);
 
-    const url = this.invitroPharmacologyService.apiBaseUrlWithInvitroPharmEntityUrl;
+          } // invitroAssayScreenings.length > 0
 
-    // Check if the JSON same as original.  If same json for invitroAssayResultInformation are not same
-    let isResultInfoSame = this.isJsonSame(this.originalAssayResultInfoFromDb, this.assayResultInfo);
-    if (isResultInfoSame == false) {
-      this.copyResultInfoForSaving(true);
-    }
+        } else {
+          // NOT FIRST Record in the list when REGISTERING NEW SCREENING
+          if (assay.invitroAssayScreenings.length > 0) {
+
+            assay.invitroAssayScreenings.forEach(screening => {
+              if (screening) {
+                if (screening._show == true) {
+                  // Set result information from the saved record.
+                  if (this.originalAssayResultInfoFromDb) {
+                    screening.invitroAssayResultInformation = this.originalAssayResultInfoFromDb;
+                  }
+                }
+              }
+            });
 
-    // Copy the screening to new variable
-    let remainingAssays = _.cloneDeep(this.existingAssaysByAssaySetList);
+            // delete _show field before saving
+            this.scrubShowFieldsSingle(assay);
 
-    // Remove extra fields before saving
-    this.scrubExtraFields(remainingAssays);
+          } // invitroAssayScreenings.length > 0
+        } // else
+      } // if (!this.id)  // Registering New Screeing
+      else {
+        // UPDATING the existing Screening Records
 
-    remainingAssays.forEach((assay, indexAssay) => {
-      if (assay) {
+        // Check if the JSON same as original.  If same json for invitroAssayResultInformation do not save
+        let isResultInfoSame = this.isJsonSame(this.originalAssayResultInfoFromDb, this.assayResultInfo);
 
-        let isAssaySame = false;
-        this.originalAssayFromDb.forEach(originalAssay => {
-          if (originalAssay) {
-            if (originalAssay.id) {
-              if (originalAssay.id == assay.id) {
-                isAssaySame = this.isJsonSame(originalAssay, assay);
-              }
-            }
-          }
-        });
+        // Not Same, or record has been changed in the form
+        if (isResultInfoSame == false) {
 
-        // Only save to Database if the Assay record has changed otherwise will get server error "No Change Detected"
-        if (isAssaySame == false) {
-          // if registering new record, and invitroAssayResultInformation is null, assign the existing invitroAssayResultInformation
-          if (assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation == null) {
-            assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation = this.firstAssaySavedResultInfo;
-          } else {
-            // If No id found for invitroAssayResultInformation, copy the saved record
-            if (!assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation.id) {
-              assay.invitroAssayScreenings[assay.invitroAssayScreenings.length - 1].invitroAssayResultInformation = this.firstAssaySavedResultInfo;
+          assay.invitroAssayScreenings.forEach((screening, indexScreening) => {
+            // copy this Result Reference, Lab, Sponsor, Test Agent Info to assay object
+            if (screening._show == true) {
+              screening.invitroAssayResultInformation = this.assayResultInfo;
             }
-          }
+          });
+        }
 
-          // Create API Url List to save into the database
-          if (skipFirstRecord == true && indexAssay == 0) {
-            // Do not save the first assay record
-          } else {
+        // delete _show field before saving
+        this.scrubShowFieldsSingle(assay);
 
-            // make 5 Rest Api calls one at a time
-            const apiUrl = this.http.put<InvitroAssayInformation>(url, assay, options)
-            .pipe(
-              //mergeMap((apiCall) => res, 5))
-            shareReplay(1), catchError(error => { throw error; }));
+        if (assay) {
+          // Check if existing Assay has been updated.
+          this.originalAssaysFromDb.forEach(originalAssay => {
+            if (originalAssay) {
+              if (originalAssay.id) {
+                if (originalAssay.id == assay.id) {
+                  isAssaySame = this.isJsonSame(originalAssay, assay);
+                }
+              }
+            }
+          });
+        } // if assay
 
-            assayApiUrlList.push(apiUrl);
+      } // else if updating
 
-          }
-        }
+      // Create REST API Url for the assay
+      let apiUrl = this.createAssayApiUrl(assay);
+      assayToSaveApiUrlList.push(apiUrl);
 
-      } // if assay
-    });  // FOR LOOP: Assay to Save
+      this.numberOfRecordToSaveEndIndex++;
 
+      this.numberOfRecordToSaveStartIndex++;
 
-    let savedCount = 0;
+    }  // while loop
 
-    // Save Assays into the database
-    forkJoin(assayApiUrlList).subscribe(
-      results => {
-        let resultList: any = [];
-        resultList = results;
-        // return list of array of the result
-        resultList.forEach(result => {
-          if (result.id) {
-            savedCount = savedCount + 1;
-          }
-        });
+    // Save the record into the database if Assay/screening record has changed
+    this.saveRecordForkJoin(assayToSaveApiUrlList, isAssaySame);
 
-        // if all the records are saved, refresh the page
-        if (savedCount == assayApiUrlList.length) {
-
-          this.reloadPageAfterSave();
+  }
 
-          /*
-          this.validationMessages = null;
-          this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
-          this.showSubmissionMessages = true;
-          this.validationResult = false;
+  createAssayApiUrl(assay: any): any {
+    let apiUrl = null;
 
-          let forwardId = null;
-          if (this.firstAssaySavedResultInfo) {
-            if (this.firstAssaySavedResultInfo.id) {
-              forwardId = this.firstAssaySavedResultInfo.id;
-            }
-          } else if (this.id) {
-            forwardId = this.id;
-          }
+    const params = new HttpParams();
+    const options = {
+      params: params,
+      type: 'JSON',
+      headers: {
+        'Content-type': 'application/json'
+      }
+    };
 
-          setTimeout(() => {
-            if (forwardId) {
-              this.invitroPharmacologyService.bypassUpdateCheck();
-              //const id = response.id;
-              this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-              this.router.onSameUrlNavigation = 'reload';
-              this.router.navigate(['/invitro-pharm/', forwardId, 'edit']);
-            } else {
-              alert("Something went wrong while retrieving the In-vitro Pharmacology Screening data");
-            }
-          }, 4000);  */
-        }
-      },
-    ) // forkJoin
+    const url = this.invitroPharmacologyService.apiBaseUrlWithInvitroPharmEntityUrl;
 
+    // Rest Api calls
+    apiUrl = this.http.put<InvitroAssayInformation>(url, assay, options)
+      .pipe(
+        shareReplay(1), catchError(error => { throw error; }));
 
-    if (assayApiUrlList.length == 0) {
-      this.reloadPageAfterSave();
-    }
+    return apiUrl;
+  }
 
-    /*
-    // Assign the assay to service assay
-    this.invitroPharmacologyService.assay = assay;
+  saveRecordForkJoin(assayApiUrlList: any, isSameAssay: boolean) {
 
-    // Increment counter by 1
-    this.assaySavedCounter = this.assaySavedCounter + 1;
+    let copyAssayApiUrlList = _.cloneDeep(assayApiUrlList);
 
-    const saveSubscribe = this.invitroPharmacologyService.saveAssay().subscribe(response => {
+    // Save Assays into the database
+    let savedCount = 0;
 
-      if (response) {
+    // Only save to Database if the Assay record has changed otherwise will get server error "No Change Detected"
+    if (isSameAssay == false) {
+      forkJoin(copyAssayApiUrlList).subscribe(
+        results => {
+          let resultList: any = [];
+          resultList = results;
 
-        // Get the last screening from the returned/saved Assay
-        //   let screening = response.invitroAssayScreenings[response.invitroAssayScreenings.length - 1];
+          // return list of array of the result
+          resultList.forEach(result => {
+            if (result.id) {
+              savedCount = savedCount + 1;
+              this.totalRecordSavedInDatabase = this.totalRecordSavedInDatabase + 1;
 
-        // Get the saved result information from the database
-        // set invitroAssayResultInformation to local variable
-        //   if (screening.invitroAssayResultInformation) {
-        //     this.firstAssaySavedResultInfo = screening.invitroAssayResultInformation;
+              if (result.invitroAssayScreenings.length > 0) {
 
+                // Get the last screening from the returned/saved Assay
+                let screening = result.invitroAssayScreenings[result.invitroAssayScreenings.length - 1];
 
-        // Store in the list if this record was stored into the database successfully or not
-        this.isSavedSuccessfullyMessage.push(this.assaySavedCounter + '|' + response.id + '|' + 'true');
+                // Get the saved result information from the database
+                // set invitroAssayResultInformation to local variable
+                if (screening.invitroAssayResultInformation) {
 
-        this.loadingService.setLoading(false);
-        this.isLoading = false;
+                  // copy the Database/Original invitroAssayResultInformation in variable
+                  this.originalAssayResultInfoFromDb = _.cloneDeep(screening.invitroAssayResultInformation);
+                }
+              } // invitroAssayScreenings.length > 0
 
-        this.validationMessages = null;
-        this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
-        this.showSubmissionMessages = true;
-        this.validationResult = false;
+            } // if result.id
+          });
 
-        setTimeout(() => {
-          // // this.showSubmissionMessages = false;
-          //  this.submissionMessage = '';
-          if (response.id) {
-            this.invitroPharmacologyService.bypassUpdateCheck();
-            //const id = response.id;
-            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-            this.router.onSameUrlNavigation = 'reload';
-            this.router.navigate(['/invitro-pharm/', this.id, 'edit']);
+          // if all the records are saved
+          if (savedCount == copyAssayApiUrlList.length) {
+            this.assayToSaveCallBack();
           }
-        }, 4000);
-      } // if response remaining assays
 
-    });
-    this.subscriptions.push(saveSubscribe);
-     */
+        }  // results
+      ); // forkJoin
+    } else {
+      // Do not save record into the database if Assay/Screening record has not been changed.
+      // increment count
+      this.totalRecordSavedInDatabase++;
+      this.assayToSaveCallBack();
+    }
 
   }
 
+  assayToSaveCallBack() {
+    if (this.totalRecordSavedInDatabase != this.assaysToSave.length) {
+      // Save More Records
+      this.generateAssayToSave();
+    } else {
+      // close the popup dialog
+      setTimeout(() => {
+        this.close();
+      }, 4000);
+
+      this.reloadPageAfterSave();
+    }
+  }
+
   reloadPageAfterSave() {
     this.validationMessages = null;
     this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
@@ -1049,12 +971,13 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     this.validationResult = false;
 
     let forwardId = null;
-    if (this.firstAssaySavedResultInfo) {
-      if (this.firstAssaySavedResultInfo.id) {
-        forwardId = this.firstAssaySavedResultInfo.id;
-      }
-    } else if (this.id) {
+
+    if (this.id) {
       forwardId = this.id;
+    } else if (this.originalAssayResultInfoFromDb) {
+      if (this.originalAssayResultInfoFromDb.id) {
+        forwardId = this.originalAssayResultInfoFromDb.id;
+      }
     }
 
     setTimeout(() => {
@@ -1072,144 +995,10 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       this.loadingService.setLoading(false);
 
     }, 4000);
-  }
-
-  /*
-  saveBulkAssays(skipFirstRecord?: boolean) {
-    let assayApiUrlList: any = [];
-
-    const params = new HttpParams();
-    const options = {
-      params: params,
-      type: 'JSON',
-      headers: {
-        'Content-type': 'application/json'
-      }
-    };
-
-    const url = this.invitroPharmacologyService.apiBaseUrlWithInvitroPharmEntityUrl;
-
-    // Create API Url List to save into the database
-    this.assaysToSave.forEach((assay, indexAssay) => {
-      if (skipFirstRecord == true && indexAssay == 0) {
-        // Do not save the first assay record
-      } else {
-        const apiUrl = this.http.put<InvitroAssayInformation>(url, assay, options).pipe(
-          catchError(error => { throw error; }));
-
-        assayApiUrlList.push(apiUrl);
-      }
-    });
-
-    let savedCount = 0;
-
-    // Save Assays into the database
-    forkJoin(assayApiUrlList).subscribe(
-      results => {
-        let resultList: any = [];
-        resultList = results;
-        // return list of array of the result
-        resultList.forEach(result => {
-          if (result.id) {
-            savedCount = savedCount + 1;
-          }
-        });
 
-        // if all the records are saved, refresh the page
-        if (savedCount == assayApiUrlList.length) {
-          this.validationMessages = null;
-          this.submissionMessage = 'In-vitro Pharmacology Assay data was saved successfully!';
-          this.showSubmissionMessages = true;
-          this.validationResult = false;
-
-          setTimeout(() => {
-            this.showSubmissionMessages = false;
-            this.submissionMessage = '';
-            this.invitroPharmacologyService.bypassUpdateCheck();
-            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-            this.router.onSameUrlNavigation = 'reload';
-            this.router.navigateByUrl('/invitro-pharm/assaySetBuilder?assaySet=' + this.selectedAssaySet);
-          }, 4000);
-        }
-
-        this.isLoading = false;
-        this.loadingService.setLoading(false);
-      },
-    )
   }
-  */
-
-  submit(): void {
-    this.isLoading = true;
-    this.loadingService.setLoading(true);
-
-    // Copy this when registering
-    // call copy, THIS LINE MUST be before this.scrubExtraFields() call
-    // if (!this.id) {
-    this.copyResultInfoForSaving();
-    // }
 
-    // Remove extra fields before saving
-    this.scrubExtraFields(this.existingAssaysByAssaySetList);
-
-    /*
-    this.invitroPharmacologyService.saveBulkAssays(this.existingAssaysByAssaySetList).subscribe(response => {
-
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.validationMessages = null;
-      this.submissionMessage = 'In-vitro Pharmacology Assay Screening data was saved successfully!';
-      this.showSubmissionMessages = true;
-      this.validationResult = false;
-      setTimeout(() => {
-        this.showSubmissionMessages = false;
-        this.submissionMessage = '';
-
-        let id = null;
-        if (response) {
-          if (response[0].invitroAssayScreenings.length > 0) {
-            let indexScreeing = response[0].invitroAssayScreenings.length - 1;
-
-            if (response[0].invitroAssayScreenings[indexScreeing].invitroAssayResultInformation) {
-
-              if (response[0].invitroAssayScreenings[indexScreeing].invitroAssayResultInformation.id) {
-
-                id = response[0].invitroAssayScreenings[indexScreeing].invitroAssayResultInformation.id;
-                if (id) {
-                  // Saved Successfully, reload this update page
-                  this.invitroPharmacologyService.bypassUpdateCheck();
-                  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-                  this.router.onSameUrlNavigation = 'reload';
-                  this.router.navigate(['/invitro-pharm/', id, 'edit']);
-                }
-              }
-            }
-          }
-        } // response
-      }, 4000);
-    }  */
-    /*
-    , (error: SubstanceFormResults) => {
-      this.showSubmissionMessages = true;
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.submissionMessage = null;
-      if (error.validationMessages && error.validationMessages.length) {
-        this.validationResult = error.isSuccessfull;
-        this.validationMessages = error.validationMessages
-          .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING');
-        this.showSubmissionMessages = true;
-      } else {
-        this.submissionMessage = 'There was a problem with your submission';
-        this.addServerError(error.serverError);
-        setTimeout(() => {
-          this.showSubmissionMessages = false;
-          this.submissionMessage = null;
-        }, 8000);
-      }
-    }*/
-    // );
-  }
+  /* ******************* SAVING SCREEING FUNCTIONS END *************************************************/
 
   showJSON(): void {
     const date = new Date();
@@ -1220,9 +1009,10 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       this.copyResultInfoForSaving();
     }
 
-    let json = this.existingAssaysByAssaySetList;
+    let copyJson = _.cloneDeep(this.existingAssaysByAssaySetList);
+    let cleanJson = this.scrubShowFieldsMultiple(copyJson);
 
-    let data = {jsonData: json, jsonFilename: jsonFilename};
+    let data = { jsonData: cleanJson, jsonFilename: jsonFilename };
 
     const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
       width: '90%',
@@ -1318,11 +1108,39 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     });
   }
 
-  addNewScreening(event: Event) {
-    this.invitroPharmacologyService.addNewScreening();
+  createFirstAssayToSave() {
+    // Using this assay list in the form
+    if (this.existingAssaysByAssaySetList.length > 0) {
+
+      // Get the first Assay from the list
+      this.firstAssayToSave = this.existingAssaysByAssaySetList[0];
+
+      // copy the Result Information on the last screening or where _show == true
+      // call copy, THIS LINE MUST be before deleteing the _show field in the next code
+      this.firstAssayToSave.invitroAssayScreenings.forEach(screening => {
+        if (screening) {
+          if (screening._show == true) {
+            screening.invitroAssayResultInformation = this.assayResultInfo;
+          }
+        }
+      });
+
+      // delete _show field before saving
+      this.firstAssayToSave.invitroAssayScreenings.forEach(screening => {
+        if (screening) {
+          if (screening._show) {
+            delete screening._show;
+          }
+        }
+      });
+
+      // Assign assay to Servive assay
+      this.invitroPharmacologyService.assay = this.firstAssayToSave;
+    }
   }
 
   createNewSummary() {
+
     // Loop through each Assay
     this.existingAssaysByAssaySetList.forEach(assay => {
 
@@ -1493,8 +1311,6 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   selectionChangeExistingReference(event) {
     if (event) {
       let reference = (event.split('||'));
-      //  this.assay.invitroAssayScreenings[0].invitroReference.referenceSourceType = reference[0];
-      //  this.assay.invitroAssayScreenings[0].invitroReference.referenceSource = reference[1];
 
       this.referenceMessage = "";
     }
@@ -1602,6 +1418,23 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       if (assay.invitroAssayScreenings[indexScreening].invitroAssayResult.testDate) {
         assay.invitroAssayScreenings[indexScreening].invitroAssayResult.testDate = '';
       }
+
+      if (assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinAdded) {
+        assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinAdded = false;
+      }
+
+      if (assay.invitroAssayScreenings[indexScreening].invitroAssayResult.protein) {
+        assay.invitroAssayScreenings[indexScreening].invitroAssayResult.protein = '';
+      }
+
+      if (assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentration) {
+        assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentration = null;
+      }
+
+      if (assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentrationUnits) {
+        assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentrationUnits = '';
+      }
+
     });
   }
 
@@ -1639,8 +1472,8 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
           assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinAdded = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProteinAdded;
         }
 
-        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProtein) {
-          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProtein = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.plasmaProtein;
+        if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.protein) {
+          assay.invitroAssayScreenings[indexScreening].invitroAssayResult.protein = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings[indexFirstAssayScreening].invitroAssayResult.protein;
         }
 
         if (!assay.invitroAssayScreenings[indexScreening].invitroAssayResult.plasmaProteinConcentration) {
@@ -1655,19 +1488,44 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     // }
   }
 
-  copyAssaySummaryRow(indexAssay: number) {
-    let indexAssayScreening = this.existingAssaysByAssaySetList[indexAssay].invitroAssayScreenings.length - 1;
+  copyAssayResultRow(indexCopyFromAssay: number) {
+    //let indexCopyAssayScreening = this.existingAssaysByAssaySetList[indexCopyFromAssay].invitroAssayScreenings.length - 1;
+
+    let copyAssay = this.existingAssaysByAssaySetList[indexCopyFromAssay];
+
+    let newScreening = null;
+    this.existingAssaysByAssaySetList[indexCopyFromAssay].invitroAssayScreenings.forEach(copyFromScreening => {
+      if (copyFromScreening) {
+        if (copyFromScreening._show) {
+          let screen = _.cloneDeep(copyFromScreening);
+
+          // remove the ids, create date, etc.
+          newScreening = this.scrub(screen);
+          newScreening._show = true;
+        }
+      }
+    });
 
-    // Remove extra fields before saving
-    // this.scrubExtraFields();
+    /*
+    const newInvitroAssayScreening: InvitroAssayScreening =
+    {
+      invitroAssayResultInformation: { invitroReferences: [], invitroLaboratory: {}, invitroSponsor: {}, invitroSponsorReport: { invitroSponsorSubmitters: [] }, invitroTestAgent: {} },
+      invitroAssayResult: {},
+      invitroControls: [{}],
+      invitroSummary: {}
+    };
+    */
 
     // Copy the assay to new variable
-    let copyAssay = _.cloneDeep(this.existingAssaysByAssaySetList[indexAssay]);
-    this.existingAssaysByAssaySetList.splice(indexAssay + 1, 0, copyAssay);
+   // let copyAssay = _.cloneDeep(this.existingAssaysByAssaySetList[indexCopyFromAssay]);
+
+    copyAssay.invitroAssayScreenings.push(newScreening);
+
+   // this.existingAssaysByAssaySetList.splice(indexCopyFromAssay + 1, 0, copyAssay);
   }
 
-  setPlasmaProteinCheckBox(checkBoxValue: any, screeningIndex: number): void {
-    this.assay.invitroAssayScreenings[screeningIndex].invitroAssayResult.plasmaProteinAdded = checkBoxValue;
+  setPlasmaProteinCheckBox($event, screeningIndex: number): void {
+    this.assay.invitroAssayScreenings[screeningIndex].invitroAssayResult.plasmaProteinAdded = $event.checked;
   }
 
   confirmDeleteSubmitter(indexSubmitter: number) {
@@ -1721,10 +1579,6 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
   isJsonSame(sourceJson: any, destinationJson: any) {
     let jsonSame = false;
 
-    console.log("SOURCE SOURCE: " + JSON.stringify(sourceJson));
-    console.log("DESTIONATION " + JSON.stringify(destinationJson));
-
-
     if ((sourceJson) && (destinationJson)) {
       if (JSON.stringify(sourceJson) == JSON.stringify(destinationJson)) {
         jsonSame = true;
@@ -1733,8 +1587,18 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
     return jsonSame;
   }
 
-  scrubExtraFields(assayToScrub) {
-    assayToScrub.forEach(assay => {
+  scrubShowFieldsSingle(assay) {
+    assay.invitroAssayScreenings.forEach(screening => {
+      if (screening) {
+        if (screening._show) {
+          delete screening._show;
+        }
+      }
+    });
+  }
+
+  scrubShowFieldsMultiple(assayArray): any {
+    assayArray.forEach(assay => {
       if (assay) {
         assay.invitroAssayScreenings.forEach(screening => {
           if (screening) {
@@ -1745,6 +1609,8 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
         });
       }
     });
+    return assayArray;
+
   }
 
   scrub(oldraw: any): any {
@@ -1761,7 +1627,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       delete showHolders[i]._show;
     }
 
-    const createHolders = defiant.json.search(old, '//*[creationDate]');
+    const createHolders = defiant.json.search(old, '//*[createdDate]');
     for (let i = 0; i < createHolders.length; i++) {
       delete createHolders[i].creationDate;
     }
@@ -1771,7 +1637,7 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       delete createdByHolders[i].createdBy;
     }
 
-    const modifyHolders = defiant.json.search(old, '//*[lastModifiedDate]');
+    const modifyHolders = defiant.json.search(old, '//*[modifiedDate]');
     for (let i = 0; i < modifyHolders.length; i++) {
       delete modifyHolders[i].lastModifiedDate;
     }
@@ -1786,10 +1652,10 @@ export class InvitroPharmacologyFormComponent implements OnInit, OnDestroy {
       delete intVersionHolders[i].internalVersion;
     }
 
-    delete old['creationDate'];
+    delete old['createdDate'];
     delete old['createdBy'];
     delete old['modifiedBy'];
-    delete old['lastModifiedDate'];
+    delete old['modifiedDate'];
     delete old['internalVersion'];
     delete old['$$update'];
     delete old['_self'];
diff --git a/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts b/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
index 0c9d3900b..88728cee8 100644
--- a/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
+++ b/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
@@ -219,8 +219,8 @@ export interface InvitroAssayResult {
   resultValueUnits?: string;
   ligandSubstrateConcentration?: number;
   ligandSubstrateConcentrationUnits?: string;
-  plasmaProteinAdded?: string;
-  plasmaProtein?: string;
+  plasmaProteinAdded?: boolean;
+  protein?: string;
   plasmaProteinConcentration?: number;
   plasmaProteinConcentrationUnits?: string;
   batchNumber?: string;
diff --git a/src/app/fda/invitro-pharmacology/service/invitro-pharmacology.service.ts b/src/app/fda/invitro-pharmacology/service/invitro-pharmacology.service.ts
index 41ffc16ed..c9f8c5047 100644
--- a/src/app/fda/invitro-pharmacology/service/invitro-pharmacology.service.ts
+++ b/src/app/fda/invitro-pharmacology/service/invitro-pharmacology.service.ts
@@ -493,7 +493,7 @@ export class InvitroPharmacologyService extends BaseHttpService {
   addNewScreening(): void {
     const newInvitroAssayScreening: InvitroAssayScreening =
     {
-      invitroAssayResultInformation: { invitroReferences: [], invitroLaboratory: {}, invitroSponsor: {}, invitroSponsorReport: {invitroSponsorSubmitters: []}, invitroTestAgent: {}},
+      invitroAssayResultInformation: { invitroReferences: [], invitroLaboratory: {}, invitroSponsor: {}, invitroSponsorReport: { invitroSponsorSubmitters: [] }, invitroTestAgent: {} },
       invitroAssayResult: {},
       invitroControls: [{}],
       invitroSummary: {}
@@ -555,4 +555,5 @@ export class InvitroPharmacologyService extends BaseHttpService {
 
     return referenceSourceTypeAndId;
   }
+
 }
\ No newline at end of file
diff --git a/src/app/fda/product/product-details/product-details-base.component.ts b/src/app/fda/product/product-details/product-details-base.component.ts
index ccdb66ce5..daacfd47c 100644
--- a/src/app/fda/product/product-details/product-details-base.component.ts
+++ b/src/app/fda/product/product-details/product-details-base.component.ts
@@ -353,7 +353,7 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
 
     const dialogRef = this.dialog.open(StructureImageModalComponent, {
       height: '90%',
-      width: '680px',
+      width: '650px',
       panelClass: 'structure-image-panel',
       data: data
     });
@@ -361,10 +361,10 @@ export class ProductDetailsBaseComponent implements OnInit, AfterViewInit, OnDes
     this.overlayContainer.style.zIndex = '1002';
 
     const subscription = dialogRef.afterClosed().subscribe(() => {
-      this.overlayContainer.style.zIndex = '1002';
+      this.overlayContainer.style.zIndex = null;
       subscription.unsubscribe();
     }, () => {
-      this.overlayContainer.style.zIndex = '1002';
+      this.overlayContainer.style.zIndex = null;
       subscription.unsubscribe();
     });
   }
diff --git a/src/app/fda/product/product-details/product-details/product-details.component.html b/src/app/fda/product/product-details/product-details/product-details.component.html
index e02c87f49..30b6d1003 100644
--- a/src/app/fda/product/product-details/product-details/product-details.component.html
+++ b/src/app/fda/product/product-details/product-details/product-details.component.html
@@ -26,7 +26,7 @@
         <!-- Download Json -->
         <span *ngIf="product && product.id">
           <a button mat-icon-button color="primary" [href]="downloadJsonHref" (click)="saveJSON()"
-            download="{{jsonFileName}}.json" matTooltip='Download JSON'>
+            download="{{jsonFilename}}.json" matTooltip='Download JSON'>
             <mat-icon svgIcon="get_app"></mat-icon>
           </a>&nbsp;
         </span>
@@ -329,7 +329,7 @@
                           <!-- Original Denominator -->
                           <div class="marginleft5px">
                             <span *ngIf="prodIngred.originalDenominatorNumber">
-                              <span class="font11px">Denominator:
+                              <span class="font11px">&nbsp;Denominator:
                                 <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
                                   prodIngred.originalDenominatorUnit
                                   }}
@@ -408,7 +408,7 @@
                             </button>
                           </div>
 
-                        </div>
+                        </div> <!-- class=divflex -->
 
                         <!-- Show Average -->
                         <div *ngIf="prodIngred.average">
@@ -433,7 +433,7 @@
                           <!-- Original Denominator -->
                           <div class="marginleft5px">
                             <span *ngIf="prodIngred.originalDenominatorNumber">
-                              <span class="font11px">Denominator:
+                              <span class="font11px">&nbsp;Denominator:
                                 <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
                                   prodIngred.originalDenominatorUnit
                                   }}
diff --git a/src/app/fda/product/product-text-search/product-text-search.component.ts b/src/app/fda/product/product-text-search/product-text-search.component.ts
index db14b7189..49fd502d2 100644
--- a/src/app/fda/product/product-text-search/product-text-search.component.ts
+++ b/src/app/fda/product/product-text-search/product-text-search.component.ts
@@ -58,43 +58,56 @@ export class ProductTextSearchComponent implements OnInit, AfterViewInit, OnDest
       })
     ).subscribe((response: SubstanceSuggestionsGroup) => {
       this.substanceSuggestionsGroup = response;
-      let showTypes = ['Active_Moiety', 'Dosage_Form_Name', 'Marketing_Category_Name', 'Ingredient_Approval_ID', 'Product_Name', 'Ingredient_Type', 'Company_Country', 'Route_of_Admin', 'Labeler_Name', 'Application_Type_Number', 'Ingredient_Name', 'Nonproprietary_Name', 'Product_Type'];
-      /* if(this.configService && this.configService.configData && this.configService.configData.typeaheadFields) {
-         showTypes = this.configService.configData.typeaheadFields;
-      } */
+      let showTypes = ['Active_Moiety', 'Product_Name', 'Product_Type', 'Dosage_Form_Name', 'Marketing_Category_Name',
+      'Marketing_Category_Code', 'Ingredient_Name', 'Ingredient_Name_(Preferred)', 'Ingredient_Type',
+      'Route_of_Administration', 'Labeler_Name', 'Labeler_Code', 'Labeler_State', 'Company_Role', 'Company_Country',
+      'Manufacturer_Name', 'Manufacturer_Role', 'Application_Type', 'Application_Number', 'Application_Type_Number'];
+
       this.suggestionsFields = Object.keys(this.substanceSuggestionsGroup).filter(function (item) {
         return showTypes.indexOf(item) > -1;
       });
-      // this.suggestionsFields.sort(function (x, y) { return x === 'Display_Name' ? -1 : y === 'Display_Name' ? 1 : 0; });
+    
       this.suggestionsFields.forEach((value, index) => {
         if (value === 'Active_Moiety') {
           this.suggestionsFields[index] = { value: 'Active_Moiety', display: 'Active Moiety' };
+        } else if (value === 'Product_Name') {
+          this.suggestionsFields[index] = { value: 'Product_Name', display: 'Product Name' };
+        } else if (value === 'Product_Type') {
+          this.suggestionsFields[index] = { value: 'Product_Type', display: 'Product Type' };
         } else if (value === 'Dosage_Form_Name') {
           this.suggestionsFields[index] = { value: 'Dosage_Form_Name', display: 'Dosage Form Name' };
         } else if (value === 'Marketing_Category_Name') {
           this.suggestionsFields[index] = { value: 'Marketing_Category_Name', display: 'Marketing Category Name' };
+        } else if (value === ' Marketing_Category_Code') {
+          this.suggestionsFields[index] = { value: 'Marketing_Category_Code', display: 'Marketing Category Code' };
         } else if (value === 'Ingredient_Name') {
           this.suggestionsFields[index] = { value: 'Ingredient_Name', display: 'Ingredient Name' };
-        } else if (value === 'Ingredient_Approval_ID') {
-          this.suggestionsFields[index] = { value: 'Ingredient_Approval_ID', display: 'Ingredient Approval ID' };
-        } else if (value === 'Product_Name') {
-          this.suggestionsFields[index] = { value: 'Product_Name', display: 'Product Name' };
+        } else if (value === 'Ingredient_Name_(Preferred)') {
+          this.suggestionsFields[index] = { value: 'Ingredient_Name_(Preferred)', display: 'Ingredient Name (Preferred)' };
         } else if (value === 'Ingredient_Type') {
           this.suggestionsFields[index] = { value: 'Ingredient_Type', display: 'Ingredient Type' };
-        } else if (value === 'Company_Country') {
-          this.suggestionsFields[index] = { value: 'Company_Country', display: 'Company Country' };
-        } else if (value === 'Route_of_Admin') {
-          this.suggestionsFields[index] = { value: 'Route_of_Admin', display: 'Route of Administration' };
+        } else if (value === 'Route_of_Administration') {
+          this.suggestionsFields[index] = { value: 'Route_of_Administration', display: 'Route of Administration' };
         } else if (value === 'Labeler_Name') {
           this.suggestionsFields[index] = { value: 'Labeler_Name', display: 'Labeler Name' };
+        } else if (value === 'Labeler_Code') {
+          this.suggestionsFields[index] = { value: 'Labeler_Code', display: 'Labeler Code' };
+        } else if (value === 'Labeler_State') {
+          this.suggestionsFields[index] = { value: 'Labeler_State', display: 'Labeler State' };
+        } else if (value === 'Company_Role') {
+          this.suggestionsFields[index] = { value: 'Company_Role', display: 'Company Role' };
+        } else if (value === 'Company_Country') {
+          this.suggestionsFields[index] = { value: 'Company_Country', display: 'Company Country' };
+        } else if (value === 'Manufacturer_Name') {
+          this.suggestionsFields[index] = { value: 'Manufacturer_Name', display: 'Manufacturer Name' };
+        } else if (value === 'Manufacturer_Role') {
+          this.suggestionsFields[index] = { value: 'Manufacturer_Role', display: 'Manufacturer Role' };
+        } else if (value === 'Application_Type') {
+          this.suggestionsFields[index] = { value: 'Application_Type', display: 'Application Type' };
+        } else if (value === 'Application_Number') {
+          this.suggestionsFields[index] = { value: 'Application_Number', display: 'Application Number' };
         } else if (value === 'Application_Type_Number') {
           this.suggestionsFields[index] = { value: 'Application_Type_Number', display: 'Application Type Number' };
-        } else if (value === 'Ingredient_Name') {
-          this.suggestionsFields[index] = { value: 'Ingredient_Name', display: 'Ingredient Name' };
-        } else if (value === 'Nonproprietary_Name') {
-          this.suggestionsFields[index] = { value: 'Nonproprietary_Name', display: 'Nonproprietary Name' };
-        } else if (value === 'Product_Type') {
-          this.suggestionsFields[index] = { value: 'Product_Type', display: 'Product Type' };
         } else {
           this.suggestionsFields[index] = { value: value, display: value };
         }
diff --git a/src/app/fda/product/products-browse/products-browse.component.html b/src/app/fda/product/products-browse/products-browse.component.html
index 325eee944..7e40da575 100644
--- a/src/app/fda/product/products-browse/products-browse.component.html
+++ b/src/app/fda/product/products-browse/products-browse.component.html
@@ -130,15 +130,6 @@
         </mat-form-field>
 
         <!-- Export Product Button -->
-        <!---
-        <div class="export" *ngIf="isAdmin">
-          <button matTooltip="Export Search Results" mat-button (click)="export()"
-            class="mat-button export-button mat-raised-button">
-            <mat-icon svgIcon="get_app"></mat-icon> Export
-          </button>
-        </div>
-        -->
-
         <div class="export" *ngIf="isAdmin">
           <mat-menu #exportMenu="matMenu">
             <a mat-menu-item *ngFor="let option of exportOptions" (click)="export(option.extension)">
@@ -198,26 +189,39 @@
             <table mat-table [dataSource]="products" class="font12px" matSort (matSortChange)="sortData($event)"
               matSortDisableClear>
 
+              <ng-container matColumnDef="viewDetails">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Code</th>
+                <td class="width100px" mat-cell *matCellDef="let product">
+
+                  <!-- View GSRS record button -->
+                  <a [routerLink]="['/product', product.id]" target="_blank" *ngIf="isAdmin"
+                    matTooltip='View GSRS Product Record'>
+                    View
+                  </a>
+
+                  <!-- Edit GSRS record button -->
+                  &nbsp;
+                  <a [routerLink]="['/product', product.id, 'edit']" target="_blank" *ngIf="isAdmin"
+                    matTooltip='Edit GSRS Product Record'>
+                    <mat-icon svgIcon="edit"></mat-icon>
+                  </a>
+
+                </td>
+              </ng-container>
+
               <ng-container matColumnDef="productCode">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Code</th>
                 <td class="width120px" mat-cell *matCellDef="let product">
 
                   <span *ngFor="let prodProv of product.productProvenances; let i = index">
 
-                    <span *ngFor="let prodCode of prodProv.productCodes; let i = index">
-
-                      <a class="substance-name" [routerLink]="['/product', product.id]" target="_blank">
-                        <span *ngIf="prodCode.productCode; else noProdCode">
-                          {{prodCode.productCode}}
-                        </span>
-                        <ng-template #noProdCode>(NO ID)</ng-template>
-                      </a>
+                    <span *ngFor="let prodCode of prodProv.productCodes; let indexCode = index">
 
-                      <!-- Edit GSRS record button -->
-                      <a [routerLink]="['/product', product.id, 'edit']" target="_blank" *ngIf="isAdmin"
-                        matTooltip='Edit GSRS Product Record'>
-                        <mat-icon svgIcon="edit"></mat-icon>
-                      </a>
+                      <span *ngIf="prodCode.productCode; else noProdCode">
+                        <span *ngIf="indexCode > 0"><br><br></span>
+                        {{prodCode.productCode}}
+                      </span>
+                      <ng-template #noProdCode>(NO ID)</ng-template>
 
                     </span> <!-- loop productCode -->
                   </span> <!-- loop productProvenance-->
@@ -228,11 +232,15 @@
               <ng-container matColumnDef="productName">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
                 <td mat-cell *matCellDef="let product">
-                  <div *ngFor="let prodProv of product.productProvenances; let i = index">
-                    <div *ngFor="let prodName of prodProv.productNames; let i = index">
-                      {{prodName.productName}}
+                  <ol class="olstyle">
+                    <div *ngFor="let prodProv of product.productProvenances; let i = index">
+                      <div *ngFor="let prodName of prodProv.productNames; let i = index">
+                        <li>
+                          {{prodName.productName}}
+                        </li>
+                      </div>
                     </div>
-                  </div>
+                  </ol>
                 </td>
               </ng-container>
 
@@ -294,11 +302,6 @@
               <ng-container matColumnDef="labelerName">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Labeler Name </th>
                 <td mat-cell *matCellDef="let product"> {{product.labelerName}}
-                  <!--
-                  <div *ngFor="let prodComp of product.productCompanyAllList; let i = index">
-                    {{prodComp.labelerName}}
-                  </div>
-                  -->
                   <div *ngFor="let prodProv of product.productProvenances">
                     <div *ngFor="let prodComp of prodProv.productCompanies">
                       {{prodComp.companyName}}
@@ -313,6 +316,19 @@
                 </td>
               </ng-container>
 
+              <ng-container matColumnDef="provenance">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Provenance </th>
+                <td mat-cell *matCellDef="let product">
+                  <ol class="olstyle">
+                    <div *ngFor="let prodProv of product.productProvenances; let i = index">
+                      <li>
+                        {{prodProv.provenance}}
+                      </li>
+                    </div>
+                  </ol>
+                </td>
+              </ng-container>
+
               <ng-container matColumnDef="country">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Country </th>
                 <td mat-cell *matCellDef="let product">
@@ -411,10 +427,19 @@
                   </a>
                 </div>
 
+                <div class="margintopneg10" *ngIf="isAdmin">
+                  <!-- Show Json -->
+                  <span *ngIf="product && product.id">
+                    <a button mat-icon-button color="primary" (click)="showJSON(indexProd)" matTooltip='Show JSON'>
+                      <mat-icon>article</mat-icon>
+                    </a>&nbsp;
+                  </span>
+                </div>
+
                 <!-- Download Json For this record -->
                 <div class="margintopneg10" *ngIf="isAdmin">
                   <span *ngIf="product && product.id">
-                    <a button mat-icon-button color="primary" [href]="downloadJsonHref" (click)="saveJSON(product.id)"
+                    <a button mat-icon-button color="primary" [href]="downloadJsonHref" (click)="saveJSON(indexProd)"
                       download="{{jsonFileName}}.json" matTooltip='Download JSON'>
                       <mat-icon class="" svgIcon="get_app"></mat-icon>
                     </a>
@@ -435,7 +460,8 @@
                   </span>
                 </div>
                 <!-- ***** BUTTONS END ***** -->
-              </div>
+
+              </div> <!-- class=divflex-->
 
               <!-- GROUP BY PROVENANCE BEGIN -->
               <mat-tab-group class="margintop15px" (selectedTabChange)="tabSelectedUpdated($event)">
@@ -605,7 +631,7 @@
 
                 <div class="row-property">
                   <div class="row-property-key">
-                    Route of Admin:
+                    Route of Administration:
                   </div>
                   <div class="row-property-value">
                     {{product.routeAdmin}}
@@ -722,18 +748,41 @@
                                   </button>
                                 </div>
 
-                                <!-- Show Average, Original Numerator, or Original Denominator -->
-                                <!--
-                              <div *ngIf="prodIngred.average" matTooltip="{{prodIngred.average}}"
-                                matTooltipPosition="above">
-                                <mat-icon style="padding:0px;margin:0px;">
-                                  analytics
-                                </mat-icon>
-                                Test
+                              </div> <!-- class=divflex -->
+
+                              <!-- Show Average -->
+                              <div *ngIf="prodIngred.average">
+                                <span class="font11px">Average:
+                                  <b>{{prodIngred.average}}&nbsp;{{prodIngred.unit}}
+                                  </b>
+                                </span>
                               </div>
-                              -->
 
-                              </div> <!-- class=divflex -->
+                              <div class="divflex">
+                                <!-- Original Numerator -->
+                                <div>
+                                  <span *ngIf="prodIngred.originalNumeratorNumber">
+                                    <span class="font11px">Numerator:
+                                      <b>{{ prodIngred.originalNumeratorNumber }}&nbsp;{{
+                                        prodIngred.originalNumeratorUnit
+                                        }}
+                                      </b>
+                                    </span>
+                                  </span>
+                                </div>
+
+                                <!-- Original Denominator -->
+                                <div class="marginleft5px">
+                                  <span *ngIf="prodIngred.originalDenominatorNumber">
+                                    <span class="font11px">&nbsp;&nbsp;Denominator:
+                                      <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
+                                        prodIngred.originalDenominatorUnit
+                                        }}
+                                      </b>
+                                    </span>
+                                  </span>
+                                </div>
+                              </div> <!-- divflex -->
 
                               <!-- Display Ingredient Type -->
                               <div class="colorgreen" *ngIf="prodIngred.ingredientType">
@@ -804,53 +853,48 @@
                                   </button>
                                 </div>
 
-                                <!-- Show Average, Original Numerator, or Original Denominator -->
-                                <!--
-                              <div *ngIf="prodIngred.average || prodIngred.originalNumeratorNumber">
-                              <div *ngIf="prodIngred.average" title="Average: {{prodIngred.average}}&nbsp;{{prodIngred.unit}}">Amount2</div>
-                              -->
-                                <!--
-                              <div *ngIf="prodIngred.originalNumeratorNumber"
-                                matTooltip="Average: {{prodIngred.originalNumeratorNumber}}&nbsp;{{prodIngred.originalNumeratorUnit}}"
-                                matTooltipPosition="above">
-                              </div>
+                              </div> <!-- class=divflex -->
+
+                              <!-- Show Average -->
+                              <div *ngIf="prodIngred.average">
+                                <span class="font11px">Average:
+                                  <b>{{prodIngred.average}}&nbsp;{{prodIngred.unit}}
+                                  </b>
+                                </span>
                               </div>
-                              -->
 
-                              </div> <!-- class=divflex -->
+                              <div class="divflex">
+                                <!-- Original Numerator -->
+                                <div>
+                                  <span *ngIf="prodIngred.originalNumeratorNumber">
+                                    <span class="font11px">Numerator:
+                                      <b>{{ prodIngred.originalNumeratorNumber }}&nbsp;{{
+                                        prodIngred.originalNumeratorUnit
+                                        }}
+                                      </b>
+                                    </span>
+                                  </span>
+                                </div>
+
+                                <!-- Original Denominator -->
+                                <div class="marginleft5px">
+                                  <span *ngIf="prodIngred.originalDenominatorNumber">
+                                    <span class="font11px">&nbsp;&nbsp;Denominator:
+                                      <b>{{ prodIngred.originalDenominatorNumber }}&nbsp;{{
+                                        prodIngred.originalDenominatorUnit
+                                        }}
+                                      </b>
+                                    </span>
+                                  </span>
+                                </div>
+
+                              </div> <!-- divflex -->
 
                               <!-- Display Ingredient Type -->
                               <div class="colorgreen" *ngIf="prodIngred.ingredientType">
                                 ({{ prodIngred.ingredientType }})
                               </div>
 
-                              <!-- Display Ingredient Strength/Average and Unit -->
-                              <!--
-                            <span *ngIf="prodIngred.average">
-                              <br>
-                              Average: {{prodIngred.average}}
-                              <span *ngIf="prodIngred.unit">
-                                {{prodIngred.unit}}
-                              </span>
-                            </span>
-
-                            <span *ngIf="prodIngred.originalNumeratorNumber">
-                              <br>
-                              Original Numerator: {{prodIngred.originalNumeratorNumber}}
-                              <span *ngIf="prodIngred.originalNumeratorUnit">
-                                {{prodIngred.originalNumeratorUnit}}
-                              </span>
-                            </span>
-
-                            <span *ngIf="prodIngred.originalDenominatorNumber">
-                              <br>
-                              Original Denominator: {{prodIngred.originalDenominatorNumber}}
-                              <span *ngIf="prodIngred.originalDenominatorUnit">
-                                {{prodIngred.originalDenominatorUnit}}
-                              </span>
-                            </span>
-                            -->
-
                             </li>
 
                           </div> <!-- Hide/Show link -->
@@ -861,7 +905,6 @@
                         </ng-template>
                       </div> <!-- For Loop: otherIngredients List -->
 
-
                     </ol>
 
                   </div>
diff --git a/src/app/fda/product/products-browse/products-browse.component.scss b/src/app/fda/product/products-browse/products-browse.component.scss
index f270191ba..35a29d790 100644
--- a/src/app/fda/product/products-browse/products-browse.component.scss
+++ b/src/app/fda/product/products-browse/products-browse.component.scss
@@ -1004,6 +1004,10 @@ width:150px;
   padding-bottom: 7px;
 }
 
+.width100px {
+  width: 100px;
+}
+
 .width120px {
   width: 120px;
 }
diff --git a/src/app/fda/product/products-browse/products-browse.component.ts b/src/app/fda/product/products-browse/products-browse.component.ts
index 6f29e20ae..ba28854da 100644
--- a/src/app/fda/product/products-browse/products-browse.component.ts
+++ b/src/app/fda/product/products-browse/products-browse.component.ts
@@ -5,6 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Location, LocationStrategy } from '@angular/common';
 import { OverlayContainer } from '@angular/cdk/overlay';
+import * as defiant from '@gsrs-core/../../../node_modules/defiant.js/dist/defiant.min.js';
 import * as _ from 'lodash';
 import * as moment from 'moment';
 import { Sort } from '@angular/material/sort';
@@ -28,6 +29,7 @@ import { Facet, FacetParam, FacetsManagerService, FacetUpdateEvent } from '@gsrs
 import { DisplayFacet } from '@gsrs-core/facets-manager/display-facet';
 import { ExportDialogComponent } from '@gsrs-core/substances-browse/export-dialog/export-dialog.component';
 import { StructureImageModalComponent, StructureService } from '@gsrs-core/structure';
+import { JsonDialogFdaComponent } from '../../json-dialog-fda/json-dialog-fda.component';
 
 /* GSRS Product Imports */
 import { GeneralService } from '../../service/general.service';
@@ -95,10 +97,12 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
 
   ascDescDir = 'desc';
   public displayedColumns: string[] = [
+    'viewDetails',
     'productCode',
     'productName',
     'ingredientName',
     'labelerName',
+    'provenance',
     'country',
     'status',
     'productNameType',
@@ -350,7 +354,6 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
     if (sort.active) {
       const orderIndex = this.displayedColumns.indexOf(sort.active).toString();
       this.ascDescDir = sort.direction;
-      alert("AAAAAAAAAAAAAA" + this.ascDescDir);
       this.sortValues.forEach(sortValue => {
         if (sortValue.displayedColumns && sortValue.direction) {
           if (this.displayedColumns[orderIndex] === sortValue.displayedColumns && this.ascDescDir === sortValue.direction) {
@@ -540,7 +543,7 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
                     });
                   });
                   */
-                 
+
                 } // response
               });
               this.subscriptions.push(substanceSubscription);
@@ -641,18 +644,18 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
 
     const dialogRef = this.dialog.open(StructureImageModalComponent, {
       height: '90%',
-      width: '680px',
+      width: '650px',
       panelClass: 'structure-image-panel',
       data: data
     });
 
-    this.overlayContainer.style.zIndex = '1001';
+    this.overlayContainer.style.zIndex = '1002';
 
     const subscription = dialogRef.afterClosed().subscribe(() => {
-      this.overlayContainer.style.zIndex = '1001';
+      this.overlayContainer.style.zIndex = null;
       subscription.unsubscribe();
     }, () => {
-      this.overlayContainer.style.zIndex = '1001';
+      this.overlayContainer.style.zIndex = null;
       subscription.unsubscribe();
     });
   }
@@ -676,9 +679,31 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
     });
   }
 
-  saveJSON(productId: number): void {
-    let json = this.products[productId];
-    const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(json)));
+  showJSON(productIndex: number): void {
+    const date = new Date();
+    let jsonFilename = 'product_' + moment(date).format('MMM-DD-YYYY_H-mm-ss');
+
+    const copyProd = _.cloneDeep(this.products[productIndex]);
+    let cleanProduct = this.scrub(copyProd);
+
+    let data = {jsonData: cleanProduct, jsonFilename: jsonFilename};
+
+    const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
+      width: '90%',
+      height: '90%',
+      data: data
+    });
+
+    const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
+    });
+    this.subscriptions.push(dialogSubscription);
+  }
+
+  saveJSON(productIndex: number): void {
+    const copyProd = _.cloneDeep(this.products[productIndex]);
+    let cleanProduct  = this.scrub(copyProd);
+
+    const uri = this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(cleanProduct)));
     this.downloadJsonHref = uri;
 
     const date = new Date();
@@ -707,4 +732,61 @@ export class ProductsBrowseComponent implements OnInit, AfterViewInit, OnDestroy
     this.showMoreLessOtherIngredArray[indexProd] = !this.showMoreLessOtherIngredArray[indexProd];
   }
 
+  scrub(oldraw: any): any {
+    const old = oldraw;
+
+    const activeMoietyHolders = defiant.json.search(old, '//*[_ingredientNameActiveMoieties]');
+    for (let i = 0; i < activeMoietyHolders.length; i++) {
+      if (activeMoietyHolders[i]._ingredientNameActiveMoieties) {
+        delete activeMoietyHolders[i]._ingredientNameActiveMoieties;
+      }
+    }
+
+    const basisOfStrenghActiveMoietyHolders = defiant.json.search(old, '//*[_basisOfStrengthActiveMoieties]');
+    for (let i = 0; i < basisOfStrenghActiveMoietyHolders.length; i++) {
+      if (basisOfStrenghActiveMoietyHolders[i]._basisOfStrengthActiveMoieties) {
+        delete basisOfStrenghActiveMoietyHolders[i]._basisOfStrengthActiveMoieties;
+      }
+    }
+
+    const basisOfStrengthSubUuidHolders = defiant.json.search(old, '//*[_basisOfStrengthSubstanceUuid]');
+    for (let i = 0; i < basisOfStrengthSubUuidHolders.length; i++) {
+      if (basisOfStrengthSubUuidHolders[i]._basisOfStrengthSubstanceUuid) {
+        delete basisOfStrengthSubUuidHolders[i]._basisOfStrengthSubstanceUuid;
+      }
+    }
+
+    const basisOfStrengthIngNameHolders = defiant.json.search(old, '//*[_basisOfStrengthIngredientName]');
+    for (let i = 0; i < basisOfStrengthIngNameHolders.length; i++) {
+      if (basisOfStrengthIngNameHolders[i]._basisOfStrengthIngredientName) {
+        delete basisOfStrengthIngNameHolders[i]._basisOfStrengthIngredientName;
+      }
+    }
+
+    const substanceUuidHolders = defiant.json.search(old, '//*[_substanceUuid]');
+    for (let i = 0; i < substanceUuidHolders.length; i++) {
+      if (substanceUuidHolders[i]._substanceUuid) {
+        delete substanceUuidHolders[i]._substanceUuid;
+      }
+    }
+
+    const ingredientNameHolders = defiant.json.search(old, '//*[_ingredientName]');
+    for (let i = 0; i < ingredientNameHolders.length; i++) {
+      if (ingredientNameHolders[i]._ingredientName) {
+        delete ingredientNameHolders[i]._ingredientName;
+      }
+    }
+
+    const approvalIdHolders = defiant.json.search(old, '//*[_approvalId]');
+    for (let i = 0; i < approvalIdHolders.length; i++) {
+      if (approvalIdHolders[i]._approvalId) {
+        delete approvalIdHolders[i]._approvalId;
+      }
+    }
+
+    delete old['_activeIngredients'];
+    delete old['_otherIngredients'];
+
+    return old;
+  }
 }
diff --git a/src/app/fda/service/general.service.ts b/src/app/fda/service/general.service.ts
index d8fb51fa0..8fa0d3bc4 100644
--- a/src/app/fda/service/general.service.ts
+++ b/src/app/fda/service/general.service.ts
@@ -88,9 +88,10 @@ export class GeneralService extends BaseHttpService {
         if (results) {
           results.forEach((codeObj, index) => {
             if (codeObj) {
-
-              if ((codeObj.codeSystem) && ((codeObj.codeSystem === 'BDNUM') && (codeObj.type === 'PRIMARY'))) {
-                substanceKey = codeObj.code;
+              if ((codeObj.codeSystem) && (codeObj.codeSystem === 'BDNUM')) {
+                if (codeObj.type === 'PRIMARY') {
+                  substanceKey = codeObj.code;
+                }
               }
             }
           });