From efb31c8139526215182dda47b949ddc11dfca534 Mon Sep 17 00:00:00 2001
From: mravula <mr257h@att.com>
Date: Tue, 15 Dec 2020 16:00:49 -0500
Subject: Raptor Crosstab report UI Changes

Issue-ID: PORTAL-902
Change-Id: I02f1e5651251a8c26d6c524d659617e5941343a2
Signed-off-by: mravula <mr257h@att.com>
---
 .../columns/column-list/column-list.component.css  |    9 +-
 .../columns/column-list/column-list.component.html |   23 +
 .../columns/column-list/column-list.component.ts   |   78 +-
 .../columns-edit.component.css                     |    3 +-
 .../edit-drill-down-link.component.html            |    4 +-
 .../dashboard-report-grid.service.ts               |    2 +-
 .../Report/definition/definition.component.html    |   18 +-
 .../Report/definition/definition.component.ts      |   25 +-
 .../form-fields-add-edit.component.css             |    3 +-
 .../Report/form-fields/form-fields.component.css   |   30 +-
 .../Report/form-fields/form-fields.component.html  |  113 +-
 .../form-fields/form-fields.component.spec.ts      |    5 +-
 .../Report/form-fields/form-fields.component.ts    |  194 ++-
 .../Report/form-fields/form-fields.service.ts      |    4 +
 .../Report_List/Report/sql/sql.component.ts        |    4 -
 .../header-tabs.component.html                     |   10 +-
 .../ngapp/src/app/report-run/report-run.module.ts  |    6 +-
 .../run-report-form-fields.component.css           |   11 +
 .../run-report-form-fields.component.html          |   37 +-
 .../run-report-form-fields.component.ts            |  290 +++-
 .../run-cross-tab-report.component.html            |   98 ++
 .../run-cross-tab-report.component.scss            | 1398 ++++++++++++++++++++
 .../run-cross-tab-report.component.ts              |  444 +++++++
 .../run-dashboard-report.component.ts              |   14 +-
 .../run/run-report/run-report.component.css        |   12 +
 .../run/run-report/run-report.component.html       |    6 +-
 .../run/run-report/run-report.component.ts         |   79 +-
 .../shared/services/header/header.service.spec.ts  |    3 +-
 .../services/sidebar/sidebar.service.spec.ts       |    4 +-
 .../profile/self/self.component.spec.ts            |    2 +-
 30 files changed, 2830 insertions(+), 99 deletions(-)
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.scss
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts

(limited to 'ecomp-sdk/epsdk-app-overlay')

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.css
index 2292a29c..0e10f549 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.css
@@ -399,10 +399,7 @@ tr:nth-child(odd) {
     font-size: 35px;
 }
 
-.list::-webkit-scrollbar {
-    -webkit-appearance: scrollbarthumb-vertical;
-    width: 5px;
-    background: transparent;
+::-webkit-scrollbar {
 }
 
 
@@ -445,4 +442,6 @@ label {
     font-size: 5px;
     top: 4px;
     left: 10px; }
-
+.err-msg{
+	color: red;
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html
index 4a8f2695..2cfb1a08 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html
@@ -58,6 +58,22 @@
                         </div>
                         <br/>
                         <br/>
+                        <div *ngIf="isCrossTab">
+                    <div>
+                            <label class="defaultFontSize1" for="crossTabValue">Column Usage in Cross-Tab:</label>
+                            <select [(ngModel)]="crossTabValue" class="browser-default custom-select"
+                                    placeholder="Select Report Type" required="required"
+                                    value="{{finalEditRowGetObj.crossTabValue}}">
+                                <option class="defaultFontSize1" selected>Select Data Type</option>
+                                <option class="defaultFontSize1" value="ROW">Row headings</option>
+                                <option class="defaultFontSize1" value="COLUMN">Column headings</option>
+                                <option class="defaultFontSize1" value="VALUE">Report values</option>
+                                <option class="defaultFontSize1" value="Invisible/Filter">Invisible/Filter</option>
+                            </select>
+                        </div>
+                        <br/>
+                        <br/>
+                    </div>
                         <div>
                             <label class="defaultFontSize1" for="dataType">Data Type:</label>
                             <select [(ngModel)]="dataType" class="browser-default custom-select"
@@ -269,6 +285,7 @@
 
 <span *ngIf="showSpinner" class="ecomp-spinner"></span>
 
+<span  *ngIf='isCrossTab && displaymsg' class="err-msg">You must have atleast one column used for cross-tab 'Row headings', 'Column headings' and 'Report Values'</span>
 <div class="app-data-table">
 
     <table aria-label="Elements" class="full-width-table app-data-table" mat-table matSort>
@@ -290,6 +307,10 @@
             <td *matCellDef="let row" mat-cell>{{row.name}}</td>
         </ng-container>
 
+        <ng-container *ngIf='isCrossTab' matColumnDef="Cross-Tab Usage">
+            <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>Cross-Tab Usage</th>
+            <td *matCellDef="let row" mat-cell>{{row.crossTabValue}}</td>
+        </ng-container>
         <!-- Name Column -->
         <ng-container matColumnDef="edit">
             <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>EDIT</th>
@@ -300,6 +321,8 @@
         </ng-container>
 
         <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+
+        
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts
index 193e5ad0..242a50e1 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts
@@ -53,7 +53,6 @@ export class ColumnListComponent implements OnInit {
     finalPOSTObj: {};
     isDisabled: boolean;
     showConfirmButton: boolean;
-    displayedColumns = ['no', 'id', 'name', 'edit'];
     SQLstatus: string;
     SQLmessage: string;
     showSaveColDialog: boolean;
@@ -78,10 +77,18 @@ export class ColumnListComponent implements OnInit {
     private newSemaphoreList: any;
     private addDisplay = false;
     columnList: any;
+    isCrossTab: boolean;
+    displayedColumns: any;
+    crossTabValue: String;
+    displaymsg: boolean;
+    checkRowHeading: boolean;
+    checkCoumnHeading: boolean;
+    checkValue: boolean;
+    crossTabValuesArr: any;
 
     constructor(private _http: HttpClient,
-                private _columnService: ColumnService,
-                private changeDetectorRefs: ChangeDetectorRef) {
+        private _columnService: ColumnService,
+        private changeDetectorRefs: ChangeDetectorRef) {
 
         this.showEditDrillDownPage = false;
         this.showAdvancedDisplayPage = false;
@@ -104,6 +111,9 @@ export class ColumnListComponent implements OnInit {
         this.semaphoreId = '';
         this.incomingDrillDownParams = '';
         this.isIncomingDrillDownParams = false;
+        this.isCrossTab = false;
+        this.displaymsg = false;
+        this.crossTabValuesArr = [];
     }
 
     ngOnInit() {
@@ -118,8 +128,37 @@ export class ColumnListComponent implements OnInit {
                     this.finalGetObj[fgo_counter]['no'] = fgo_counter + 1;
                     this.finalGetObj[fgo_counter]['edit'] = '';
                     this.finalObjArr.push(this.finalGetObj[fgo_counter]);
+                    if (this.finalGetObj[fgo_counter]['crossTabValue'] !== null && this.finalGetObj[fgo_counter]['crossTabValue'] !== 'Cross-Tab') {
+                        this.isCrossTab = true;
+                    }
                     fgo_counter++;
                 }
+                for (let i = 0; i < this.finalObjArr.length; i++) {
+                    this.crossTabValuesArr.push(this.finalObjArr[i]['crossTabValue'])
+                }
+
+                if (this.crossTabValuesArr.includes('Row headings'))
+                    this.checkRowHeading = true;
+                if (this.crossTabValuesArr.includes('Column headings'))
+                    this.checkCoumnHeading = true;
+                if (this.crossTabValuesArr.includes('Report values'))
+                    this.checkValue = true;
+
+                if (this.isCrossTab) {
+                    if (this.checkRowHeading && this.checkCoumnHeading && this.checkValue) {
+                        this.displaymsg = false;
+                    } else {
+                        this.displaymsg = true;
+                    }
+                }
+
+                if (this.isCrossTab) {
+                    this.displayedColumns = ['no', 'id', 'name', 'Cross-Tab Usage', 'edit'];
+                }
+                else {
+                    this.displayedColumns = ['no', 'id', 'name', 'edit'];
+
+                }
                 this.dataSource.data = this.finalObjArr;
                 this.dataSource.sort = this.sort;
                 this.dataSource.paginator = this.paginator;
@@ -176,6 +215,9 @@ export class ColumnListComponent implements OnInit {
                 this.drillDownObj['drillDownType'] = this.drilldownType;
                 this.semaphoreList = this.finalEditRowGetObj['semaphoreList'];
                 this.semaphoreId = this.finalEditRowGetObj['semaphoreId'];
+                if (this.isCrossTab) {
+                    this.crossTabValue = this.finalEditRowGetObj['crossTabValue'];
+                }
                 if (this.semaphoreId === '') {
                     this.semaphoreName = 'No Display';
                 } else {
@@ -235,6 +277,32 @@ export class ColumnListComponent implements OnInit {
                     this.finalObjArr.push(this.finalGetObj[fgo_counter]);
                     fgo_counter++;
                 }
+                this.crossTabValuesArr = [];
+                this.checkRowHeading = false;
+                this.checkCoumnHeading = false;
+                this.checkValue = false;
+
+                for (let i = 0; i < this.finalObjArr.length; i++) {
+                    this.crossTabValuesArr.push(this.finalObjArr[i]['crossTabValue'])
+                }
+
+
+                if (this.crossTabValuesArr.includes('Row headings'))
+                    this.checkRowHeading = true;
+                if (this.crossTabValuesArr.includes('Column headings'))
+                    this.checkCoumnHeading = true;
+                if (this.crossTabValuesArr.includes('Report values'))
+                    this.checkValue = true;
+
+                if (this.isCrossTab) {
+                    if (this.checkRowHeading && this.checkCoumnHeading && this.checkValue) {
+                        this.displaymsg = false;
+                    } else {
+                        this.displaymsg = true;
+                    }
+                }
+
+
                 this.dataSource.data = this.finalObjArr;
                 this.dataSource.sort = this.sort;
                 this.dataSource.paginator = this.paginator;
@@ -250,6 +318,7 @@ export class ColumnListComponent implements OnInit {
         this.addDisplay = false;
         this.Colclosable = false;
         this.showConfirmButton = false;
+        this.changeDetectorRefs.detectChanges();
     }
 
     complete() {
@@ -296,6 +365,9 @@ export class ColumnListComponent implements OnInit {
         this.finalPOSTObj['noWrap'] = (this.noWrap === true ? 'Y' : 'N');
         this.finalPOSTObj['sortable'] = this.sortable;
         this.finalPOSTObj['subTotalCustomText'] = this.displayTotal;
+        if (this.isCrossTab) {
+            this.finalPOSTObj['crossTabValue'] = this.crossTabValue;
+        }
         this.finalPOSTObj['visible'] = this.visible;
         if (this.semaphoreName === 'No Display') {
             this.semaphoreId = '';
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/columns-edit.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/columns-edit.component.css
index 9c0e51a5..4526c54c 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/columns-edit.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/columns-edit.component.css
@@ -1,7 +1,6 @@
 .dialog {
     z-index: 1000;
-    position: relative;
-    display: flex;
+    position: fixed;
     right: 0;
     left: 0;
     top: 20px;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/edit-drill-down-link/edit-drill-down-link.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/edit-drill-down-link/edit-drill-down-link.component.html
index 563fd322..3780375a 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/edit-drill-down-link/edit-drill-down-link.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/edit-drill-down-link/edit-drill-down-link.component.html
@@ -13,7 +13,7 @@
               <td><label for="novalue{{i}}" >No Value</label></td>
               <td><label >Accept Default</label></td>
           </tr>
-          <tr>
+          <tr *ngIf=!checkIfItemIsTimeStamp(item.name)>
               <td><input type="radio"  id="fixed{{i}}"  name="radio-group{{i}}" [(ngModel)]="item.radioButtonValue" value="fixed"><label for="fixed{{i}}"></label></td>
               <td><label for="fixed{{i}}">Fixed Value</label></td>
               <td><input class="defaultFontSize field-group" id="fixedValue{{i}}" type="text"  [(ngModel)]="item.fixedValueData" value="3"/></td>
@@ -28,7 +28,7 @@
                   </select>
               </td>
           </tr>
-          <tr>
+          <tr *ngIf=!checkIfItemIsTimeStamp(item.name)>
               <td><input type="radio" id="field{{i}}"  name="radio-group{{i}}" [(ngModel)]="item.radioButtonValue" value="field"><label for="field{{i}}"></label></td>
               <td><label for="field{{i}}">Value of form field</label></td>
               <td>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/dashboard-report-grid/dashboard-report-grid.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/dashboard-report-grid/dashboard-report-grid.service.ts
index 3cd72584..69deefb9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/dashboard-report-grid/dashboard-report-grid.service.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/dashboard-report-grid/dashboard-report-grid.service.ts
@@ -12,6 +12,6 @@ export class DashboardReportGridService {
 
   getReportList() : Observable<any>
   {
-    return this._http.get(environment.baseUrl + "raptor.htm?action=report.search.execute&r_page=0");
+    return this._http.get(environment.baseUrl + "raptor.htm?action=report.search.execute&r_page=0&fromEdit=true");
   }
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.html
index efe84957..1627e227 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.html
@@ -50,10 +50,11 @@
                         <option class="defaultFontSize" selected>Select Report Type</option>
                         <option class="defaultFontSize" value="Linear">Linear</option>
                         <option class="defaultFontSize" value="Dashboard">Dashboard</option>
+                        <option class="defaultFontSize" value="Cross-Tab">Cross-Tab</option>
                     </select>
                 </div>
                 <br/>
-                <div *ngIf="reportType === 'Linear'">
+                <div *ngIf="reportType === 'Linear' || reportType === 'Cross-Tab' ">
                     <div class="field-group">
                         <label for="dataSrc">*Data Source</label> <br/>
                         <select [(ngModel)]="dataSrc" class="browser-default custom-select defaultFontSize" id="dataSrc"
@@ -279,6 +280,21 @@
                                   type="textarea" value="{{finalGetObj.reportSubTitle}}"></textarea>
                     </div>
                     <br/>
+
+                    <div class="field-group" *ngIf="reportType === 'Cross-Tab' || reportType === 'Linear'">
+                        <label>Page Header</label> <br/>
+                        <textarea [(ngModel)]="reportHeader" class="defaultFontSize" id="reportHeader" type="textarea"
+                                  value="{{finalGetObj.reportHeader}}"></textarea>
+                    </div>
+                    <br/>
+
+                    <div class="field-group" *ngIf="reportType === 'Cross-Tab' || reportType === 'Linear'">
+                        <label>Page Footer</label> <br/>
+                        <textarea [(ngModel)]="reportFooter" class="defaultFontSize" id="reportFooter" type="textarea"
+                                  value="{{finalGetObj.reportFooter}}"></textarea>
+                    </div>
+                    <br/>
+
                     <div class="field-group">
                         <label class="checkbox" for="oneTime">
                             <input [(ngModel)]="oneTime" id="oneTime" type="checkbox"
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
index 0ca05b4c..eda3fb6b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
@@ -72,6 +72,8 @@ export class DefinitionComponent implements OnInit, OnDestroy {
     pilotModalComponent: DefinitionSaveDialogComponent;
     IncomingReportId: number;
     displayOptionsArr: {}[] = [];
+    reportHeader: string;
+    reportFooter:string;
 
     constructor(private _http: HttpClient, private _route: ActivatedRoute, private _definitionService: DefinitionService, private _router: Router) {
         this.showSpinner = true;
@@ -181,7 +183,7 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                         this.IncomingReportId = -1;
                         this.reportId = -1;
                     }
-                    if (this.reportType === 'Linear') {
+                    if (this.reportType === 'Linear' || this.reportType ==='Cross-Tab') {
                         this.dataSrc = response['dbInfo'];
                         this.helpText = response['formHelpText'];
                         this.reportDefinition = response['repDefType'];
@@ -203,6 +205,7 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                         this.allowScheduler = (response['allowScheduler'] == 'Y' ? true : false);
                         this.sizedByContent = (response['sizedByContent'] == 'Y' ? true : false);
                         this.displayOptionsArr = response['displayOptions'];
+                        if( this.displayOptionsArr != null){
                         for (let cont of this.displayOptionsArr) {
                             if (cont['name'] == 'HideFormFields') {
                                 this.hideFormFields = cont['selected'];
@@ -220,8 +223,11 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                                 this.hidePDF = cont['selected'];
                             }
                         }
+                    }
                         this.disableColumnSort = response['runtimeColSortDisabled'];
                         this.runTimeFormNum = response['numFormCols'];
+                        this.reportHeader = response['reportHeader'];
+                        this.reportFooter = response['reportFooter'];
 
                         this.reportTitle = response['reportTitle'];
                         this.reportSubTitle = response['reportSubTitle'];
@@ -252,7 +258,7 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                             this.reportName = response['reportName'];
                             this.reportDescription = response['reportDescr'];
                             this.reportType = response['reportType'];
-                            if (this.reportType === 'Linear') {
+                            if (this.reportType === 'Linear' || this.reportType ==='Cross-Tab') {
                                 this.dataSrc = response['dbInfo'];
                                 this.helpText = response['formHelpText'];
                                 this.reportDefinition = response['repDefType'];
@@ -274,6 +280,7 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                                 this.allowScheduler = (response['allowScheduler'] == 'Y' ? true : false);
                                 this.sizedByContent = (response['sizedByContent'] == 'Y' ? true : false);
                                 this.displayOptionsArr = response['displayOptions'];
+                                if(this.displayOptionsArr != null){
                                 for (let cont of this.displayOptionsArr) {
                                     if (cont['name'] == 'HideFormFields') {
                                         this.hideFormFields = cont['selected'];
@@ -291,9 +298,11 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                                         this.hidePDF = cont['selected'];
                                     }
                                 }
+                            }
                                 this.disableColumnSort = response['runtimeColSortDisabled'];
                                 this.runTimeFormNum = response['numFormCols'];
-
+                                this.reportHeader = response['reportHeader'];
+                                this.reportFooter = response['reportFooter'];
                                 this.reportTitle = response['reportTitle'];
                                 this.reportSubTitle = response['reportSubTitle'];
                                 this.oneTime = (response['oneTimeRec'] == 'Y' ? true : false);
@@ -400,6 +409,11 @@ export class DefinitionComponent implements OnInit, OnDestroy {
             this.finalPostObj['allowScheduler'] = (this.allowScheduler == true ? 'Y' : 'N');
             this.finalPostObj['sizedByContent'] = (this.sizedByContent == true ? 'Y' : 'N');
             this.finalPostObj['repDefType'] = this.reportDefinition;
+
+                this.finalPostObj['reportHeader'] = this.reportHeader;
+                this.finalPostObj['reportFooter'] = this.reportFooter;
+
+
             if (this.reportType === 'Dashboard') {
                 this.dashboardObj = this.dashboardObj.sort(function (a, b) {
                     if (a['x'] === b['x']) {
@@ -514,7 +528,10 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                 ];
                 this.finalPostObj['runtimeColSortDisabled'] = this.disableColumnSort;
                 this.finalPostObj['numFormCols'] = this.runTimeFormNum;
-                if ( this.reportTitle.length > 0) {
+                    this.finalPostObj['reportHeader'] = this.reportHeader;
+                    this.finalPostObj['reportFooter'] = this.reportFooter;
+
+                if ( undefined != this.reportTitle && this.reportTitle.length > 0) {
                     this.finalPostObj['reportTitle'] = this.reportTitle;
                 } else {
                     this.finalPostObj['reportTitle'] = this.reportName;;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields-add-edit/form-fields-add-edit.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields-add-edit/form-fields-add-edit.component.css
index 578b33e8..13a78c5c 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields-add-edit/form-fields-add-edit.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields-add-edit/form-fields-add-edit.component.css
@@ -1,7 +1,6 @@
   .dialog {
     z-index: 1000;
-    display: flex;
-    position: relative;
+    position: fixed;
     right: 0;
     left: 0;
     top: 20px;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.css
index 96d0a71f..0654d2a8 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.css
@@ -115,13 +115,6 @@ hr{
     padding-bottom: 5px;
 }
 
-.list::-webkit-scrollbar {
-  -webkit-appearance: scrollbarthumb-vertical;
-  width: 5px;
-  background: transparent;
-}
-
-
 label { 
   float: left; 
   width: 24em; 
@@ -6284,7 +6277,30 @@ td{
 	margin-left: 10%;
 }
 
+.add-reOrder-button
+{
+  font-size: 17px; 
+  margin-left: 80%;
+}
+
 .center{
     margin: auto;
     width: 50%;
 }
+
+.showbuttons{
+	width: auto; margin-left: 70%;
+}
+
+:host ::ng-deep .mat-form-field-underline {
+  display: none;
+}
+
+:host ::ng-deep .mat-form-field-infix {
+  padding: 0;
+  border-top: 0;
+}
+
+.verify-button{
+  font-size: 17px;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.html
index 63062109..d35430db 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.html
@@ -38,7 +38,8 @@
 
 
                 <label class="defaultLabelFontSize">Field Name:</label><label><input [(ngModel)]="fieldName"
-                                                                                     class="defaultFontSize" id="fieldName"
+                                                                                     class="defaultFontSize"
+                                                                                     id="fieldName"
                                                                                      type="text"
                                                                                      value="{{fieldName}}"/></label>
 
@@ -75,7 +76,8 @@
                 <div>
                     <label class="defaultLabelFontSize">Is used in Group By Clause?:</label>
                     <label class="defaultLabelFontSize" class="checkbox" for="groupFormField">
-                        <input [(ngModel)]="groupFormField" class="ng-valid ng-dirty ng-valid-parse ng-touched" id="groupFormField"
+                        <input [(ngModel)]="groupFormField" class="ng-valid ng-dirty ng-valid-parse ng-touched"
+                               id="groupFormField"
                                type="checkbox" value="{{groupFormField}}"><i class="skin"></i><span></span>
                     </label>
                 </div>
@@ -85,7 +87,8 @@
                 <div>
                     <label class="defaultLabelFontSize">SQL as Default Value:</label>
                     <label class="defaultLabelFontSize" class="checkbox" for="isDefaultSql">
-                        <input [(ngModel)]="isDefaultSql" class="ng-valid ng-dirty ng-valid-parse ng-touched" id="isDefaultSql"
+                        <input [(ngModel)]="isDefaultSql" class="ng-valid ng-dirty ng-valid-parse ng-touched"
+                               id="isDefaultSql"
                                type="checkbox" value="{{isDefaultSql}}"><i class="skin"></i><span></span>
                     </label>
                 </div>
@@ -98,7 +101,7 @@
                         <textarea [(ngModel)]="fieldDefaultSQL" class="defaultFontSize" id="fieldDefaultSQL"
                                   type="textarea" value="{{fieldDefaultSQL}}"></textarea>
                         <div class="center">
-                            <button (click)="verify('Default')" class="btn btn-alt btn-small" style="font-size: 17px;">
+                            <button (click)="verify('Default')" class="btn btn-alt btn-small verify-button">
                                 Verify
                             </button>
                         </div>
@@ -136,6 +139,73 @@
                 </div>
                 <br/>
                 <br/>
+               <div *ngIf='showDateRange || this.validationType === "DATE"'>
+                <div>
+                    <label class="defaultLabelFontSize">SQL as Default Range Value:</label>
+                    <label class="defaultLabelFontSize" class="checkbox" for="isDefaultSqlRange">
+                        <input [(ngModel)]="isDefaultSqlRange" class="ng-valid ng-dirty ng-valid-parse ng-touched"
+                               id="isDefaultSqlRange"
+                               type="checkbox" value="{{isDefaultSqlRange}}"><i class="skin"></i><span></span>
+                    </label>
+                </div>
+
+
+                <div *ngIf="!isDefaultSqlRange" class="field-group">
+                    <label class="defaultLabelFontSize">rangeStartDate:</label>
+                   
+                    <mat-form-field style="float: left;"><input  [(ngModel)]="rangeStartDate" 
+                                            [matDatepicker]="picker"
+                                            class="defaultFontSize" matInput>
+                        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                        <mat-datepicker #picker></mat-datepicker>
+                    </mat-form-field>
+              
+
+                </div>
+                <br />
+                <br />
+                
+                <div *ngIf="!isDefaultSqlRange" class="field-group">
+                    <label class="defaultLabelFontSize">rangeEndDate:</label>
+                
+                    <mat-form-field style="float: left;"><input [(ngModel)]="rangeEndDate"  [matDatepicker]="picker"
+                        class="defaultFontSize" matInput>
+                    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field>
+                </div>
+                <br />
+                <br />
+
+
+               
+
+                <div class="field-group" *ngIf="isDefaultSqlRange">
+                    <label>RangeStartDate Sql:</label>
+                    <textarea [(ngModel)]="rangeStartDateSQL" class="defaultFontSize" id="rangeStartDateSQL" type="textarea"
+                              value="{{rangeStartDateSQL}}"></textarea>
+                    <div class="center">
+                        <button (click)="verify('startDateRange')" class="btn btn-alt btn-small verify-button">Verify
+                        </button>
+                    </div>
+                </div>
+                <br/>
+                <br/>
+
+
+                <div class="field-group" *ngIf="isDefaultSqlRange">
+                    <label>RangeEndDate Sql:</label>
+                    <textarea [(ngModel)]="rangeEndDateSQL" class="defaultFontSize" id="rangeEndDateSQL" type="textarea"
+                              value="{{rangeEndDateSQL}}"></textarea>
+                    <div class="center">
+                        <button (click)="verify('endDateRange')" class="btn btn-alt btn-small verify-button">Verify
+                        </button>
+                    </div>
+                </div>
+                <br/>
+                <br/>
+            </div> 
+                
                 <div class="field-group">
                     <label>SQL Generating Custom List of Values:</label>
                     <textarea [(ngModel)]="fieldSQL" class="defaultFontSize" id="fieldSQL" type="textarea"
@@ -150,7 +220,8 @@
                 <br/>
                 <div>
                     <label class="defaultLabelFontSize">Provide Predefined List of Values: Do not use Predefined list -
-                        Generate list from database:</label><label><input [(ngModel)]="predefinedValue" class="defaultFontSize"
+                        Generate list from database:</label><label><input [(ngModel)]="predefinedValue"
+                                                                          class="defaultFontSize"
                                                                           id="predefinedValue" type="text"
                                                                           value="{{predefinedValue}}"/></label>
                     <button (click)="addToList(predefinedValue)" class="btn btn-alt btn-small" style="font-size: 17px;">
@@ -173,7 +244,7 @@
             </div>
         </div>
 
-        <div class="card-footer" style="width: 1000px; height: 65px; padding-left: 770px;">
+        <div class="card-footer" style="width: 1000px; padding-left: 770px;">
             <button (click)="save();" *ngIf="!showConfirmButton" class="btn btn-alt btn-small" style="font-size: 17px;">
                 Save
             </button>&nbsp;
@@ -246,6 +317,7 @@
         </table>
     </div>
     <br/>
+    <br/>
     <h4>Form Field List</h4>
     <div *ngIf="!showSpinner">
 
@@ -254,6 +326,7 @@
             <th class="defaultFontSize">Order Number</th>
             <th class="defaultFontSize">Field Name</th>
             <th class="defaultFontSize">Edit</th>
+            <th class="defaultFontSize">Order</th>
             <th class="defaultFontSize">Delete</th>
 
             <tr *ngFor="let item of formFieldsListObj; let i = index;">
@@ -268,6 +341,14 @@
                         edit
                     </mat-icon>
                 </td>
+                <td>
+                    <mat-icon (click)="moveUpward(i)" *ngIf="!isFirst(i)" aria-hidden="false" aria-label="expand_less">
+                        expand_less
+                    </mat-icon>
+                    <mat-icon (click)="moveDownward(i)" *ngIf="!isLast(i)" aria-hidden="false" aria-label="expand_more">
+                        expand_more
+                    </mat-icon>
+                </td>
                 <td>
                     <mat-icon (click)="delete(item.id)" aria-hidden="false" aria-label="delete">delete</mat-icon>
                 </td>
@@ -275,13 +356,21 @@
 
         </table>
         <br/>
+        <table class="showbuttons">
+            <tr>
+                <td>
+                    <button (click)="add(); setDisplayMode('Add');" class="btn btn-alt btn-small add-reOrder-button">
+                        Add
+                    </button>
+                </td>
+                <td>
+                    <button (click)="reOrder()" *ngIf="showReOrderButton"
+                            class="btn btn-alt btn-small add-reOrder-button">ReOrder
+                    </button>
+                </td>
+            </tr>
+        </table>
 
-        <div class="field-group">
-            <button (click)="add(); setDisplayMode('Add');" class="btn btn-alt btn-small"
-                    style="font-size: 17px; margin-left: 80%;">Add
-            </button>
-        </div>
         <br/>
-        <hr/>
     </div>
 </div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
index 69c0aeba..8a1a5713 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
@@ -4,7 +4,7 @@ import { FormFieldsComponent } from './form-fields.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { MatDialogModule, MatSnackBarModule } from '@angular/material';
+import { MatDatepickerModule, MatDialogModule, MatSnackBarModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormFieldsService } from './form-fields.service';
@@ -26,7 +26,8 @@ describe('FormFieldsComponent', () => {
         HttpClientTestingModule,
         MatDialogModule,
         MatSnackBarModule,
-       BrowserAnimationsModule
+       BrowserAnimationsModule,
+       MatDatepickerModule
       ]
     })
     .compileComponents();
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.ts
index e8a60849..8d2ce96c 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, Input, Inject} from '@angular/core';
+import {Component, OnInit, Input, Inject, ChangeDetectorRef} from '@angular/core';
 import {FormFieldsService} from './form-fields.service';
 import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Observable} from 'rxjs';
@@ -52,12 +52,21 @@ export class FormFieldsComponent implements OnInit {
     queryObj: {};
     validateResponseString: string;
     showVerifySpinner: boolean;
-    Groups: {}[] = [];
+    Groups: any;
     isDefaultSql: boolean;
     showConfirmButton: boolean;
-
-
-    constructor(private _formFieldsService: FormFieldsService, public dialog: MatDialog, private _snackBar: MatSnackBar) {
+    showReOrderButton: boolean;
+    orderSeqArray: any;
+    showDateRange: any;
+    rangeStartDate :any;
+    rangeEndDate :any;
+     rangeStartDateSQL :any;
+    rangeEndDateSQL:any;
+    isDefaultSqlRange:boolean;
+    isFFDate: boolean;
+
+
+    constructor(private _formFieldsService: FormFieldsService, public dialog: MatDialog, private _snackBar: MatSnackBar,private changeDetectorRefs: ChangeDetectorRef) {
         this.formFieldsListObj = [];
         this.postMoveUpwrdObj = {};
         this.postDownwardObj = {};
@@ -72,19 +81,49 @@ export class FormFieldsComponent implements OnInit {
         this.showVerifySpinner = false;
         this.Groups = [];
         this.isDefaultSql = false;
+        this.showReOrderButton = false;
+        this.orderSeqArray = [];
+        this.showDateRange = false;
+        this.isDefaultSqlRange = false;
+        this.rangeStartDate ='';
+        this.rangeEndDate='';
+        this.rangeStartDateSQL ='';
+        this.rangeEndDateSQL='';
+        this.isFFDate = false;
     }
 
     ngOnInit() {
         this._formFieldsService.getListOfFormFields()
             .subscribe((responseFormFields) => {
                 for (let m = 0; m < responseFormFields.length; m++) {
-                    responseFormFields[m]['orderSeq'] = m + 1;
                     this.formFieldsListObj.push(responseFormFields[m]);
                 }
+                this.formFieldsListObj = this.formFieldsListObj.sort(function (a, b) {
+                    if ((a['orderSeq']) === (b['orderSeq'])) {
+                        return a;
+                    } else {
+                        return (a['orderSeq']) - (b['orderSeq']);
+                    }
+                });
+                for (let ff = 0; ff < this.formFieldsListObj.length; ff++) {
+                    let val = this.formFieldsListObj[ff]['orderSeq'];
+                    this.orderSeqArray.push(val);
+                }
 
+                if (this.orderSeqArray.includes(null) || this.orderSeqArray.length !== new Set(this.orderSeqArray).size) {
+                    this.reOrder();
+                }
                 this._formFieldsService.getFormFieldGroupsData(this.reportId1)
                     .subscribe((responseGroupsData) => {
                         this.Groups = JSON.parse(responseGroupsData['formFieldGroupsJSON']);
+                        this.Groups = this.Groups.sort(function (a, b) {
+                            if ((a['orderSeq']) === (b['orderSeq'])) {
+                                return a;
+                            } else {
+                                return (a['orderSeq']) - (b['orderSeq']);
+                            }
+                        });
+
                     });
             });
     }
@@ -124,11 +163,6 @@ export class FormFieldsComponent implements OnInit {
                         this.postMoveUpwrdObj['orderSeq'] = this.orderSeqOfUp;
                         this.postDownwardObj['orderSeq'] = this.orderSeqOfDown;
 
-                        console.log(this.postDownwardObj);
-                        console.log(this.postMoveUpwrdObj);
-                        this.postMoveUpwrdObj['lastUpdatedFieldId'] = this.postDownwardObj['fieldId'];
-                        this.postDownwardObj['lastUpdatedFieldId'] = this.postMoveUpwrdObj['fieldId'];
-
                         this._formFieldsService.postFormFieldData(this.postDownwardObj, this.reportId1)
                             .subscribe((responsePostn) => {
                                 if (responsePostn['message']) {
@@ -148,6 +182,7 @@ export class FormFieldsComponent implements OnInit {
                                                             }
                                                         }
                                                         this.showSpinner = false;
+                                                        this.updateGroupOnOrderChange();
                                                     });
                                             }
                                         });
@@ -156,10 +191,23 @@ export class FormFieldsComponent implements OnInit {
 
                     });
             });
+    }
 
-
+    updateGroupOnOrderChange() {
+        let formfieldsMap: Map<string, string> = new Map();
+        for (let i = 0; i < this.formFieldsListObj.length; i++) {
+            formfieldsMap.set(this.formFieldsListObj[i]['id'], this.formFieldsListObj[i]['orderSeq']);
+        }
+        for (let k = 0; k < this.Groups.length; k++) {
+            let element = this.Groups[k];
+            for (let l = 0; l < element['formFieldList'].length; l++) {
+                element['formFieldList'][l]['orderSeq'] = formfieldsMap.get(element['formFieldList'][l]['id']);
+            }
+        }
+        this.saveFormFieldGroups();
     }
 
+
     moveDownward(n: number) {
         this.showSpinner = true;
 
@@ -176,13 +224,6 @@ export class FormFieldsComponent implements OnInit {
 
                         this.postMoveUpwrdObj['orderSeq'] = this.orderSeqOfUp;
                         this.postDownwardObj['orderSeq'] = this.orderSeqOfDown;
-
-                        console.log(this.postDownwardObj);
-                        console.log(this.postMoveUpwrdObj);
-
-                        this.postMoveUpwrdObj['lastUpdatedFieldId'] = this.postDownwardObj['fieldId'];
-                        this.postDownwardObj['lastUpdatedFieldId'] = this.postMoveUpwrdObj['fieldId'];
-
                         this._formFieldsService.postFormFieldData(this.postDownwardObj, this.reportId1)
                             .subscribe((responsePostn) => {
                                 if (responsePostn['message']) {
@@ -194,7 +235,6 @@ export class FormFieldsComponent implements OnInit {
                                                 this._formFieldsService.getListOfFormFields()
                                                     .subscribe((finalListResponse) => {
                                                         for (let k = 0; k < finalListResponse.length; k++) {
-                                                            //  this.formFieldsListObj.push(finalListResponse[k]);
                                                             for (let m = 0; m < finalListResponse.length; m++) {
                                                                 if (finalListResponse[m]['orderSeq'] == k + 1) {
                                                                     this.formFieldsListObj.push(finalListResponse[m]);
@@ -202,6 +242,7 @@ export class FormFieldsComponent implements OnInit {
                                                             }
                                                         }
                                                         this.showSpinner = false;
+                                                        this.updateGroupOnOrderChange();
                                                     });
                                             }
                                         });
@@ -230,11 +271,54 @@ export class FormFieldsComponent implements OnInit {
         this.openEditDialog(group);
     }
 
+
+    setDate($event : any){
+     const   mnth = ('0' + ($event.getMonth() + 1)).slice(-2);
+     const   day = ('0' + $event.getDate()).slice(-2);
+     let temp = [mnth, day, $event.getFullYear()].join('/');
+     temp = temp+' '+ '00:00:00';
+
+     return temp;
+
+    }
     edit(id: string) {
         this._formFieldsService.getFormFieldData(id)
             .subscribe((responseFormFieldData) => {
-                this.validationType = responseFormFieldData['validationType'];
+                this.validationType = responseFormFieldData["validationType"];
+                this.showDateRange = false;
+                if(this.validationType ==='DATE'){
+                    this.showDateRange = true;
+                    if (responseFormFieldData['rangeStartDate'] != null) {
+                        if (responseFormFieldData['rangeStartDate'] != '')
+                            this.rangeStartDate = new Date(responseFormFieldData['rangeStartDate']); else {
+                            this.rangeStartDate = '';
+                        }
+                    } else {
+                        this.rangeStartDate = '';
+                    }
+                    if (responseFormFieldData['rangeEndDate'] != null) {
+                        if (responseFormFieldData['rangeEndDate'] != '')
+                            this.rangeEndDate = new Date(responseFormFieldData['rangeEndDate']);
+                        else {
+                            this.rangeEndDate = '';
+                        }
+                    } else {
+                        this.rangeEndDate = '';
+                    }
+                    this.rangeStartDateSQL = responseFormFieldData['rangeStartDateSQL'];
+                    this.rangeEndDateSQL = responseFormFieldData['rangeEndDateSQL'];
+                    if ((this.rangeStartDate == '' && this.rangeEndDate == '')) {
+                        this.isDefaultSqlRange = true;
+                    } else {
+
+                        this.isDefaultSqlRange = false;
+                    }
+
+                    if ((this.rangeStartDate == '' && this.rangeEndDate == '' && this.rangeEndDateSQL == '' && this.rangeStartDateSQL == '')) {
+                        this.isDefaultSqlRange = false;
+                    }
 
+                }
                 if (responseFormFieldData['visible'] === true) {
                     this.visible = 'YES';
                 } else {
@@ -298,9 +382,15 @@ export class FormFieldsComponent implements OnInit {
         this.isDefaultSql = false;
         this.predefinedValueList = [];
         this.defaultValue = '';
-
+        this.orderSeq = null;
         this.showDialog = true;
         this.closable = true;
+        this.isDefaultSqlRange = false;
+        this.rangeStartDate ='';
+        this.rangeEndDate='';
+        this.rangeStartDateSQL ='';
+        this.rangeEndDateSQL='';
+        this.showDateRange='';
 
         this.mode = 'Add';
 
@@ -340,7 +430,30 @@ export class FormFieldsComponent implements OnInit {
         this.showSpinner = true;
         this.showDialog = false;
         this.finalPOSTObj['validationType'] = this.validationType;
+        if (this.validationType === 'DATE') {
+            if (this.rangeStartDate != null && this.rangeStartDate != '') {
+                this.finalPOSTObj['rangeStartDate'] = this.setDate(this.rangeStartDate);
+            } else {
+                this.finalPOSTObj['rangeStartDate'] = '';
+            }
+            if (this.rangeEndDate != null && this.rangeEndDate != '') {
+                this.finalPOSTObj['rangeEndDate'] = this.setDate(this.rangeEndDate);
+            } else {
+                this.finalPOSTObj['rangeEndDate'] = '';
+            }
+            this.finalPOSTObj['rangeStartDateSQL'] = this.rangeStartDateSQL;
+            this.finalPOSTObj['rangeEndDateSQL'] = this.rangeEndDateSQL;
+        }
+
+        if (this.isDefaultSqlRange) {
+            this.finalPOSTObj['rangeStartDate'] = '';
+            this.finalPOSTObj['rangeEndDate'] = '';
+        }
 
+        if (!this.isDefaultSqlRange) {
+            this.finalPOSTObj['rangeStartDateSQL'] = '';
+            this.finalPOSTObj['rangeEndDateSQL'] = '';
+        }
         if (this.visible == 'YES') {
             this.finalPOSTObj['visible'] = true;
         } else {
@@ -363,6 +476,8 @@ export class FormFieldsComponent implements OnInit {
 
         this.finalPOSTObj['defaultValue'] = this.defaultValue;
 
+        this.finalPOSTObj['defaultValue'] = this.defaultValue;
+
         if (this.fieldDefaultSQL != '' && this.fieldDefaultSQL != null) {
             this.finalPOSTObj['defaultValue'] = '';
         }
@@ -443,6 +558,24 @@ export class FormFieldsComponent implements OnInit {
                     this.validateResponseString = responseDefaultSQL['data']['elements'];
                     this.showVerifySpinner = false;
                 });
+        } else if (SQLType == 'startDateRange' || SQLType =='endDateRange'){
+
+        if(SQLType == 'startDateRange'){
+            this.queryObj = {
+                query: this.rangeStartDateSQL
+            };
+          }         
+          if(SQLType == 'endDateRange'){
+            this.queryObj = {
+                query: this.rangeEndDateSQL
+            };
+          }
+            this._formFieldsService.verifySQL(this.queryObj)
+                .subscribe((responseDefaultSQL) => {
+                    this.validateResponseString = responseDefaultSQL['data']['elements'];
+                    this.showVerifySpinner = false;
+                });
+
         } else {
             this.queryObj = {
                 query: this.fieldSQL
@@ -527,6 +660,23 @@ export class FormFieldsComponent implements OnInit {
         });
     }
 
+    reOrder() {
+        this._formFieldsService.reOrderFFValues()
+            .subscribe((response) => {
+                console.log(response);
+                this.formFieldsListObj = [];
+                for (let k = 0; k < response.length; k++) {
+                    for (let m = 0; m < response.length; m++) {
+                        if (response[m]['orderSeq'] == k + 1) {
+                            this.formFieldsListObj.push(response[m]);
+                        }
+                    }
+                }
+                this.showSpinner = false;
+                this.showReOrderButton = false;
+                this.updateGroupOnOrderChange();
+            });
+    }
 
     openEditDialog(groupInfo: any) {
         const multiSelectArray = [];
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.service.ts
index f636a001..a7c6501d 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.service.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.service.ts
@@ -49,4 +49,8 @@ export class FormFieldsService {
   {
     return this._http.post(environment.baseUrl + "report/wizard/save_formfield_groups_data", formFieldGroupObj, { headers: new HttpHeaders({'Content-Type': 'application/json'})});
   }
+   reOrderFFValues() : Observable<any>
+  {
+    return this._http.post(environment.baseUrl + "report/wizard/reorder", { headers: new HttpHeaders({'Content-Type': 'application/json'})});
+  }
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
index 7a547e3d..0be4da8d 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
@@ -139,15 +139,11 @@ export class SQLComponent implements OnInit {
 
     closeValidateModal() {
         if (this.reportMode === 'Create') {
-            if (this.Validatestatus == 'SQL Test Run - Failed!') {
-                this.sqlText = this.sqlText;
-            } else {
                 this._http.get(environment.baseUrl + 'report/wizard/retrieve_def_tab_wise_data/InSession')
                     .subscribe((response) => {
                         console.log(response);
                         this._router.navigate(['v2/app/reports', 'Edit', response['reportId']]);
                     });
-            }
         }
         this.showValidateSQLDialog = !this.showValidateSQLDialog;
         this.Validateclosable = false;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html
index 7fdc5d50..0fe96763 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/header-tabs-component/header-tabs.component.html
@@ -1,12 +1,12 @@
 
 <div *ngIf="reportMode !== 'Create'">
-<div *ngIf=" reportType === 'Linear'" >
+<div *ngIf=" reportType === 'Linear' || reportType === 'Cross-Tab'" >
   <mat-tab-group>
     <mat-tab label="Definition"><ng-template matTabContent><app-definition [reportId]="reportId" [reportMode]="reportMode"></app-definition></ng-template></mat-tab>
     <mat-tab label="SQL"><ng-template matTabContent><app-sqlcomponent [reportId]="reportId" [reportMode]="reportMode"></app-sqlcomponent></ng-template></mat-tab>
     <mat-tab label="Columns"><ng-template matTabContent><app-columns [reportId]="reportId"></app-columns></ng-template></mat-tab>
     <mat-tab label="Form Fields"><ng-template matTabContent><app-form-fields [reportId]="reportId"></app-form-fields></ng-template></mat-tab>
-    <mat-tab label="Chart Wizard"><ng-template matTabContent><app-chart-wizard [reportId]="reportId"></app-chart-wizard></ng-template></mat-tab>
+    <mat-tab label="Chart Wizard" *ngIf="reportType !== 'Cross-Tab'"><ng-template matTabContent><app-chart-wizard [reportId]="reportId"></app-chart-wizard></ng-template></mat-tab>
     <mat-tab label="Security"><ng-template matTabContent><app-security [reportId]="reportId"></app-security></ng-template></mat-tab>
     <mat-tab label="Log"><ng-template matTabContent><app-log [reportId]="reportId"></app-log></ng-template></mat-tab>
     <mat-tab label="Run"><ng-template matTabContent><app-run [reportId]="reportId"></app-run></ng-template></mat-tab>
@@ -26,9 +26,9 @@
 <div *ngIf="reportMode === 'Create'">
     <mat-tab-group>
       <mat-tab label="Definition"><ng-template matTabContent><app-definition [reportId]="reportId" [reportMode]="reportMode" (outputReportType)="getReportType($event)" ></app-definition></ng-template></mat-tab>
-      <mat-tab label="SQL" *ngIf=" reportType === 'Linear'"><ng-template matTabContent><app-sqlcomponent [reportId]="reportId" [reportMode]="reportMode"></app-sqlcomponent></ng-template></mat-tab>
-      <mat-tab label="Columns" *ngIf=" reportType === 'Linear'"><ng-template matTabContent><app-columns [reportId]="reportId"></app-columns></ng-template></mat-tab>
-      <mat-tab label="Form Fields" *ngIf=" reportType === 'Linear'"><ng-template matTabContent><app-form-fields [reportId]="reportId"></app-form-fields></ng-template></mat-tab>
+      <mat-tab label="SQL" *ngIf=" reportType === 'Linear' || reportType === 'Cross-Tab'"><ng-template matTabContent><app-sqlcomponent [reportId]="reportId" [reportMode]="reportMode"></app-sqlcomponent></ng-template></mat-tab>
+      <mat-tab label="Columns" *ngIf=" reportType === 'Linear' || reportType === 'Cross-Tab'"><ng-template matTabContent><app-columns [reportId]="reportId"></app-columns></ng-template></mat-tab>
+      <mat-tab label="Form Fields" *ngIf=" reportType === 'Linear' || reportType === 'Cross-Tab'"><ng-template matTabContent><app-form-fields [reportId]="reportId"></app-form-fields></ng-template></mat-tab>
       <mat-tab label="Chart Wizard" *ngIf=" reportType === 'Linear'"><ng-template matTabContent><app-chart-wizard [reportId]="reportId"></app-chart-wizard></ng-template></mat-tab>
       <mat-tab label="Security"><ng-template matTabContent><app-security [reportId]="reportId"></app-security></ng-template></mat-tab>
       <mat-tab label="Log"><ng-template matTabContent><app-log [reportId]="reportId"></app-log></ng-template></mat-tab>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts
index 775494d7..920379a8 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts
@@ -25,6 +25,7 @@ import {RunComponent} from './run/run.component';
 import {ReportRunRouting} from './report-run-routing.module';
 import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 import { RemoveSpaceDirective} from './run/run-report-form-fields/remove-space.directive';
+import { RunCrossTabReportComponent } from './run/run-report/run-cross-tab-report/run-cross-tab-report.component';
 
 @NgModule({
     declarations: [RunDashboardReportComponent,
@@ -33,7 +34,8 @@ import { RemoveSpaceDirective} from './run/run-report-form-fields/remove-space.d
         ReportRunComponent,
         RunReportResultSetComponent,
         RunComponent,
-        RemoveSpaceDirective],
+        RemoveSpaceDirective,
+        RunCrossTabReportComponent],
     imports: [
         MatTableModule,
         CommonModule,
@@ -54,7 +56,7 @@ import { RemoveSpaceDirective} from './run/run-report-form-fields/remove-space.d
         MatSortModule,
         NgbTooltipModule
     ],
-    exports: [RunReportComponent, RunComponent]
+    exports: [RunReportComponent, RunComponent, RunReportFormFieldsComponent]
 })
 
 export class ReportRun {
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css
index 91456c6a..8bd91148 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css
@@ -9,6 +9,17 @@
     padding: 0.4em;
 }
 
+.wrapper2 {
+    display: grid;
+    grid-template-columns:auto auto auto;
+    overflow: auto;
+}
+
+.wrapper2 > div {
+    border-radius: 3px;
+    padding: 0.4em;
+}
+
 mat-button-toggle-group {
     width: 800px;
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html
index aea6c768..ea413efc 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html
@@ -46,7 +46,7 @@
                     </div>
                     <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
-                        <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
+                        <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" [min]="formFieldListValueMap.get(item.fieldId+'_minDate')" [max]="formFieldListValueMap.get(item.fieldId+'_maxDate')" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                                 [matDatepicker]="picker"
                                                 class="defaultFontSize" matInput>
                             <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
@@ -324,10 +324,39 @@
 
 <div *ngIf="navigateToRun">
     <!-- <app-run-dashboard-report [reportId]="reportId" [reportMode]="reportMode" [queryString]="getQueryString()" [DashboardReportObj]="DashboardReportObj"></app-run-dashboard-report> -->
+    <div *ngIf="reportType !== 'Cross-Tab'">
+        <div *ngIf="reportHeader !== ''">
+            <div [innerHtml]="reportHeader" style="width: 60%; padding-left: 20%;">
+            </div>
+            <br/>
+            <br/>
+        </div>
     <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr"
-                    [hitCnt]="hitCnt"
-                    [queryString]="getQueryString()"
-                    [reportId]="reportId" [reportMode]="reportMode" [runAgain]="runReportAgain" [groupSelectValue]="groupSelectValue" [chartType]="chartType" [isGoBack]="downloadPrevReport" ></app-run-report>
+                        [chartType]="chartType"
+                        [groupSelectValue]="groupSelectValue"
+                        [hitCnt]="hitCnt" [isGoBack]="downloadPrevReport" [queryString]="getQueryString()"
+                        [reportId]="reportId" [reportMode]="reportMode" [reportType]="reportType"
+                        [runAgain]="runReportAgain"></app-run-report>
+            <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;"></div>
+
+    </div>
+    <div *ngIf="reportType === 'Cross-Tab'">
+        <div *ngIf="reportHeader !== ''">
+            <div [innerHtml]="reportHeader" style="width: 60%; padding-left: 20%;">
+            </div>
+            <br/>
+            <br/>
+        </div>
+        <app-run-cross-tab-report [groupSelectValue]="groupSelectValue" [hitCnt]="hitCnt"
+                                  [parentId]="reportId"
+                                  [queryString]="queryString"
+                                  [reportId]="reportId"
+                                  [reportMode]="reportMode"
+                                  [reportType]="reportType"
+                                  [isGoBack]="downloadPrevReport"></app-run-cross-tab-report>
+        <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;">
+        </div>
+    </div>
 </div>
 
 <div *ngIf="error == true">
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts
index ced812d2..a7b21de2 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts
@@ -11,7 +11,7 @@ import {HttpCacheService} from '../../../shared/services/cache.service';
     styleUrls: ['./run-report-form-fields.component.css']
 })
 export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
-    @Input('formFieldList') formFieldList: {}[];
+    @Input('formFieldList') formFieldList: any;
     @Input('reportId') reportId: string;
     staticFormFieldList: {}[] = [];
     formFieldListValueArr: any[];
@@ -29,7 +29,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
     triggerFormFieldArr = [];
     initialObject = {};
     formFieldGroupObjList: {}[] = [];
-    toggleFormFieldRenderArr: {}[] = [];
+    toggleFormFieldRenderArr:any;
     groupSelectValue = '';
     oldGroupSelectValue = '';
     unCommonCnt = 0;
@@ -65,6 +65,13 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
     downloadPrevReport = '';
     timeStampArray: any[];
     hoursArray : any[];
+    private orderSeqArray: any;
+    minDate:any;
+    maxDate:any;
+    reportHeader: string;
+    reportFooter: string;
+    reportType: string;
+    
     constructor(private _runService: RunService,
                 private _route: ActivatedRoute,
                 private _router: Router,
@@ -93,6 +100,10 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         this.downloadPrevReport = '';
         this.timeStampArray = [];
         this.hoursArray = [];
+        this.orderSeqArray = [];
+        this.reportHeader = '';
+        this.reportFooter = '';
+        this.reportType = '';
 
     }
 
@@ -148,6 +159,11 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         this.chartType = '';
         this.showRunButton = false;
         this.downloadPrevReport = '';
+        this.minDate = '';
+        this.maxDate = '';
+        this.reportType = '';
+        this.reportHeader='';
+        this.reportFooter='';
     }
 
     ngOnInit() {
@@ -158,7 +174,9 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         this.getHours();
         this._route.params.subscribe(params => {
             this.createNewObject();
+            if(params['reportId'] !== undefined){
             this.reportId = params['reportId'];
+            }
             const checkOfCache = this.httpCacheService.getPreviousId(this.reportId) || null;
             if (!checkOfCache) {
                 this.httpCacheService.clearCache();
@@ -194,9 +212,13 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         for (const ff of this.actualformFieldValues) {
             const formfiledArray = ff.split('=');
             const formFieldId = formfiledArray[0];
-            const formFieldObj = formfiledArray[1];
+            const formFieldObj = formfiledArray[1].replaceAll('||','/');
             this.finalQueryParamsObj[formFieldId] = formFieldObj;
         }
+        if(this.directCallQueryParams.includes('NULL')){
+            this.directCallQueryParams =  this.directCallQueryParams.replaceAll('NULL','');
+        }
+        this.directCallQueryParams =  this.directCallQueryParams.replaceAll('||','/')
         this.queryString = this.directCallQueryParams;
     }
 
@@ -206,6 +228,18 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                 this.reportName = responseDefPage['reportName'];
                 this.reportSubTitle = responseDefPage['reportSubTitle'];
                 this.chartType = responseDefPage['chartType'];
+                this.reportType = responseDefPage['reportType'];
+
+                if (responseDefPage['reportType'] === 'Cross-Tab' ||  responseDefPage['reportType'] === 'Linear' ) {
+                    if(responseDefPage['reportHeader'] !== undefined){
+                        this.reportHeader = responseDefPage['reportHeader'];
+                    }
+                   if(responseDefPage['reportFooter'] !== undefined){
+                    this.reportFooter = responseDefPage['reportFooter'];
+                   }
+
+                }
+
                 if (responseDefPage['reportType'] !== 'Dashboard') {
                     if (this.calledWithFormFields == false) {
                         this._runService.getReportData(this.reportId)
@@ -249,7 +283,57 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                             if (this.finalQueryParamsObj[ff.fieldId]) {
                                                 if (ff.validationType == 'DATE') {
                                                     const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    dateVal.toString().replace(/%2F/g, '/')
                                                     this.formFieldListValueMap.set(ff.fieldId, new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                    if (ff.rangeStartDate != null) {
+                                                        if (ff.rangeStartDate != '')
+                                                            this.minDate = this.getMinMaxDate(ff.rangeStartDate);
+                                                        else {
+                                                            this.minDate = '';
+                                                        }
+                                                    } else {
+                                                        this.minDate = '';
+                                                    }
+                    
+                                                    if (ff.rangeEndDate != null) {
+                                                        if (ff.rangeEndDate != '')
+                                                            this.maxDate = this.getMinMaxDate(ff.rangeEndDate);
+                                                        else {
+                                                            this.maxDate = '';
+                                                        }
+                                                    } else {
+                                                        this.maxDate = '';
+                                                    } 
+                    
+                                                    if(this.minDate == '' && this.maxDate ==''){
+                    
+                                                        if (ff.rangeStartDateSQL != null) {
+                                                            if (ff.rangeStartDateSQL != '')
+                                                                this.minDate = this.getMinMaxDate(ff.rangeStartDateSQL);
+                                                            else {
+                                                                this.minDate = '';
+                                                            }
+                                                        } else {
+                                                            this.minDate = '';
+                                                        }
+                        
+                                                        if (ff.rangeEndDateSQL != null) {
+                                                            if (ff.rangeEndDateSQL != '')
+                                                                this.maxDate = this.getMinMaxDate(ff.rangeEndDateSQL);
+                                                            else {
+                                                                this.maxDate = '';
+                                                            }
+                                                        } else {
+                                                            this.maxDate = '';
+                                                        } 
+                    
+                    
+                                                    }
+                                                    this.formFieldListValueMap.set(ff.fieldId+'_minDate', this.minDate);
+                                                    this.formFieldListValueMap.set(ff.fieldId+'_maxDate', this.maxDate);
+                                                    
+
+
                                                 } else if (ff.fieldType == 'LIST_MULTI_SELECT') {
                                                     const multiSelectArray = [];
                                                     let multiVal = this.finalQueryParamsObj[ff.fieldId];
@@ -267,7 +351,34 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                                         multiSelectArray.push(multiVal);
                                                     }
                                                     this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
-                                                } else {
+                                                } else if (ff.validationType == 'TIMESTAMP_SEC') {
+                                                    const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Sec']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
+                                                }
+                                                else if (ff.validationType == 'TIMESTAMP_MIN') {
+                                                    const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                }
+                                                else if (ff.validationType == 'TIMESTAMP_HOUR') {
+                                                    const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
+                                                }
+
+                                                else {
                                                     let multiVal = this.finalQueryParamsObj[ff.fieldId];
                                                     multiVal = multiVal.toString().replace(/%2F/g, '/');
                                                     multiVal = multiVal.toString().replace(/%20/g, ' ');
@@ -280,6 +391,29 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                                 if (ff.fieldType == 'LIST_MULTI_SELECT') {
                                                     const multiSelectArray = [];
                                                     this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                } else if (ff.validationType == 'TIMESTAMP_SEC') {
+
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push('');
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Sec']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                }
+                                                else if (ff.validationType == 'TIMESTAMP_MIN') {
+
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push('');
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                }
+                                                else if (ff.validationType == 'TIMESTAMP_HOUR') {
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push('');
+                                                    multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
                                                 } else {
                                                     this.formFieldListValueMap.set(ff.fieldId, '');
                                                 }
@@ -399,7 +533,33 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                                             multiSelectArray.push(multiVal);
                                                         }
                                                         this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
-                                                    } else {
+                                                    } else if (ff.validationType == 'TIMESTAMP_SEC') {
+                                                        const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Sec']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
+                                                    }
+                                                    else if (ff.validationType == 'TIMESTAMP_MIN') {
+                                                        const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    }
+                                                    else if (ff.validationType == 'TIMESTAMP_HOUR') {
+                                                        const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push(new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
+                                                    }
+                                                    else {
                                                         let multiVal = this.finalQueryParamsObj[ff.fieldId];
                                                         multiVal = multiVal.toString().replace(/%2F/g, '/');
                                                         multiVal = multiVal.toString().replace(/%20/g, ' ');
@@ -416,6 +576,29 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                                     if (ff.fieldType == 'LIST_MULTI_SELECT') {
                                                         const multiSelectArray = [];
                                                         this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    } else if (ff.validationType == 'TIMESTAMP_SEC') {
+
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push('');
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Sec']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    }
+                                                    else if (ff.validationType == 'TIMESTAMP_MIN') {
+
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push('');
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Min']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    }
+                                                    else if (ff.validationType == 'TIMESTAMP_HOUR') {
+                                                        const multiSelectArray = [];
+                                                        multiSelectArray.push('');
+                                                        multiSelectArray.push(this.finalQueryParamsObj[ff.fieldId + '_Hr']);
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+
                                                     } else {
                                                         this.formFieldListValueMap.set(ff.fieldId, '');
                                                     }
@@ -652,6 +835,21 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                 }
 
             }
+            let orderSeqArray = [];
+            for (let ff = 0; ff < this.formFieldList.length; ff++) {
+                let val = this.formFieldList[ff]['setOrderBySeq'];
+                orderSeqArray.push(val);
+            }
+
+            if (!(orderSeqArray.includes(null) || orderSeqArray.length !== new Set(orderSeqArray).size)) {
+                this.toggleFormFieldRenderArr = this.toggleFormFieldRenderArr.sort(function (a, b) {
+                    if ((a['setOrderBySeq']) === (b['setOrderBySeq'])) {
+                        return a;
+                    } else {
+                        return (a['setOrderBySeq']) - (b['setOrderBySeq']);
+                    }
+                });
+            }
         }
         if (this.firstRun) {
             this.saveGroupSelectValue = this.groupSelectValue;
@@ -675,6 +873,13 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         }
     }
 
+    getMinMaxDate(str: any){
+
+        let date = str;
+        let tempDate = new Date(date);
+        return date = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());
+    }
+
     fetchAndPopulateFormFields(respObj: any, ffReportId: string) {
         this._runService.getFormFieldGroupsData(ffReportId)
             .subscribe((responseFormFieldGroups) => {
@@ -683,6 +888,22 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                 this.formFieldGroupObjList = JSON.parse(responseFormFieldGroups['formFieldGroupsJSON']);
                 this.saveFormFieldGroups = JSON.parse(responseFormFieldGroups['formFieldGroupsJSON']);
                 this.formFieldList = respObj['formFieldList'];
+                let orderSeqArray = [];
+                for (let ff = 0; ff < this.formFieldList.length; ff++) {
+                    let val = this.formFieldList[ff]['setOrderBySeq'];
+                    orderSeqArray.push(val);
+                }
+
+                if (!(orderSeqArray.includes(null) || orderSeqArray.length !== new Set(orderSeqArray).size)) {
+                    this.formFieldList = this.formFieldList.sort(function (a, b) {
+                        if ((a['setOrderBySeq']) === (b['setOrderBySeq'])) {
+                            return a;
+                        } else {
+                            return (a['setOrderBySeq']) - (b['setOrderBySeq']);
+                        }
+                    });
+                }
+
                 if (this.formFieldList.length === 1 && this.formFieldList[0]['visible'] === false) {
                     this.showRunButton = false;
                 } else if (this.formFieldList.length > 0) {
@@ -733,7 +954,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                 for (let i = 0; i < this.formFieldList.length; i++) {
                     const formFieldObj = this.formFieldList[i];
                     if (formFieldObj['formFieldValues'] != null && this.calledWithFormFields != true) {
-                        if ((formFieldObj['validationType'] == 'DATE' && formFieldObj['formFieldValues'].length > 0) || formFieldObj['validationType'] == 'TIMESTAMP_SEC' || formFieldObj['validationType'] == 'TIMESTAMP_MIN' || formFieldObj['validationType'] == 'TIMESTAMP_HOUR') {
+                        if (formFieldObj['validationType'] == 'DATE' || formFieldObj['validationType'] == 'TIMESTAMP_SEC' || formFieldObj['validationType'] == 'TIMESTAMP_MIN' || formFieldObj['validationType'] == 'TIMESTAMP_HOUR') {
                             if (formFieldObj['validationType'] == 'TIMESTAMP_SEC') {
                                 const multiSelectArray = [];
 
@@ -785,8 +1006,58 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                                 }
                             }
                                else{
+                                   if(formFieldObj['formFieldValues'].length > 0){
                             const date = formFieldObj['formFieldValues'][0]['id'];
                             this.formFieldListValueMap.set(formFieldObj['fieldId'], new Date(date));
+                                   }else{
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], '');
+                                   }
+                                if (formFieldObj['rangeStartDate'] != null) {
+                                    if (formFieldObj['rangeStartDate'] != '')
+                                        this.minDate = this.getMinMaxDate(formFieldObj['rangeStartDate']);
+                                    else {
+                                        this.minDate = '';
+                                    }
+                                } else {
+                                    this.minDate = '';
+                                }
+
+                                if (formFieldObj['rangeEndDate'] != null) {
+                                    if (formFieldObj['rangeEndDate'] != '')
+                                        this.maxDate = this.getMinMaxDate(formFieldObj['rangeEndDate']);
+                                    else {
+                                        this.maxDate = '';
+                                    }
+                                } else {
+                                    this.maxDate = '';
+                                } 
+
+                                if(this.minDate == '' && this.maxDate ==''){
+
+                                    if (formFieldObj['rangeStartDateSQL'] != null) {
+                                        if (formFieldObj['rangeStartDateSQL'] != '')
+                                            this.minDate = this.getMinMaxDate(formFieldObj['rangeStartDateSQL']);
+                                        else {
+                                            this.minDate = '';
+                                        }
+                                    } else {
+                                        this.minDate = '';
+                                    }
+    
+                                    if (formFieldObj['rangeEndDateSQL'] != null) {
+                                        if (formFieldObj['rangeEndDateSQL'] != '')
+                                            this.maxDate = this.getMinMaxDate(formFieldObj['rangeEndDateSQL']);
+                                        else {
+                                            this.maxDate = '';
+                                        }
+                                    } else {
+                                        this.maxDate = '';
+                                    } 
+
+
+                                }
+                                this.formFieldListValueMap.set(formFieldObj['fieldId']+'_minDate', this.minDate);
+                                this.formFieldListValueMap.set(formFieldObj['fieldId']+'_maxDate', this.maxDate);
                             }
                         } else if (formFieldObj['fieldType'] == 'LIST_BOX' && formFieldObj['formFieldValues'].length > 0) {
                             let isAdded = false;
@@ -943,6 +1214,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
     }
 
     editReport(reportId: string) {
+        this.httpCacheService.clearCache();
         this._router.navigate(['v2/app/reports', 'Edit', reportId]);
     }
 
@@ -1003,12 +1275,18 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
 
     getTime(){
        for(let i=0; i<=59; i++){
+            if(i<=9){
+                this.timeStampArray.push('0'+i)
+            }else
         this.timeStampArray.push(i);
        }
     }
 
     getHours(){
         for(let i=0; i<=23; i++){
+            if(i<=9){
+                this.hoursArray.push('0'+i)
+            }else
          this.hoursArray.push(i);
         }
      }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.html
new file mode 100644
index 00000000..c237166f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.html
@@ -0,0 +1,98 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
+<div *ngIf="!showChart">
+    <div class="field-group">
+
+        <div class="filter-div" >
+            <mat-form-field><input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter Report Data">
+            </mat-form-field>
+        </div>
+        <div class="download-div" >
+            <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+            <span class="download-title"> Download:</span>
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/vnd.ms-excel', 'xls')"  placement="top" ngbTooltip="Download Upto 65,000"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+        </div>
+        <div class="pagination-div">
+            <mat-paginator [pageSizeOptions]="pageSize" showFirstLastButtons></mat-paginator>
+        </div>
+    </div>
+    <div class="app-data-table">
+        <div class="app-data-table-fixed-height">
+            <div class="example-container">
+                <table [dataSource]="dataSource" mat-table>
+                    <div *ngFor="let keys of displayedColumns; let i = index">
+                        <ng-container matColumnDef="{{keys}}">
+                            <th *matHeaderCellDef mat-header-cell>{{displayedColumns[i]}}</th> 
+                            <td *matCellDef="let row" mat-cell [ngStyle]="setStyle(row[keys])">
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                    <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                       [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToFeedback'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                    <a (click)="linkToFeedback(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                       [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                    <a (click)="linkToMail(row[keys].split('|')[1])"
+                                       [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToMap'">
+                                    <a (click)="linkToMap(row[keys].split('|')[1])"
+                                       [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToFeedback' && row[keys].split('|')[0] !== 'linkToMail'
+                                && row[keys].split('|')[0] !== 'clickToDelete' && row[keys].split('|')[0] !== 'clickToResubmit'
+                                && row[keys].split('|')[0] !== 'linkToMap'
+                                && row[keys].split('|')[0] !== 'clickToDownload' && row[keys].split('|')[0]!== 'clickToCheckBox' &&  row[keys].split('|')[0]!== 'isComment'
+                                 &&  row[keys].split('|')[0]!== 'isImage' &&  row[keys].split('|')[0]!== 'isApproval' && row[keys].split('|')[0] != 'clickToRevert'">{{row[keys].split('|')[0]}}&nbsp;</div>
+                            </td>
+                            <td *matFooterCellDef align="center"
+                                mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                        </ng-container>
+                    </div>
+
+                    <tr *matHeaderRowDef="displayedColumns; sticky: true;"
+                        mat-header-row></tr>
+                    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                    <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="showChart" align="center">
+    <iframe #iframe height="550px" style="border: none" width="100%"></iframe>
+</div>
+
+<style scoped>
+    :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
+        min-height: 30px;
+        height: 30px;
+    }
+
+    :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
+        font-size: 14px;
+    }
+
+    :host ::ng-deep  .mat-paginator, .mat-paginator-page-size .mat-select-trigger {
+        font-size: 14px;
+    }
+
+    :host ::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
+        color: black;
+        opacity: 0;
+    }
+
+    :host ::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer {
+        transform: rotate(-45deg);
+        color: black;
+    }
+    :host ::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer {
+        transform: rotate(45deg);
+        color: black;
+    }
+
+</style>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.scss
new file mode 100644
index 00000000..525b57ee
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.scss
@@ -0,0 +1,1398 @@
+.approval-img{
+    height:25px;
+    width:25px
+}
+.submit-approval-btn{
+    display: flex;
+    margin-top: 5px;
+}
+.submit-approval-check-box{
+    margin-top: 10px;
+}
+
+.submit-rejection-btn{
+    display: flex;
+    margin-top: 5px;
+}
+.submit-rejection-check-box{
+    margin-top: 20px;
+}
+.checkbox-reject{
+    margin-left: 10px;
+    margin-right: 4px;
+    margin-top: 4px;
+}
+.gridster-item-content{
+    overflow-y: scroll;
+    overflow-x: scroll;
+    overflow: scroll;
+}
+
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+}
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    margin: 6px;
+    margin-top: 40px;
+    border: 6px solid #006496;
+    border-radius: 80%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #006496 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.btn-auto-upload{
+    font-size: 15px;
+    margin-bottom: 5px;
+    margin-left:250px;
+}
+
+.div-auto-upload{
+    display: contents;
+}
+mat-icon{
+    color: #006496;
+    cursor: pointer;
+}
+.mat-icon-delete{
+    color: #006496;
+    cursor: pointer;
+}
+
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle; }
+
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    appearance: button;
+    cursor: pointer; }
+
+
+.defaultFontSize1{
+    font-size: 16px;
+}
+
+.defaultFontSize{
+    font-size: 15px;
+}
+.boxMargin{
+
+    width: auto;
+}
+
+td.mat-cell{
+    padding-left: 3px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-right: 1px solid #999;
+    border-left: 1px solid #999;
+}
+
+mat-button-toggle{
+    display: block;
+    width: 400px;
+    border-radius: 5px;
+}
+
+
+.tab-content{
+    margin-right: 20px;
+    color: rgb(0, 0, 0);
+}
+
+.stdForm{
+    margin-left: 20px;
+}
+
+.field-group {
+    position: relative;
+    display: block;
+}
+
+
+input {
+    width: 400px;
+    height: 35px;
+}
+
+label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
+    margin-top: 5px;
+}
+
+
+.checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.pla-img{
+    cursor: pointer;
+}
+
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer; }
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer; }
+
+input[type=search] {
+    -webkit-appearance: textfield; }
+
+input[type=search]:-webkit-search-cancel-button,
+input[type=search]:-webkit-search-decoration {
+    -webkit-appearance: none; }
+
+
+
+[class*="icon-primary-"],
+.nav-links a:after,
+.bellyband-link a:after,
+.breadcrumb > li:after,
+.checkbox input:checked + .skin:after,
+.checkbox input.indeterminate + .skin:after,
+.checkbox input:indeterminate + .skin:after,
+.selectWrap.large:before,
+.form-row.error .error-msg:before,
+.close:before,
+.reset-field:before,
+.cssIcon-globe:before,
+.selectWrap:after {
+    color: #0568ae;
+    left: 6px;
+    top: -3px;
+    width: 2px;
+    height: 3px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);}
+
+[class*="icoWeather-"], [class*="icoTrans-"], [class*="icoBubble-"], [class*="icoRetail-"], [class*="icoPeople-"], [class*="icoNumslets-"], [class*="icoLocation-"], [class*="icoHealthcare-"], [class*="icoDocuments-"], [class*="icoDevices-"], [class*="icoDatanetwork-"], [class*="icoControls-"], [class*="icoBuilding-"], [class*="icoArrows-"] {
+    color: #0568ae;
+    display: inline-block;
+    font-style: normal;
+    font-size: 20px;
+    font-weight: normal;
+    font-variant: normal;
+    font-style: normal;
+    width: 20px;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    speak: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    vertical-align: middle; }
+
+[class*="icon-primary-"]:before,
+[class*="icon-primary-"]:after {
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 1em;
+    height: 1em;
+    position: relative;
+    top: 0;
+    left: 0;
+    vertical-align: middle;
+    width: 1em; }
+
+
+.checkbox {
+    position: relative;
+    min-height: 24px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 1rem;
+}
+.checkbox input {
+    -webkit-tap-highlight-color: transparent;
+    height: 20px;
+    margin-left: 20px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px; }
+.checkbox input:focus + .skin {
+    border-color: #0568ae; }
+.checkbox input:focus + .skin:before {
+    content: "";
+    height: 34px;
+    left: -6px;
+    top: -6px;
+    outline: 1px dotted #000000;
+    position: absolute;
+    width: 34px; }
+.checkbox input:checked:not(:disabled) + .skin {
+    background-color: #0568ae;
+    border-color: #0568ae; }
+.checkbox input:checked:disabled + .skin:after {
+    color: #5A5A5A; }
+.checkbox input:checked + .skin:after {
+    height: 20px;
+    width: 10px;
+    background-color: transparent;
+    font-size: 23.4px;
+    color: #FFFFFF;
+    line-height: 21px; }
+.checkbox input:disabled + .skin {
+    cursor: not-allowed;
+    background-color: #d2d2d2;
+    border-color: #d2d2d2;
+    color: #666666; }
+.checkbox input:disabled + .skin + span {
+    cursor: not-allowed;
+    color: #666666; }
+.checkbox input:invalid + .skin {
+    border: solid 1px #cf2a2a; }
+.checkbox input:indeterminate + .skin:after {
+    background-color: transparent;
+    font-size: 25px;
+    color: #0574ac;
+    content: "\e920"; }
+.checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0; }
+.checkbox span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px; }
+.checkbox label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+.checkbox input {
+    z-index: 9999; }
+.checkbox input.indeterminate + .skin:after {
+    font-size: 22px;
+    color: #0568ae; }
+.b2b-tree-checkbox a > span.nodeIcon.end {
+    margin-top: 10px; }
+.b2b-tree-checkbox a:only-child {
+    color: #0574ac; }
+.b2b-tree-checkbox a:only-child > span.nodeIcon {
+    left: -11px;
+    border-radius: 50%;
+    line-height: 7px;
+    top: 0; }
+.b2b-tree-checkbox a:only-child > span.nodeIcon > i {
+    background-color: inherit;
+    background: #fff; }
+.b2b-tree-checkbox a > span.nodeIcon > i.icon-primary-circle {
+    background-color: inherit;
+    background: #fff;
+    font-size: 5px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span {
+    left: -11px;
+    border-radius: 50%;
+    line-height: 12px;
+    top: 0px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span.end {
+    margin-top: 0px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span i.icon-primary-circle {
+    top: 8px; }
+.b2b-tree-checkbox ul li:last-child > a:only-child > span {
+    height: 34px;
+    background-color: #fff; }
+.b2b-tree-checkbox li a + ul {
+    height: 0;
+    overflow: hidden; }
+.b2b-tree-checkbox li a.active + ul {
+    height: auto; }
+.b2b-tree-checkbox li a.grp {
+    font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+.b2b-tree-checkbox span.end {
+    left: -6px !important; }
+.b2b-tree-checkbox .checkbox {
+    margin-bottom: 0px;
+    margin-top: 2px;
+    font-size: 14px; }
+.b2b-tree-checkbox .checkbox input:indeterminate + .skin:after {
+    content: "\2014";
+    padding-left: 2px;
+    font-family: inherit !important;
+    line-height: inherit !important; }
+
+.b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row .checkbox-selectall {
+    margin: 0px 0 0 24px !important; }
+
+.filter-container .checkbox .icon-primary-spinner {
+    height: 24px;
+    position: absolute;
+    width: 24px; }
+
+
+textarea {
+    display: block;
+    width: 400px;
+    max-width: 50%;
+    padding: 15px;
+}
+select {
+    margin-right: -1;
+    max-width: 400px;
+    height: 36px;
+    line-height: 25px;
+    width: 400px;
+    background-color: #95959521; }
+
+.selectWrap.disabled .icon-primary-down {
+    color: #d6d6d6; }
+
+.selectWrap.disabled input.awd-select {
+    z-index: 0;
+    padding: 10px 45px 10px 15px;
+    text-indent: 0; }
+
+.selectWrap.disabled button.awd-select {
+    z-index: 0;
+    text-indent: 15px; }
+
+.selectWrap.disabled:after {
+    color: #5A5A5A;
+    cursor: not-allowed; }
+
+input.awd-select {
+    background-color: transparent;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+    color: #333333;
+    display: block;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    height: 36px;
+    line-height: 0;
+    margin-bottom: 0;
+    position: relative;
+    text-align: left;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    padding: 12px 45px 8px 15px;
+    user-select: none; }
+input.awd-select:focus {
+    border-color: #0568ae !important;
+    text-overflow: ellipsis;
+    padding-right: 45px; }
+
+button.awd-select {
+    background-color: transparent;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+    color: #333333;
+    display: block;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    height: 36px;
+    line-height: 36px;
+    margin-bottom: 0;
+    position: relative;
+    text-align: left;
+    top: 0;
+    width: 100%;
+    z-index: 10; }
+button.awd-select:not(.large) {
+    text-indent: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+    text-overflow: ellipsis; }
+button.awd-select img {
+    height: 26px;
+    margin-right: 7px;
+    margin-top: -10px;
+    position: relative;
+    top: 2px;
+    vertical-align: text-bottom; }
+button.awd-select:focus {
+    border-color: #0568ae !important; }
+button.awd-select i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000; }
+
+button.awd-select.large {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle; }
+button.awd-select.large img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px; }
+
+.selectWrap.large {
+    height: 60px; }
+.selectWrap.large .awd-select-list-item {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle; }
+.selectWrap.large .awd-select-list-item img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px;
+    top: 10px; }
+
+.inputWrap {
+    border-radius: 6px;
+    position: relative;
+    height: 36px;
+    line-height: 44px;
+    display: block;
+    margin: 0;
+}
+
+button.awd-select.active {
+    border-radius: 6px 6px 0 0; }
+button.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+input.awd-select.active {
+    border-radius: 6px 6px 0 0; }
+input.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+.selectWrapper {
+    position: relative; }
+
+span.selectWrap input[readonly]:focus {
+    color: transparent;
+    text-shadow: 0 0 0 #000; }
+
+.isIE.ds2-no-colors .awd-select:focus {
+    outline: 1px dashed transparent; }
+
+.awd-select-list {
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+    border-radius: 0 0 6px 6px;
+    position: absolute;
+    border: 1px solid #d2d2d2;
+    border-top: 0;
+    padding: 0;
+    background-color: #f2f2f2;
+    z-index: 1000;
+    width: 100%;
+    max-height: 320px;
+    overflow-y: auto; }
+
+.awd-select-list-item {
+    cursor: pointer;
+    height: 100%;
+    min-height: 36px;
+    line-height: 20px;
+    overflow: hidden;
+    padding: 8px 15px;
+    position: relative;
+    z-index: 1000; }
+.awd-select-list-item:hover {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+.awd-select-list-item:focus {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+.awd-select-list-item img {
+    margin-top: 0;
+    margin-right: 7px;
+    height: 26px;
+    width: 26px; }
+
+.selectWrap {
+    border-radius: 6px;
+    position: relative;
+    height: 36px;
+    line-height: 28px;
+    display: block;
+    margin: 0;
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+.selectWrap:not(.large) .awd-select-list-item:first-child {
+    margin-top: 15px; }
+.selectWrap:not(.large) .awd-select-list-item:last-child {
+    margin-bottom: 15px; }
+.selectWrap .icon-primary-down {
+    font-size: 23px;
+    margin-top: -11px;
+    position: absolute;
+    right: 4px;
+    top: 50%; }
+.selectWrap + [aria-expanded="true"] {
+    padding-bottom: 9px;
+    padding-top: 20px; }
+
+.awd-select-list-item[data-hover="true"] {
+    background-color: #d2d2d2; }
+
+span input.awd-select {
+    width: 100%;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    padding-right: 45px; }
+
+li.optgroup-wrapper {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    cursor: default !important;
+    padding: 0px 15px; }
+li.optgroup-wrapper:first-child {
+    padding-top: 10px; }
+li.optgroup-wrapper:hover {
+    background-color: #f2f2f2; }
+
+ul.optgroup {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    cursor: pointer !important;
+    margin: 0 -15px; }
+ul.optgroup li {
+    padding: 0 0 0 33px; }
+
+label + .selectWrap {
+    margin-top: 4px; }
+
+.selectorModule {
+    border-radius: 6px;
+    position: relative;
+    height: 36px;
+    line-height: 28px;
+    display: block;
+    margin: 0;
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+
+.group .selectWrap {
+    margin: 0 0 10px 0; }
+
+select.awd-select {
+    position: relative;
+    top: 0;
+    left: 0;
+    font-size: 16px;
+    z-index: 1010;
+    height: 33px;
+    min-width: 100%;
+    opacity: 0.01; }
+select.awd-select > optgroup {
+    padding-left: 8px;
+    font-style: normal;
+    margin-top: 10px; }
+select.awd-select > optgroup:first-child {
+    margin-top: 0; }
+select.awd-select > optgroup > option {
+    padding-left: 8px; }
+select.awd-select > option {
+    padding-left: 8px; }
+select.awd-select + span {
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    height: 35px;
+    line-height: 0;
+    padding: 18px 45px 15px 15px;
+    width: 100%;
+    font-size: 1.6rem;
+    padding-right: 45px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+select.awd-select + span > i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000; }
+select.awd-select + span > i:before {
+    left: 1px;
+    position: absolute;
+    top: -1px; }
+select.awd-select:focus + span {
+    border-color: #0568ae; }
+
+.isIE select.awd-select + span {
+    line-height: 1; }
+
+[data-default-option="true"] {
+    color: #767676 !important;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.placeholdercolor {
+    color: #767676 !important;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.filterTank button.awd-select {
+    border-color: #d2d2d2;
+    background-color: #333333;
+    color: #FFFFFF;
+    color: #333333; }
+.filterTank button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg button.awd-select {
+    border-color: #d2d2d2;
+    background-color: #333333;
+    color: #FFFFFF;
+    color: #333333; }
+.utility-bg button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select + span {
+    border-color: #d2d2d2;
+    border-color: #d2d2d2;
+    background-color: #333333;
+    background-color: #333333;
+    color: #FFFFFF;
+    color: #FFFFFF; }
+.utility-bg select.awd-select + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:focus + span {
+    border-color: #d2d2d2;
+    border-color: #d2d2d2;
+    background-color: #333333;
+    background-color: #333333;
+    color: #FFFFFF;
+    color: #FFFFFF; }
+.utility-bg select.awd-select:focus + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:hover + span {
+    border-color: #d2d2d2;
+    border-color: #d2d2d2;
+    background-color: #333333;
+    background-color: #333333;
+    color: #FFFFFF;
+    color: #FFFFFF; }
+.utility-bg select.awd-select:hover + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+input.awd-select[disabled] {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+input.awd-select[disabled] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+button.awd-select[disabled] {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+button.awd-select[disabled]:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+select.awd-select[disabled] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled]:focus + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+select.awd-select[disabled]:hover + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+input.awd-select[disabled="disabled"] {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+input.awd-select[disabled="disabled"] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+select.awd-select[disabled="disabled"] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+select.awd-select[disabled="disabled"] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:focus + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+select.awd-select[disabled="disabled"]:focus + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:hover + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+select.awd-select[disabled="disabled"]:hover + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+.ddexpand-wrapper > h2 {
+    margin-bottom: 11px; }
+.ddexpand-wrapper > h2 + p {
+    margin-bottom: 4px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .form-row {
+    margin-top: 11px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .row + .row .form-row {
+    margin-top: 14px; }
+
+.modal .awd-select-list {
+    z-index: 1060 !important; }
+
+.form-row.error button.awd-select.active:focus {
+    border-color: #cf2a2a !important; }
+
+.form-row.error input.awd-select.active:focus {
+    border-color: #cf2a2a !important; }
+
+.awd-module-list .module-list-item[aria-selected="true"] {
+    background-color: #f2f2f2; }
+
+li.module-list-item[aria-selected="true"]:before {
+    color: #0568ae;
+    display: inline-block;
+    font-family: "icoControls" !important;
+    font-style: normal;
+    font-size: 20px;
+    font-weight: normal;
+    font-variant: normal;
+    height: 1em;
+    margin-right: 7px;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    speak: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    width: 1em;
+    content: "\e907";
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 2em;
+    height: 1em;
+    position: absolute;
+    top: 20px;
+    right: 0px;
+    vertical-align: middle;
+    width: 1em;
+    color: #007a3e; }
+
+@media (min-width: 768px) {
+    span[class*="large"] {
+        max-width: 370px; }
+    .large {
+        max-width: 370px; } }
+
+@media (max-width: 767px) {
+    .selectWrap.large:after {
+        right: 5px; }
+    .selectWrap.large .awd-select-list-item {
+        padding-right: 41px; }
+    .selectWrap + div > h4 {
+        margin-bottom: 0;
+        font-size: 16px; } }
+input.awd-select {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text; }
+
+.checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+i, em {
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+}
+
+
+
+.card{
+    border-radius: 5px;
+}
+
+.card-header{
+    height: 50px;
+}
+
+.card-body{
+    height: 150px;
+}
+
+.card-footer{
+    height: 50px;
+}
+
+.dialog__close-btn {
+    border: 0;
+    background: #087ac2;
+    color: #ffffff;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 1.2em;
+    display: block;
+    border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;
+}
+
+
+.full-width-table {
+    width: 100%;
+}
+
+
+.app-data-table {
+    margin-top: 35px;
+}
+
+.app-data-table-fixed-height {
+    overflow: scroll;
+    width: 100%;
+    max-height: 750px;
+}
+
+th{
+    background-color: #2125299c;
+    color: rgb(255, 255, 255);
+    font-size: 15px;
+    border-radius: 2px;
+    height: 35px;
+}
+
+tr:nth-child(even) {
+    background-color: #dddddd;
+    font-size: 2px;
+    height: 35px;
+    border-radius: 4px;
+
+}
+
+tr:nth-child(odd) {
+    font-size: 2px;
+    height: 35px;
+    border-radius: 4px;
+}
+
+
+.card{
+    border-radius: 10px;
+
+}
+
+.card-header{
+    height: 80px;
+}
+
+.card-body{
+    height: 150px;
+}
+
+.card-footer{
+    height: 55px;
+    margin-right: 10px;
+}
+
+.dialog__close-btn {
+    border: 0;
+    background: #087ac2;
+    color: #ffffff;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    font-size: 1em;
+    display: block;
+    border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;
+}
+
+label {
+    float: left;
+    width: 24em;
+    margin-right: 2em;
+    text-align: right;
+}
+
+
+.btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+.btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+
+a.btn {
+    vertical-align: middle; }
+a.btn:hover {
+    text-decoration: none; }
+
+.field-group + .btn {
+    margin-left: 20px; }
+
+.btn-primary {
+    border-color: #ea7400 transparent #d16500;
+    background-color: #ea7400 transparent #d16500;
+    background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
+    color: #ffffff;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-weight: bold; }
+.btn-primary:hover {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+.btn-primary:focus {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+.btn-primary:active {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+
+.btn-arrow {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 1.6rem;
+    font-weight: normal;
+    background-color: transparent;
+    border: none;
+    padding: 5px 0 0;
+    top: -4px;
+    color: #333333;
+    position: relative; }
+.btn-arrow:hover {
+    text-decoration: underline; }
+.btn-arrow:hover .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+.btn-arrow:hover .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+.btn-arrow:hover .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+.btn-arrow:hover .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+.btn-arrow:focus {
+    text-decoration: underline;
+    outline: 1px dotted #666; }
+.btn-arrow:focus .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+.btn-arrow:focus .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+.btn-arrow:focus .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+.btn-arrow:focus .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+.btn-arrow:active .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+.btn-arrow:active .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+.btn-arrow:active .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+.btn-arrow:active .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+.btn-arrow .btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+.btn-arrow .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-arrow .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-arrow .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-arrow::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+.btn-arrow .btn {
+    border: 1px solid transparent;
+    border-radius: 100%;
+    height: 36px;
+    margin-bottom: 0;
+    margin-right: 7px;
+    max-width: 36px;
+    min-width: 20px;
+    padding: 0;
+    margin-top: -4px;
+    vertical-align: middle;
+    width: 36px; }
+.btn-arrow .btn .icon-primary-left {
+    bottom: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    line-height: 0;
+    position: absolute;
+    right: 0;
+    text-indent: 0;
+    top: 0; }
+.btn-arrow .btn .icon-primary-left:before {
+    position: absolute;
+    font-size: 1.6rem;
+    left: 1px;
+    top: 9px; }
+.btn-arrow .btn .icon-primary-right {
+    bottom: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    line-height: 0;
+    position: absolute;
+    right: 0;
+    text-indent: 0;
+    top: 0;
+    color: #ffffff; }
+.btn-arrow .btn .icon-primary-right:before {
+    position: absolute;
+    font-size: 1.6rem;
+    left: 17px;
+    top: 9px; }
+.btn-arrow .btn.btn-primary .icon-primary-left {
+    color: #fff; }
+.btn-arrow .btn.btn-primary .icon-primary-right {
+    color: #fff; }
+.btn-arrow .btn.btn-alt .icon-primary-left {
+    color: #fff; }
+.btn-arrow .btn.btn-alt .icon-primary-right {
+    color: #fff; }
+.btn-arrow .btn.btn-secondary {
+    border: 1px solid #d2d2d2; }
+.btn-arrow .btn.btn-secondary .icon-primary-left {
+    color: #0568ae; }
+.btn-arrow .btn.btn-secondary .icon-primary-right {
+    color: #0568ae; }
+.btn-arrow .btn.btn-small {
+    height: 20px;
+    max-width: 20px;
+    min-width: 20px;
+    width: 20px;
+    top: -1px; }
+.btn-arrow .btn.btn-small .icon-primary-left:before {
+    font-size: 5px;
+    top: 4px;
+    left: 0; }
+.btn-arrow .btn.btn-small .icon-primary-right:before {
+    font-size: 5px;
+    top: 4px;
+    left: 10px; }
+.btn-arrow .btn.btn-large .icon-primary-left:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+.btn-arrow .btn.btn-large .icon-primary-right:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+
+.btn-secondary {
+    border: 1px solid #d2d2d2;
+    background-color: #f2f2f2;
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    color: #0568ae;
+    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+    padding: 14px 18px 11px 17px; }
+.btn-secondary:hover {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+.btn-secondary:focus {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+.btn-secondary:active {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+
+.btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+.btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+.btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+.btn-specialty {
+    border-color: #008744 transparent #007a3e;
+    background-color: #007a3e;
+    background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
+    color: #ffffff; }
+.btn-specialty:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+.btn-specialty:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+.btn-specialty:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+
+.btn-clear {
+    background: transparent !important;
+    border-color: transparent !important;
+    font-weight: normal;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    box-shadow: none;
+    text-decoration: none;
+    color: #0568ae; }
+.btn-clear:focus {
+    text-decoration: underline; }
+.btn-clear:hover {
+    text-decoration: underline; }
+
+.downloadImg{
+    height: 25px ;
+    width: 25px;
+}
+
+#reportTableSize{
+    width: 99%;
+    max-height: 750px;
+}
+
+.gridster-color {
+    background: rgba(94, 94, 94, 0.7);
+}
+
+
+.download-div{
+    width: 20%;
+    float: left;
+    height: 30px;
+}
+
+.pagination-div{
+    width: 60%;
+    float: right;
+    height: 30px;
+}
+
+.download-title{
+    padding-right: 10px;
+    font-size: 14px;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.filter-div{
+    height: 30px;
+    width: 20%;
+    float: left;
+}
+.btn-back {
+    padding-bottom: 5px;
+    font-size: 15px;}
+
+a{
+    color: darkblue;
+    /*font-weight: normal;*/
+    text-decoration: underline;
+}
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts
new file mode 100644
index 00000000..dcbc4835
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts
@@ -0,0 +1,444 @@
+import {Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core';
+import {GridsterConfig, GridType, GridsterItem} from 'angular-gridster2';
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+
+import {MatSort} from '@angular/material';
+import {Router} from '@angular/router';
+import {RunService} from '../../run.service';
+import {FormControl} from '@angular/forms';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {environment} from '../../../../../environments/environment';
+import {DisplayHtml} from '../../../../pages/analytics/Report_List/Report/display-html';
+import {ErrorModalComponent} from '../../../../modals/error-modal/error-modal.component';
+import {DashboardReportService} from '../run-dashboard-report/dashboard-report.service';
+import {HttpCacheService} from '../../../../shared/services/cache.service';
+
+export interface PeriodicElement {
+
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [{}];
+
+@Component({
+    selector: 'app-run-cross-tab-report',
+    templateUrl: './run-cross-tab-report.component.html',
+    styleUrls: ['./run-cross-tab-report.component.scss']
+})
+export class RunCrossTabReportComponent implements OnInit {
+
+    @Input('reportId') inputReportId: string;
+    @Input('queryString') queryString: string;
+    @Input('hitCnt') hitCnt: number;
+    @Input('reportType') reportType: string;
+    @Input('reportMode') reportMode: string;
+    @Input('parentId') parentId: string;
+    @Input('groupSelectValue') groupSelectValue: string;
+    @Input('isGoBack') isGoBack: string;
+    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+    @ViewChild('iframe') iframe: ElementRef;
+    options: GridsterConfig;
+    dashboard: Array<GridsterItem> = [];
+    displayedColumns: string[];
+    IncomingReportId: string;
+    displayedColumnsArr: string[];
+    displayedRowObj: {}[];
+    formFieldPresent: boolean;
+    showSpinner: boolean;
+    formFieldList: {}[];
+    isReady: boolean;
+    responseFormFieldListLength: number;
+    NEWdisplayedColumns: string[];
+    initCnt: number;
+    reportName: string;
+    showDashboardReport: boolean;
+    checkCnt: number;
+    initialQueryString: string;
+    initCounter: number;
+    runButtonHitCounter: number;
+    showChart = false;
+    displayColumValue: string;
+    displayTotal: any[];
+    nodeName: string;
+    uploadId: string;
+    ecgi: string;
+    lac: string;
+    cid: string;
+    commentCtrl = new FormControl();
+    replaceDisplayValue: String;
+    saveResponseObj: any;
+    customFieldsDataArray: any[];
+    private chartRunUrl: string;
+    pageSize = [];
+     download_in_progress = false;
+
+    constructor(private _dashboardReportService: DashboardReportService,
+                private _router: Router,
+                private _runService: RunService,
+                private ngModal: NgbModal,
+                private changeDetectorRefs: ChangeDetectorRef,
+                public ngbModal: NgbModal,
+                private httpCacheService: HttpCacheService) {
+        this.initCounter = 0;
+        this.runButtonHitCounter = 0;
+        this.pageSize = [];
+    }
+
+    ngOnInit() {
+        this.initialQueryString = this.queryString;
+        this.initCounter++;
+        this.runButtonHitCounter = this.hitCnt;
+        if (this.reportType === 'Chart') {
+            this.showChart = true;
+        }
+        this.initialProcesses();
+    }
+
+    initialProcesses() {
+        // this.dataSource.paginator = this.paginator;
+    }
+
+    ngOnChanges() {
+        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) {
+            this.initialQueryString = this.queryString;
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialProcesses();
+            this.afterViewInitProcesses();
+        } else {
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialQueryString = this.queryString;
+        }
+    }
+
+    ngAfterViewInit() {
+        this.afterViewInitProcesses();
+    }
+
+    afterViewInitProcesses() {
+        if (this.showChart) {
+            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+            this.showSpinner = false;
+        } else {
+
+            this.displayedColumnsArr = [];
+            this.displayedRowObj = [];
+            this.displayedColumns = [];
+            this.formFieldList = [];
+            this.showSpinner = true;
+            this.isReady = false;
+            this.NEWdisplayedColumns = [];
+            this.displayTotal = [];
+            if (localStorage.getItem(this.inputReportId)) {
+                this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
+                localStorage.removeItem(this.inputReportId);
+            } else {
+                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue)
+                    .subscribe((response) => {
+                        if (response['errormessage']){
+                            this.openErrorModel(response['errormessage']);
+                            this.showSpinner = false;
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            this.postFetchingReportDataFn(response);
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showSpinner = false;
+                        this.changeDetectorRefs.detectChanges();
+                    });
+            }
+        }
+    }
+
+    postFetchingReportDataFn(response: any) {
+        this.displayedColumnsArr = [];
+        this.displayedColumns = [];
+        this.customFieldsDataArray = [];
+        this.formFieldPresent = false;
+        this.responseFormFieldListLength = 0;
+        this.reportName = response['reportName'];
+        let rdc_cntr = 0;
+        while (response['reportDataColumns'][rdc_cntr]) {
+            const columnTitle = response['reportDataColumns'][rdc_cntr]['columnTitle'];
+            const columnId = response['reportDataColumns'][rdc_cntr]['colId'];
+            this.displayedColumnsArr.push(columnTitle + '||' + columnId);
+            this.displayedColumns.push(columnId);
+            rdc_cntr++;
+        }
+
+
+        /*        let totalCnt = 0;
+                while (response['reportTotalDataRows'][totalCnt]) {
+                    this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+                    totalCnt++;
+                }*/
+        this.customFieldsDataArray = response['reportDataRows'];
+        let rdr_cntr = 0;
+        while (response['reportDataRows'][rdr_cntr]) {
+            let dca_cntr = 0;
+            const obj = {};
+            const reportDataRows = response['reportDataRows'][rdr_cntr];
+            while (this.displayedColumnsArr[dca_cntr]) {
+                const rowColumnId = this.displayedColumnsArr[dca_cntr].split('||')[1];
+                if (reportDataRows[rowColumnId]) {
+                    let drillDownHtml = '';
+                    let displayValue = '';
+                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                    displayValue = reportDataRows[rowColumnId]['displayValue'];
+                    if (drillDownHtml !== null &&
+                        drillDownHtml.length > 0 &&
+                        !displayValue.includes('linkToReport')) {
+                        const value = this.convertToLinkToReport(drillDownHtml);
+                        if (value.length > 0) {
+                            let valueCount = [];
+                            let valueDisplay = '';
+                            valueCount = reportDataRows[rowColumnId]['displayValue'].split('|');
+                            if (valueCount.length > 1 && this.reportType === 'Cross-Tab') {
+                                for (let count = 0; count < valueCount.length - 1; count++) {
+                                    valueDisplay = valueDisplay + valueCount[count];
+                                }
+                                this.replaceDisplayValue = value + ',' + valueDisplay;
+                            } else {
+                                this.replaceDisplayValue = value + ',' + reportDataRows[rowColumnId]['displayValue'];
+                            }
+                        } else {
+                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                        }
+                    } else {
+                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                    }
+                    let displayObj: DisplayHtml = new class implements DisplayHtml {
+                        'background-color': string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'text-align': string;
+                        'text-decoration': string;
+                        color: string;
+                    };
+                    if (this.reportType === ('Cross-Tab') && reportDataRows[rowColumnId]['displayValueHtml'].includes('|')) {
+                        let crossTabDisplayValArr = [];
+                        crossTabDisplayValArr = reportDataRows[rowColumnId]['displayValueHtml'].split('|');
+                        if (crossTabDisplayValArr.length > 1) {
+                            displayObj['background-color'] = crossTabDisplayValArr[1];
+                        }
+                    }
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) {
+                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
+                    }
+                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')
+                        || this.replaceDisplayValue.includes('linkToMap')) {
+                        let replaceValArr = [];
+                        if (this.replaceDisplayValue.includes('linkToReport')) {
+                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|');
+                            replaceValArr = obj[reportDataRows[rowColumnId]['colId']].split('|');
+                            if (replaceValArr.length > 4) {
+                                const dispValue = replaceValArr[3] + ',' + replaceValArr[4];
+                                obj[reportDataRows[rowColumnId]['colId']] = obj[reportDataRows[rowColumnId]['colId']].replace(replaceValArr[3] + '|' + replaceValArr[4], replaceValArr[3] + ',' + replaceValArr[4]) + '|' + JSON.stringify(displayObj);
+                            } else {
+                                obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                                    + '|' + JSON.stringify(displayObj);
+                            }
+                        } else {
+                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                                + '|' + JSON.stringify(displayObj);
+                        }
+                    } else {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split('comment-break-line').join('')
+                            + '|' + JSON.stringify(displayObj);
+                    }
+                }
+                dca_cntr++;
+            }
+            this.displayedRowObj.push(obj);
+            rdr_cntr++;
+        }
+        this.pageSize = response['pageSize'];
+/*        for (let cntr = 0; cntr < this.displayedColumnsArr.length; cntr++) {
+            const columnArrId = this.displayedColumnsArr[cntr].split(',')[1];
+            this.displayedColumns.push(columnArrId);
+        }*/
+        this.pageSize = [response['pageSize']];
+        this.showSpinner = false;
+        this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
+        this.dataSource.paginator = this.paginator;
+        this.changeDetectorRefs.detectChanges();
+    }
+
+    linkToReport(reportID: string, queryParameters: string) {
+        if (!this.httpCacheService.getPreviousId(this.inputReportId)) {
+            this.httpCacheService.setPreviousId(this.inputReportId, 'parent');
+        }
+        this.httpCacheService.setPreviousId(reportID, this.inputReportId);
+        let queryParamsArr = [];
+        let columnDrilldownqueryParamsArr = [];
+        let groupSelectValue = '';
+        if (queryParameters.includes('groupSelectValue')) {
+            queryParamsArr = queryParameters.split('&');
+            for (let val = 0; val < queryParamsArr.length; val++) {
+                if (queryParamsArr[val].includes('groupSelectValue')) {
+                    groupSelectValue = queryParamsArr[val].substring(queryParamsArr[val].indexOf('=') + 1, queryParamsArr[val].length);
+                }
+            }
+            this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue]);
+        } else if (queryParameters.includes('SELECTCRITERIA-')) {
+            columnDrilldownqueryParamsArr = queryParameters.split('&');
+            for (let val = 0; val < columnDrilldownqueryParamsArr.length; val++) {
+                if (columnDrilldownqueryParamsArr[val].includes('SELECTCRITERIA-')) {
+                    groupSelectValue = columnDrilldownqueryParamsArr[val].substring(columnDrilldownqueryParamsArr[val].indexOf('-') + 1, columnDrilldownqueryParamsArr[val].length);
+                }
+            }
+            this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue, 'true', '']);
+        } else {
+            this._router.navigate(['v2/run', reportID, queryParameters, '', 'true', '']);
+        }
+    }
+
+    linkToMail(mailId: string) {
+        const email = 'mailto:' + mailId;
+        window.location.href = email;
+    }
+
+    applyFilter(filterValue: string) {
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+    setStyle(rowData: string) {
+        let styles = '';
+        if (rowData.split('|')[0] === 'linkToReport' || rowData.split('|')[0] === 'linkToFeedback') {
+            styles = rowData.split('|')[4];
+        } else if (this.reportType = 'Cross-Tab') {
+            const rowDataArray = rowData.split('|');
+            let crossTabstyles = {};
+            if (rowDataArray.length > 1) {
+                if (rowDataArray[1].includes('{')) {
+                    styles = rowDataArray[1];
+                    return JSON.parse(styles);
+                } else {
+                    crossTabstyles = {'background-color': rowData.split('|')[1]};
+                    return crossTabstyles;
+                }
+            }
+        } else {
+            styles = rowData.split('|')[1];
+        }
+        if (styles.includes('{')) {
+            return JSON.parse(styles);
+        } else {
+            return {};
+        }
+    }
+
+    getDisplayTotal(keys: any) {
+        if (this.displayTotal.length > 0) {
+            return this.displayTotal[0][keys].displayValue;
+        } else {
+            return '';
+        }
+    }
+
+    clearComments() {
+        this.commentCtrl.setValue('');
+    }
+
+    convertToLinkToReport(value: string) {
+        value = value.replace(/;/g, '');
+        let outPut = '';
+        while (value.includes('c_master=')) {
+            const index = value.indexOf('c_master=');
+            if (index > 0) {
+                value = value.substring(index, value.length);
+            } else if (index === 0) {
+                value = value.replace('c_master=', '');
+            }
+        }
+        const split = value.split('&');
+        // const spltFirst = split[0].split('=');
+        if (split[1].length <= 0) {
+            return outPut;
+        }
+        outPut = 'linkToReport,' + split[0] + ',';
+        let splitCounter = 1;
+        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
+            if (!split[splitCounter].includes('LOGIN_ID=') &&
+                !split[splitCounter].includes('display_content=') &&
+                !split[splitCounter].includes('drilldown_index=') &&
+                !split[splitCounter].includes('show_back_btn=') &&
+                !split[splitCounter].includes('r_action')) {
+                outPut = outPut + '&' + split[splitCounter];
+            }
+        }
+        return outPut;
+    }
+
+    openErrorModel(_message: string) {
+        const modalInfoRef = this.ngbModal.open(ErrorModalComponent);
+        modalInfoRef.componentInstance.message = _message;
+        return modalInfoRef;
+    }
+
+    downloadReport(contentType: string, extension: string) {
+
+        this.changeDetectorRefs.detectChanges();
+        if (this.showDashboardReport === false) {
+            this.download_in_progress = true;
+            this._runService.downloadReport(this.inputReportId, extension, this.isGoBack)
+                .subscribe((responseExcel) => {
+
+                    this.downLoadFile(responseExcel, contentType, extension, '');
+                    this.download_in_progress = false;
+                    this.changeDetectorRefs.detectChanges();
+                });
+        } else {
+            this.download_in_progress = true;
+            this._runService.getDashboardReportFormFields(this.inputReportId)
+                .subscribe((dashboardFormFields) => {
+                    /*                    this._runService.runDashboardReport(this.inputReportId, this.queryString)
+                                                .subscribe((runDashboardReportResp) => {*/
+                    this._runService.downloadDashboardReportExcel(this.inputReportId)
+                        .subscribe((responseDownloadDashboardReport) => {
+                            this.downLoadFile(responseDownloadDashboardReport, contentType, extension, 'Dashboard');
+                            this.download_in_progress = false;
+                            this.changeDetectorRefs.detectChanges();
+                        });
+                    // });
+
+                });
+        }
+    }
+
+    downLoadFile(data: any, type: string, extension: string, reportType: string) {
+        const blob = new Blob([data], {type: type});
+        const date = new Date();
+        const dateStr =
+            ('00' + (date.getMonth() + 1)).slice(-2) +
+            ('00' + date.getDate()).slice(-2) +
+            date.getFullYear() +
+            ('00' + date.getHours()).slice(-2) +
+            ('00' + date.getMinutes()).slice(-2) +
+            ('00' + date.getMilliseconds());
+        let fileName = this.reportName + dateStr + '.' + extension;
+        if (reportType === 'Dashboard') {
+            fileName = '';
+            fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + extension;
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+            window.navigator.msSaveBlob(blob, fileName);
+        } else {
+            const anchor = window.document.createElement('a');
+            anchor.href = window.URL.createObjectURL(blob);
+            anchor.download = fileName;
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            window.URL.revokeObjectURL(anchor.href);
+        }
+    }
+}
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
index e37154a1..10ee4f87 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
@@ -192,7 +192,7 @@ saveResponseObj:any;
                         'text-decoration': string;
                         color: string;
                     };
-                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) {
                         displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
                     }
                     displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
@@ -246,6 +246,18 @@ saveResponseObj:any;
             styles = rowData.split('|')[4];
         } else if (rowData.split('|')[0] === 'linkToMail') {
             styles = rowData.split('|')[3];
+        } else if (this.reportType === 'Cross-Tab') {
+            const rowDataArray = rowData.split('|');
+            let crossTabstyles = {};
+            if (rowDataArray.length > 0) {
+                if (rowDataArray[1].includes('{')) {
+                    styles = rowDataArray[1];
+                    return JSON.parse(styles);
+                } else {
+                    crossTabstyles = {'background-color': rowData.split('|')[1]};
+                    return crossTabstyles;
+                }
+            }
         } else {
             styles = rowData.split('|')[1];
         }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css
index 5f0f289d..621827f6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css
@@ -1360,3 +1360,15 @@ color: rgba(0, 0, 0, 0.54);
 .btn-back {
     padding-bottom: 5px;
     font-size: 15px;}
+
+a{
+    color: darkblue;
+    /*font-weight: normal;*/
+    text-decoration: underline;
+}
+
+.hyperlink-color{
+	text-decoration: underline;
+	cursor: pointer;
+	color: darkblue;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html
index 6b3836e9..f87fad60 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html
@@ -74,12 +74,16 @@
                                 <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
                                    [routerLink]="">{{row[keys].split('|')[3]}}</a>
                             </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToHref'">
+                                <a (click)="linkToOpenNewTab(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
                             <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
                                  >
                                 <a (click)="linkToMail(row[keys].split('|')[1])"
                                    [routerLink]="">{{row[keys].split('|')[2]}}</a>
                             </div>
-                            <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToMail'">
+                            <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToMail' && row[keys].split('|')[0] !== 'linkToHref'">
                                 {{row[keys].split('|')[0]}}&nbsp;</div>
                         </td>
                         <td *matFooterCellDef align="center" mat-footer-cell>{{getDisplayTotal(keys)}}</td>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts
index 54a45226..aa36178f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts
@@ -24,7 +24,7 @@ import {DisplayHtml} from '../../../pages/analytics/Report_List/Report/display-h
 import {ErrorModalComponent} from '../../../modals/error-modal/error-modal.component';
 import {InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
 import { FormControl } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
 import {MatDialog} from '@angular/material';
 import {HttpCacheService} from '../../../shared/services/cache.service';
@@ -44,6 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [{}];
 export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
     @Input('reportId') inputReportId: string;
     @Input('reportMode') reportMode: string;
+    @Input('reportType') reportType: string;
     @Input('queryString') queryString: string;
     @Input('isGoBack') isGoBack: string;
     @Input('DashboardReportObj') DashboardReportObj: Array<GridsterItem>;
@@ -98,8 +99,10 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
     timeTaken = '...';
     saveResponseObj: any;
     showBackButton = false;
+    customFieldsDataArray: any[];
 
 	isDashboardExcelReadyToDownload = false;
+    modalOptions: NgbModalOptions;
 	
     constructor(private _http: HttpClient,
         private _route: ActivatedRoute,
@@ -131,6 +134,11 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
         this.download_in_progress = false;
         this.isGoBack = '';
 		this.isDashboardExcelReadyToDownload = false;
+        this.modalOptions = {
+            backdrop: 'static',
+            keyboard: false,
+            size: 'lg'
+        };
     }
 
     @HostListener('click') onClick() {
@@ -381,6 +389,7 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
         this.totalRecords = 0;
         this.displayedColumnsArr = [];
         this.displayedColumns = [];
+        this.customFieldsDataArray = [];
         this.formFieldPresent = false;
         this.responseFormFieldListLength = 0;
         this.reportName = response['reportName'];
@@ -404,7 +413,7 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
             this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
             totalCnt++;
         }
-
+        this.customFieldsDataArray = response['reportDataRows'];
         let rdr_cntr = 0;
         while (response['reportDataRows'][rdr_cntr]) {
             let dca_cntr = 0;
@@ -422,8 +431,17 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
                         !displayValue.includes('linkToReport')) {
                         const value = this.convertToLinkToReport(drillDownHtml);
                         if (value.length > 0) {
-                            this.replaceDisplayValue = value + ',' +
-                                reportDataRows[rowColumnId]['displayValue'];
+                            let valueCount = [];
+                            let valueDisplay = '';
+                            valueCount = reportDataRows[rowColumnId]['displayValue'].split('|');
+                            if (valueCount.length > 1 && this.reportType === 'Cross-Tab') {
+                                for (let count = 0; count < valueCount.length - 1; count++) {
+                                    valueDisplay = valueDisplay + valueCount[count];
+                                }
+                                this.replaceDisplayValue = value + ',' + valueDisplay;
+                            } else {
+                                this.replaceDisplayValue = value + ',' + reportDataRows[rowColumnId]['displayValue'];
+                            }
                         } else {
                             this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
                         }
@@ -440,13 +458,20 @@ export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
                         'text-decoration': string;
                         color: string;
                     };
+                    if (this.reportType === ('Cross-Tab') && reportDataRows[rowColumnId]['displayValueHtml'].includes('|')) {
+                        let crossTabDisplayValArr = [];
+                        crossTabDisplayValArr = reportDataRows[rowColumnId]['displayValueHtml'].split('|');
+                        if (crossTabDisplayValArr.length > 1) {
+                            displayObj['background-color'] = crossTabDisplayValArr[1];
+                        }
+                    }
                     if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) {
                         displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
                     }
                     displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
                     obj['RowNum'] = (pagenum * response['pageSize'] + rdr_cntr + 1) + '|{"text-align":"center"}';
                     if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')
-                        || this.replaceDisplayValue.includes('linkToMap')) {
+                        || this.replaceDisplayValue.includes('linkToMap') || this.replaceDisplayValue.includes('linkToHref')) {
                         let replaceValArr = new Array();
                         if (this.replaceDisplayValue.includes('linkToReport')) {
                             obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|');
@@ -503,8 +528,8 @@ linkToReport(reportID: string, queryParameters: string) {
              length++;
              sessionStorage.setItem(length.toString(), this.inputReportId + '|' + this.queryString);
          }*/
-         let queryParamsArr = new Array();
-         let columnDrilldownqueryParamsArr = new Array();
+        let queryParamsArr = [];
+        let columnDrilldownqueryParamsArr = [];
          let groupSelectValue = '';
          if (queryParameters.includes('groupSelectValue')) {
              queryParamsArr = queryParameters.split('&');
@@ -626,10 +651,22 @@ linkToReport(reportID: string, queryParameters: string) {
             styles = rowData.split('|')[4];
         } else if (rowData.split('|')[0] === 'linkToMail') {
             styles = rowData.split('|')[3];
+        }  else if (this.reportType === 'Cross-Tab') {
+            const rowDataArray = rowData.split('|');
+            let crossTabstyles = {};
+            if (rowDataArray.length > 0) {
+                if (rowDataArray[1].includes('{')) {
+                    styles = rowDataArray[1];
+                    return JSON.parse(styles);
+                } else {
+                    crossTabstyles = {'background-color': rowData.split('|')[1]};
+                    return crossTabstyles;
+                }
+            }
         } else {
             styles = rowData.split('|')[1];
         }
-        if (styles.includes('{')) {
+        if (styles !== undefined && styles.includes('{')) {
             return JSON.parse(styles);
         } else {
             return {};
@@ -778,9 +815,33 @@ linkToReport(reportID: string, queryParameters: string) {
     
 	openErrorModel(_message: string) { 
         this.changeDetectorRefs.detectChanges(); 
-        const modalInfoRef = this.ngbModal.open(ErrorModalComponent); 
+        const modalInfoRef = this.ngbModal.open(ErrorModalComponent, this.modalOptions);
         modalInfoRef.componentInstance.message = _message; 
         return modalInfoRef; 
     }
 
+    openErrorModelPopup(_message: string) {
+        this.changeDetectorRefs.detectChanges();
+        const modalInfoRef = this.ngbModal.open(ErrorModalComponent, this.modalOptions);
+        modalInfoRef.componentInstance.message = _message;
+        modalInfoRef.result.then((data) => {
+            this.resetFormFieldValues(this.inputReportId);
+        });
+        return modalInfoRef;
+    }
+
+    resetFormFieldValues(reportId) {
+        this.httpCacheService.clearCache();
+        this._router.navigateByUrl('v2/app/refresh', {skipLocationChange: true}).then(() =>
+            this._router.navigate(['v2/run', reportId]));
+    }
+
+    linkToOpenNewTab(repId, formfiledValues) {
+        let str = [];
+        formfiledValues = formfiledValues.replaceAll('%2F','||');
+        str = window.location.pathname.split('/');
+        let approot = str[1];
+        let reportLink2 = this._router.serializeUrl(this._router.createUrlTree([approot + '/v2/run', repId, formfiledValues]));
+        window.open(reportLink2, '_blank');
+    }
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/header/header.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/header/header.service.spec.ts
index c6a2de49..cd1071ea 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/header/header.service.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/header/header.service.spec.ts
@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientModule, HttpClient, HttpXhrBackend } from '@angular/common/http'; 
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { HeaderService } from './header.service';
 import { environment } from 'src/environments/environment';
@@ -13,7 +14,7 @@ describe('HeaderService', () => {
   let httpMock: HttpTestingController;
 
   beforeEach(() =>{ TestBed.configureTestingModule({
-    imports:[HttpClientModule],
+    imports:[HttpClientModule, HttpClientTestingModule],
     providers: [HttpClient, HeaderService, HttpTestingController],
   });
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/sidebar/sidebar.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/sidebar/sidebar.service.spec.ts
index 3d2b4bec..ad796411 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/sidebar/sidebar.service.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/sidebar/sidebar.service.spec.ts
@@ -39,7 +39,7 @@
  */
 import { TestBed } from '@angular/core/testing';
 import { HttpClientModule, HttpClient } from '@angular/common/http'; 
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { SidebarService } from './sidebar.service';
 import { environment } from 'src/environments/environment';
 import { inject } from '@angular/core';
@@ -51,7 +51,7 @@ describe('SidenavService', () => {
   let httpMock: HttpTestingController;
 
   beforeEach(() => { TestBed.configureTestingModule({
-    imports: [HttpClientModule],
+    imports: [HttpClientModule, HttpClientTestingModule],
     providers: [SidebarService, HttpTestingController, HttpClient]
   });
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts
index 65decafb..97e164df 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts
@@ -51,7 +51,7 @@ import { Observable } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-xdescribe('SelfComponent', () => {
+describe('SelfComponent', () => {
   let component: SelfComponent;
   let fixture: ComponentFixture<SelfComponent>;
   let userService:UserService;
-- 
cgit