getting rid of hardcoded strings

2015-04-24 13:17:02 -04:00
parent 1a021ca539
commit 4a56af1e35
8 changed files with 1283 additions and 37 deletions
--- a/workflow/engine/classes/class.indicatorsCalculator.php
+++ b/workflow/engine/classes/class.indicatorsCalculator.php
@@ -151,12 +151,12 @@ class indicatorsCalculator
 		$params[":endMonth"] = $endMonth;
 		$params[":language"] = $language;

-		$sqlString = "
-					select
+		$sqlString = "select
                        i.PRO_UID as uid,
                        tp.CON_VALUE as name,
                        efficiencyIndex,
-                        inefficiencyCost
+                        inefficiencyCost,
+						@curRow := @curRow + 1 AS rank
                    from
                    (	select
                            PRO_UID,
@@ -172,12 +172,14 @@ class indicatorsCalculator
 							AND
 								IF(`YEAR` = :endYear, `MONTH`, `YEAR`) <= IF (`YEAR` = :endYear, :endMonth, :endYear)
                        group by PRO_UID
+						order by $this->peiFormula DESC
                    ) i
                    left join (select *
-                                        from CONTENT
-                                        where CON_CATEGORY = 'PRO_TITLE'
-                                                and CON_LANG = :language
-                                ) tp on i.PRO_UID = tp.CON_ID";
+								from CONTENT
+								where CON_CATEGORY = 'PRO_TITLE'
+										and CON_LANG = :language
+									) tp on i.PRO_UID = tp.CON_ID
+					join  (SELECT @curRow := 0) order_table"; 

 		//$retval = $this->propelExecutor($sqlString);
 		$retval = $this->pdoExecutor($sqlString, $params);
@@ -210,7 +212,8 @@ class indicatorsCalculator
 						 efficiencyIndex,
 						 inefficiencyCost,
 						 averageTime,
-						 deviationTime
+						 deviationTime,
+						 @curRow := @curRow + 1 AS rank
 				from
 				(	select
 					   gu.GRP_UID,
@@ -224,12 +227,14 @@ class indicatorsCalculator
 				   WHERE
 					IF(`YEAR` = :endYear, `MONTH`, `YEAR`) <= IF (`YEAR` = :endYear, :endMonth, :endYear)
 				   group by gu.GRP_UID
+					order by $this->ueiFormula DESC
 				) i
 				left join (select *
 								from CONTENT
 							where CON_CATEGORY = 'GRP_TITLE'
 									and CON_LANG = :language 
-						   ) tp on i.GRP_UID = tp.CON_ID";
+						   ) tp on i.GRP_UID = tp.CON_ID
+				join  (SELECT @curRow := 0) order_table"; 

 		$retval = $this->pdoExecutor($sqlString, $params);
 		//$retval = $this->propelExecutor($sqlString);
@@ -262,7 +267,8 @@ class indicatorsCalculator
 						   efficiencyIndex,
 						   inefficiencyCost,
 						   averageTime,
-						   deviationTime
+						   deviationTime,
+						 @curRow := @curRow + 1 AS rank
 						from
 						(	select
 							   u.USR_UID,
@@ -279,7 +285,9 @@ class indicatorsCalculator
 							   AND
 								IF(`YEAR` = :endYear, `MONTH`, `YEAR`) <= IF (`YEAR` = :endYear, :endMonth, :endYear)
 						   group by ur.USR_UID
-						) i";
+							order by $this->ueiFormula DESC
+						) i
+						join  (SELECT @curRow := 0) order_table"; 

 		$retval = $this->pdoExecutor($sqlString, $params);
 		//$returnValue = $this->propelExecutor($sqlString);
--- a/workflow/engine/config/schema.xml
+++ b/workflow/engine/config/schema.xml
@@ -4997,6 +4997,7 @@
        </foreign-key>
    </table>

+
    <table name="CATALOG">
        <vendor type="mysql">
            <parameter name="Name" value="CATALOG" />
--- a/workflow/engine/controllers/strategicDashboard.php
+++ b/workflow/engine/controllers/strategicDashboard.php
@@ -176,6 +176,7 @@ class StrategicDashboard extends Controller

            $translation = array();

+
            $translation['ID_MANAGERS_DASHBOARDS'] = G::LoadTranslation( 'ID_MANAGERS_DASHBOARDS');
            $translation['ID_PRO_EFFICIENCY_INDEX'] = G::LoadTranslation( 'ID_PRO_EFFICIENCY_INDEX');
            $translation['ID_EFFICIENCY_USER'] = G::LoadTranslation( 'ID_EFFICIENCY_USER');
@@ -193,9 +194,15 @@ class StrategicDashboard extends Controller
            $translation['ID_PROCESS_TASKS'] = G::LoadTranslation( 'ID_PROCESS_TASKS');
            $translation['ID_TIME_HOURS'] = G::LoadTranslation( 'ID_TIME_HOURS');
            $translation['ID_GROUPS'] = G::LoadTranslation( 'ID_GROUPS');
+            $translation['ID_COSTS'] = G::LoadTranslation( 'ID_COSTS');
+            $translation['ID_TASK'] = G::LoadTranslation( 'ID_TASK');
+            $translation['ID_USER'] = G::LoadTranslation( 'ID_USER');
            $translation['ID_YEAR'] = G::LoadTranslation( 'ID_YEAR');
            $translation['ID_USERS'] = G::LoadTranslation( 'ID_USERS');
-
+            $translation['ID_USERS'] = G::LoadTranslation( 'ID_USERS');
+            $translation['ID_OVERDUE'] = G::LoadTranslation( 'ID_OVERDUE');
+            $translation['ID_AT_RISK'] = G::LoadTranslation( 'ID_AT_RISK');
+            $translation['ID_ON_TIME'] = G::LoadTranslation( 'ID_ON_TIME');
            $this->setVar('translation', $translation);
            $this->render();
        } catch (Exception $error) {
@@ -208,7 +215,41 @@ class StrategicDashboard extends Controller
    {
        try {
            $this->setView( 'strategicDashboard/viewDashboardIE' );
+            $this->setVar('urlProxy',$this->urlProxy);
+            $this->setVar('usrId',$this->usrId);
+            $this->setVar('credentials',$this->clientToken);
+
+            $translation = array();
+
+            $translation['ID_MANAGERS_DASHBOARDS'] = G::LoadTranslation( 'ID_MANAGERS_DASHBOARDS');
+            $translation['ID_PRO_EFFICIENCY_INDEX'] = G::LoadTranslation( 'ID_PRO_EFFICIENCY_INDEX');
+            $translation['ID_EFFICIENCY_USER'] = G::LoadTranslation( 'ID_EFFICIENCY_USER');
+            $translation['ID_COMPLETED_CASES'] = G::LoadTranslation( 'ID_COMPLETED_CASES');
+            $translation['ID_WELL_DONE'] = G::LoadTranslation( 'ID_WELL_DONE');
+            $translation['ID_NUMBER_CASES'] = G::LoadTranslation( 'ID_NUMBER_CASES');
+            $translation['ID_EFFICIENCY_INDEX'] = G::LoadTranslation( 'ID_EFFICIENCY_INDEX');
+            $translation['ID_INEFFICIENCY_COST'] = G::LoadTranslation( 'ID_INEFFICIENCY_COST');
+            $translation['ID_EFFICIENCY_COST'] = G::LoadTranslation( 'ID_EFFICIENCY_COST');
+            $translation['ID_RELATED_PROCESS'] = G::LoadTranslation( 'ID_RELATED_PROCESS');
+            $translation['ID_RELATED_GROUPS'] = G::LoadTranslation( 'ID_RELATED_GROUPS');
+            $translation['ID_RELATED_TASKS'] = G::LoadTranslation( 'ID_RELATED_TASKS');
+            $translation['ID_RELATED_USERS'] = G::LoadTranslation( 'ID_RELATED_USERS');
+            $translation['ID_GRID_PAGE_NO_DASHBOARD_MESSAGE'] = G::LoadTranslation( 'ID_GRID_PAGE_NO_DASHBOARD_MESSAGE');
+            $translation['ID_PROCESS_TASKS'] = G::LoadTranslation( 'ID_PROCESS_TASKS');
+            $translation['ID_TIME_HOURS'] = G::LoadTranslation( 'ID_TIME_HOURS');
+            $translation['ID_GROUPS'] = G::LoadTranslation( 'ID_GROUPS');
+            $translation['ID_COSTS'] = G::LoadTranslation( 'ID_COSTS');
+            $translation['ID_TASK'] = G::LoadTranslation( 'ID_TASK');
+            $translation['ID_USER'] = G::LoadTranslation( 'ID_USER');
+            $translation['ID_YEAR'] = G::LoadTranslation( 'ID_YEAR');
+            $translation['ID_USERS'] = G::LoadTranslation( 'ID_USERS');
+            $translation['ID_OVERDUE'] = G::LoadTranslation( 'ID_OVERDUE');
+            $translation['ID_AT_RISK'] = G::LoadTranslation( 'ID_AT_RISK');
+            $translation['ID_ON_TIME'] = G::LoadTranslation( 'ID_ON_TIME');
+
+            $this->setVar('translation', $translation);
            $this->render();
+        } catch (Exception $error) {
        } catch (Exception $error) {
            $_SESSION['__DASHBOARD_ERROR__'] = $error->getMessage();
            die();
--- a/workflow/engine/js/strategicDashboard/viewDashboardHelper.js
+++ b/workflow/engine/js/strategicDashboard/viewDashboardHelper.js
@@ -139,7 +139,8 @@ ViewDashboardHelper.prototype.merge = function (objFrom, objTo, propMap) {
      toKey = propMap[fromKey];

      //force toKey to an array of toKeys
-      if (!Array.isArray(toKey)) {
+      //if (!Array.isArray(toKey)) {
+      if (!$.isArray(toKey)) {
        toKey = [toKey];
      }

@@ -147,14 +148,17 @@ ViewDashboardHelper.prototype.merge = function (objFrom, objTo, propMap) {
        def = null;
        transform = null;
        key = toKey[x];
-        keyIsArray = Array.isArray(key);
+        //keyIsArray = Array.isArray(key);
+        keyIsArray = $.isArray(key);

        if (typeof(key) === "object" && !keyIsArray) {
-          def = key.default || null;
+          //def = (key.default || null);
+		  def = null;
          transform = key.transform || null;
          key = key.key;
 	  //evaluate if the new key is an array
-	  keyIsArray = Array.isArray(key);
+	 // keyIsArray = Array.isArray(key);
+	    keyIsArray = $.isArray(key);
        }

 	if (keyIsArray) {
--- a/workflow/engine/js/strategicDashboard/viewDashboardView.js
+++ b/workflow/engine/js/strategicDashboard/viewDashboardView.js
@@ -281,7 +281,6 @@ $(document).ready(function() {
                        'height': item.height <= 1 ? 2 : item.height
                }
                widgets.push(widgetsObj);
-				console.log(widgetsObj);
            }
        }); 
        
@@ -588,8 +587,8 @@ var fillSpecialIndicatorFirstView = function(presenterData) {
 		graph: {
 			allowDrillDown:false,
 			allowTransition:true,
-			axisX:{ showAxis: true, label: "Group" },
-			axisY:{ showAxis: true, label: "Cost" },
+			axisX:{ showAxis: true, label:  G_STRING.ID_GROUPS},
+			axisY:{ showAxis: true, label: G_STRING.ID_COSTS},
 			gridLinesX:false,
 			gridLinesY:true,
 			showTip: true,
@@ -670,8 +669,8 @@ var fillSpecialIndicatorSecondView = function(presenterData) {
 			gridLinesX: true,
 			gridLinesY: true,
 			area: {visible: false, css:"area"},
-			axisX:{ showAxis: true, label: "User" },
-			axisY:{ showAxis: true, label: "Cost" },
+			axisX:{ showAxis: true, label: G_STRING.ID_USER },
+			axisY:{ showAxis: true, label: G_STRING.ID_COSTS },
 			showErrorBars: true

 		}
@@ -680,7 +679,7 @@ var fillSpecialIndicatorSecondView = function(presenterData) {
 	var indicatorPrincipalData = widgetBuilder.getIndicatorLoadedById(window.currentEntityData.indicatorId);

 	if (window.currentIndicator.type == "1010") {
-		detailParams.graph.axisX.label = "Task";
+		detailParams.graph.axisX.label = G_STRING.ID_TASK;
 		var graph = new BarChart(presenterData.dataToDraw, detailParams, null, null);
 		graph.drawChart();
 	}
@@ -789,7 +788,7 @@ var fillGeneralIndicatorFirstView = function (presenterData) {
 			allowDrillDown:false,
 			allowTransition:true,
 			axisX:{ showAxis: true, label: G_STRING.ID_YEAR },
-			axisY:{ showAxis: true, label: "Q" },
+			axisY:{ showAxis: true, label: G_STRING.ID_COSTS},
 			gridLinesX:false,
 			gridLinesY:true,
 			showTip: true,
@@ -811,7 +810,7 @@ var fillGeneralIndicatorFirstView = function (presenterData) {
 			allowDrillDown:false,
 			allowTransition:true,
 			axisX:{ showAxis: true, label: G_STRING.ID_YEAR },
-			axisY:{ showAxis: true, label: "Q" },
+			axisY:{ showAxis: true, label: G_STRING.ID_COSTS },
 			gridLinesX:false,
 			gridLinesY:true,
 			showTip: true,
--- a/workflow/engine/js/strategicDashboard/viewDashboardViewIE.js
+++ b/workflow/engine/js/strategicDashboard/viewDashboardViewIE.js
@@ -0,0 +1,760 @@
+/**************************************************************/
+var WidgetBuilder = function () {
+	this.helper = new ViewDashboardHelper();
+}
+
+WidgetBuilder.prototype.getIndicatorWidget = function (indicator) {
+	var retval = null;
+	switch(indicator.type) {
+		case "1010": retval = this.buildSpecialIndicatorButton(indicator); break;
+		case "1030": retval = this.buildSpecialIndicatorButton(indicator); break;
+		case "1050": retval = this.buildStatusIndicatorButton(indicator); break;
+		case "1020": 
+		case "1040": 
+		case "1060": 
+		case "1070": 
+		case "1080": 
+					 retval = this.buildIndicatorButton(indicator); break;
+	}
+	if(retval == null) {throw new Error(indicator.type + " has not associated a widget.");}
+	return retval;
+};
+
+WidgetBuilder.prototype.buildSpecialIndicatorButton = function (indicator) {
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.specialIndicatorButtonTemplate").html());
+	var $retval =  $(template(indicator));
+	
+	if(indicator.comparative < 0){
+		$retval.find(".ind-container-selector").removeClass("panel-green").addClass("panel-red");
+		$retval.find(".ind-symbol-selector").removeClass("fa-chevron-up").addClass("fa-chevron-down");
+	}
+
+	if(indicator.comparative > 0){
+		$retval.find(".ind-container-selector").removeClass("panel-red").addClass("panel-green");
+		$retval.find(".ind-symbol-selector").removeClass("fa-chevron-down").addClass("fa-chevron-up");
+	}
+
+	if(indicator.comparative == 0){
+		$retval.find(".ind-symbol-selector").removeClass("fa-chevron-up");
+		$retval.find(".ind-symbol-selector").removeClass("fa-chevron-down");
+		$retval.find(".ind-symbol-selector").addClass("fa-circle-o");
+		$retval.find(".ind-container-selector").removeClass("panel-red").addClass("panel-green");
+	}
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildStatusIndicatorButton = function (indicator) {
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.statusIndicatorButtonTemplate").html());
+	var $retval =  $(template(indicator));
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildIndicatorButton = function (indicator) {
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.statusIndicatorButtonTemplate").html());
+	var $retval =  $(template(indicator));
+	var $comparative = $retval.find('.ind-comparative-selector');
+	var $title = $retval.find('.ind-title-selector');
+	if (indicator.isWellDone) {
+		$comparative.text("(" + indicator.directionSymbol + " " + indicator.comparative + "%)-"+ G_STRING.ID_WELL_DONE);
+		$retval.find(".ind-container-selector").removeClass("panel-low").addClass("panel-high");
+	}
+	else {
+		$comparative.text("Goal: " + indicator.directionSymbol + " " + indicator.comparative + "%");
+		$retval.find(".ind-container-selector").removeClass("panel-high").addClass("panel-low");
+	}
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildSpecialIndicatorFirstView = function (indicatorData) {
+	if (indicatorData == null) { throw new Error ("indicatorData is null."); }	
+	if (!indicatorData.hasOwnProperty("id")) { throw new Error ("indicatorData has no id."); }	
+
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.specialIndicatorMainPanel").html());
+	var $retval =  $(template(indicatorData));
+	var indicatorPrincipalData = this.getIndicatorLoadedById(indicatorData.id)
+	$retval.find('.breadcrumb').find('li').remove()
+	$retval.find('.breadcrumb').append ('<li><b>'+indicatorPrincipalData.title+'</b></li>')
+	$retval.find(".sind-index-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".sind-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+	this.setColorForInefficiency($retval.find(".sind-cost-number-selector"), indicatorData);
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildSpecialIndicatorFirstViewDetail = function (oneItemDetail) {
+	//detailData =  {indicatorId, uid, name, averateTime...}
+	if (oneItemDetail == null){throw new Error("oneItemDetail is null ");}
+	if (!typeof(oneItemDetail) === 'object'){throw new Error( "detailData is not and object ->" + oneItemDetail);}
+	if (!oneItemDetail.hasOwnProperty("name")){throw new Error("buildSpecialIndicatorFirstViewDetail -> detailData has not the name param. Has it the correct Type? ->" + oneItemDetail);}
+
+	_.templateSettings.variable = "detailData";
+	var template = _.template ($("script.specialIndicatorDetail").html());
+	var $retval =  $(template(oneItemDetail));
+	$retval.find(".detail-efficiency-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".detail-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+	this.setColorForInefficiency($retval.find(".detail-cost-number-selector"), oneItemDetail);
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildStatusIndicatorFirstView = function (indicatorData) {
+	if (indicatorData == null) { throw new Error ("indicatorData is null."); }
+	if (!indicatorData.hasOwnProperty("id")) { throw new Error ("indicatorData has no id."); }
+
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.statusIndicatorMainPanel").html());
+	var $retval =  $(template(indicatorData));
+	var indicatorPrincipalData = this.getIndicatorLoadedById(indicatorData.id)
+	$retval.find('.breadcrumb').find('li').remove()
+	$retval.find('.breadcrumb').append ('<li><b>'+indicatorPrincipalData.title+'</b></li>')
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildStatusIndicatorFirstViewDetail = function (oneItemDetail) {
+	//detailData =  {indicatorId, uid, name, averateTime...}
+	if (oneItemDetail == null){throw new Error("oneItemDetail is null ");}
+	if (!typeof(oneItemDetail) === 'object'){throw new Error( "detailData is not and object ->" + oneItemDetail);}
+	if (!oneItemDetail.hasOwnProperty("taskTitle")){throw new Error("detailData has not the name param. Has it the correct Type? ->" + oneItemDetail);}
+
+	_.templateSettings.variable = "detailData";
+	var template = _.template ($("script.statusDetail").html());
+	var $retval =  $(template(oneItemDetail));
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildSpecialIndicatorSecondView = function (secondViewData) {
+	//presenterData= object {dataToDraw[], entityData[] //user/tasks data}
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.specialIndicatorMainPanel").html());
+	var $retval =  $(template(window.currentEntityData));
+	//var indicatorPrincipalData = this.getIndicatorLoadedById(indicatorId);
+	//$retval.find(".sind-title-selector").text(indicatorPrincipalData.title);
+	$retval.find(".sind-index-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".sind-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+
+	$retval.find('.breadcrumb').find('li').remove();
+	$retval.find('.breadcrumb').append ('<li><a class="bread-back-selector" href="#"><i class="fa fa-chevron-left fa-fw"></i>' + window.currentIndicator.title +  '</a></li>');
+	$retval.find('.breadcrumb').append ('<li><b>' + window.currentEntityData.name + '</b></li>');
+	this.setColorForInefficiency($retval.find(".sind-cost-number-selector"), window.currentEntityData);
+	return $retval;
+};
+
+WidgetBuilder.prototype.buildSpecialIndicatorSecondViewDetailPei = function (oneItemDetail) {
+	if (oneItemDetail == null){throw new Error("oneItemDetail is null ");}
+	if (!typeof(oneItemDetail) === 'object'){throw new Error( "detailData is not and object ->" + oneItemDetail);}
+	if (!oneItemDetail.hasOwnProperty("name")){throw new Error("buildSpecialIndicatorFirstViewDetail -> detailData has not the name param. Has it the correct Type? ->" + oneItemDetail);}
+
+	_.templateSettings.variable = "detailData";
+	var template = _.template ($("script.specialIndicatorSencondViewDetailPei").html());
+	var $retval =  $(template(oneItemDetail));
+	$retval.find(".detail-efficiency-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".detail-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+	this.setColorForInefficiency($retval.find(".detail-cost-number-selector"), oneItemDetail);
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildSpecialIndicatorSecondViewDetailUei = function (oneItemDetail) {
+	if (oneItemDetail == null){throw new Error("oneItemDetail is null ");}
+	if (!typeof(oneItemDetail) === 'object'){throw new Error( "detailData is not and object ->" + oneItemDetail);}
+	if (!oneItemDetail.hasOwnProperty("name")){throw new Error("buildSpecialIndicatorFirstViewDetail -> detailData has not the name param. Has it the correct Type? ->" + oneItemDetail);}
+
+	_.templateSettings.variable = "detailData";
+	var template = _.template ($("script.specialIndicatorSencondViewDetailUei").html());
+	var $retval =  $(template(oneItemDetail));
+	$retval.find(".detail-efficiency-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".detail-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+	this.setColorForInefficiency($retval.find(".detail-cost-number-selector"), oneItemDetail);
+	return $retval;
+}
+
+WidgetBuilder.prototype.buildSpecialIndicatorSecondViewDetaiUei = function (oneItemDetail) {
+	if (oneItemDetail == null){throw new Error("oneItemDetail is null ");}
+	if (!typeof(oneItemDetail) === 'object'){throw new Error( "detailData is not and object ->" + oneItemDetail);}
+	if (!oneItemDetail.hasOwnProperty("name")){throw new Error("buildSpecialIndicatorFirstViewDetail -> detailData has not the name param. Has it the correct Type? ->" + oneItemDetail);}
+
+	_.templateSettings.variable = "detailData";
+	var template = _.template ($("script.specialIndicatorSencondViewDetailUei").html());
+	var $retval =  $(template(oneItemDetail));
+	$retval.find(".detail-efficiency-selector").text(G_STRING.ID_EFFICIENCY_INDEX);
+	$retval.find(".detail-cost-selector").text(G_STRING.ID_INEFFICIENCY_COST);
+	this.setColorForInefficiency($retval.find(".detail-cost-number-selector"), oneItemDetail);
+	return $retval;
+}
+
+WidgetBuilder.prototype.getIndicatorLoadedById = function (searchedIndicatorId) {
+	var retval = null;
+	for (key in window.loadedIndicators) {
+		var indicator = window.loadedIndicators[key];
+		if (indicator.id == searchedIndicatorId) {
+			retval = indicator;		
+		}
+	}
+	if (retval == null) { throw new Error(searchedIndicatorId + " was not found in the loaded indicators.");}
+	return retval;
+}
+
+WidgetBuilder.prototype.buildGeneralIndicatorFirstView = function (indicatorData) {
+	_.templateSettings.variable = "indicator";
+	var template = _.template ($("script.generalIndicatorMainPanel").html());
+	var $retval =  $(template(indicatorData));
+	$retval.find(".ind-title-selector").text(window.currentIndicator.title);
+	return $retval;
+}
+
+
+WidgetBuilder.prototype.setColorForInefficiency = function ($widget, indicatorData) {
+	//turn red/gree the font according if is positive or negative: var $widget = $retval.find(".sind-cost-number-selector");
+	$widget.removeClass("red");
+	$widget.removeClass("green");
+	if (indicatorData.inefficiencyCost >= 0) {
+		$widget.addClass("green");
+	}
+	else {
+		$widget.addClass("red");
+	}
+}
+
+/**********************************************************************/
+helper = new ViewDashboardHelper();
+var ws = urlProxy.split('/');
+model = new ViewDashboardModel(token, urlProxy, ws[3]);
+presenter = new ViewDashboardPresenter(model);
+
+window.loadedIndicators = []; //updated in das-title-selector.click->fillIndicatorWidgets, ready->fillIndicatorWidgets
+window.currentEntityData = null;
+window.currentIndicator = null;//updated in ind-button-selector.click ->loadIndicator, ready->loadIndicator
+window.currentDashboardId = null;
+window.currentDetailFunction = null;
+window.currentDetailList = null;
+
+$(document).ready(function() {
+	initialDraw();
+});
+
+
+var initialDraw = function () {
+	presenter.getUserDashboards(pageUserId)
+		.then(function(dashboardsVM) {
+				fillDashboardsList(dashboardsVM);
+				if (window.currentDashboardId == null) {return;}
+				/**** window initialization  with favorite dashboard*****/
+				presenter.getDashboardIndicators(window.currentDashboardId, defaultInitDate(), defaultEndDate())
+						.done(function(indicatorsVM) {
+							fillIndicatorWidgets(indicatorsVM);
+						});
+			});
+}
+
+var loadIndicator = function (indicatorId, initDate, endDate) {
+	if (indicatorId == null || indicatorId === undefined) {return;}
+    var builder = new WidgetBuilder();
+    window.currentIndicator = builder.getIndicatorLoadedById(indicatorId);
+	presenter.getIndicatorData(indicatorId, window.currentIndicator.type, initDate, endDate)
+			.done(function (viewModel) {
+				switch (window.currentIndicator.type)  {
+					case "1010":
+					case "1030":
+						fillSpecialIndicatorFirstView(viewModel);
+						break;
+					case "1050":
+						fillStatusIndicatorFirstView(viewModel);
+						break;
+					default:
+						fillGeneralIndicatorFirstView(viewModel);
+						break;
+				}
+			});
+}
+
+var setIndicatorActiveMarker = function () {
+	$('.panel-footer').each (function () {
+		$(this).removeClass('panel-active');
+		var indicatorId = $(this).parents('.ind-button-selector').data('indicator-id');
+		if (window.currentIndicator.id == indicatorId)  {
+			$(this).addClass('panel-active');
+		}
+	});
+}
+
+var getFavoriteIndicator = function() {
+	var retval = (window.loadedIndicators.length > 0)
+					? window.loadedIndicators[0] 
+					: null;
+	for (key in window.loadedIndicators) {
+		var indicator = window.loadedIndicators[key];
+		if (indicator.favorite == 1) {
+			retval = indicator;
+		}
+	}
+	if (retval==null) {throw new Error ('No favorites found.');}
+	return retval;
+}
+
+var defaultInitDate = function() {
+    var date = new Date();
+    var dateMonth = date.getMonth();
+    var dateYear = date.getFullYear();
+	var initDate = $('#year').val() + '-' + $('#month').val() + '-' + '01';
+	return initDate;
+}
+
+var defaultEndDate = function () {
+    var date = new Date();
+    var dateMonth = date.getMonth();
+    var dateYear = date.getFullYear();
+	return dateYear + "-" + (dateMonth + 1) + "-30";
+}
+
+var fillDashboardsList = function (presenterData) {
+	if (presenterData == null || presenterData.length == 0) {
+		$('#dashboardsList').append(G_STRING['ID_NO_DATA_TO_DISPLAY']);
+	}
+	_.templateSettings.variable = "dashboard";
+	var template = _.template ($("script.dashboardButtonTemplate").html())
+	for (key in presenterData) {
+		var dashboard = presenterData[key];
+		$('#dashboardsList').append(template(dashboard));
+		if (dashboard.isFavorite == 1) {
+			window.currentDashboardId = dashboard.id;
+			$('#dashboardButton-' + dashboard.id)
+				.find('.das-icon-selector')
+				.addClass('selected');
+		}
+	}
+	
+};
+
+var fillIndicatorWidgets = function (presenterData) {
+	if (presenterData == null || presenterData === undefined) {return;}
+	var widgetBuilder = new WidgetBuilder();
+    var grid = $('#indicatorsGridStack');
+	window.loadedIndicators = presenterData;
+	$.each(presenterData, function(key, indicator) {
+		var $widget = widgetBuilder.getIndicatorWidget(indicator);
+		grid.append($widget, indicator.toDrawX, indicator.toDrawY, indicator.toDrawWidth, indicator.toDrawHeight, true);
+	});
+}
+
+var fillStatusIndicatorFirstView = function (presenterData) {
+	var widgetBuilder = new WidgetBuilder();
+	var panel = $('#indicatorsDataGridStack').data('gridstack');
+	panel.remove_all();
+	$('#relatedDetailGridStack').data('gridstack').remove_all();
+
+	var $widget = widgetBuilder.buildStatusIndicatorFirstView(presenterData);
+	panel.add_widget($widget, 0, 15, 20, 4.7, true);
+
+	var graphParams1 = {
+		canvas : {
+			containerId:'graph1',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+
+			allowDrillDown:true,
+			allowTransition:true,
+			showTip: true,
+			allowZoom: false,
+			showLabels: true
+		}
+	};
+
+	var graph1 = new PieChart(presenterData.graph1Data, graphParams1, null, null);
+	graph1.drawChart();
+	var graphParams2 = graphParams1;
+	graphParams2.canvas.containerId = "graph2";
+	var graph2 = new PieChart(presenterData.graph2Data, graphParams2, null, null);
+	graph2.drawChart();
+	var graphParams3 = graphParams1;
+	graphParams3.canvas.containerId = "graph3";
+	var graph3 = new PieChart(presenterData.graph3Data, graphParams3, null, null);
+	graph3.drawChart();
+
+	var indicatorPrincipalData = widgetBuilder.getIndicatorLoadedById(presenterData.id)
+	setIndicatorActiveMarker();
+	$('#relatedLabel').hide();
+}
+
+var fillStatusIndicatorFirstViewDetail = function(presenterData) {
+	var widgetBuilder = new WidgetBuilder();
+	var gridDetail = $('#relatedDetailGridStack').data('gridstack');
+	//gridDetail.remove_all();
+	$.each(presenterData.dataList, function(index, dataItem) {
+		var $widget = widgetBuilder.buildStatusIndicatorFirstViewDetail(dataItem);
+		var x = (index % 2 == 0) ? 6 : 0;
+		gridDetail.add_widget($widget, x, 15, 6, 2, true);
+	});
+	if (window.currentIndicator.type == "1010") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_PROCESS']);
+	}
+	if (window.currentIndicator.type == "1030") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_GROUPS']);
+	}
+	if (window.currentIndicator.type == "1050") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_PROCESS']);
+	}
+}
+
+var fillSpecialIndicatorFirstView = function(presenterData) {
+	$('#relatedLabel').show();
+	var widgetBuilder = new WidgetBuilder();
+	var panel = $('#indicatorsDataGridStack').data('gridstack');
+	panel.remove_all();
+	$('#relatedDetailGridStack').data('gridstack').remove_all();
+
+	var $widget = widgetBuilder.buildSpecialIndicatorFirstView(presenterData);
+	panel.add_widget($widget, 0, 15, 20, 4.7, true);
+	  var peiParams = {
+        canvas : {
+            containerId:'specialIndicatorGraph',
+            width:300,
+            height:300,
+            stretch:true
+        },
+        graph: {
+            allowDrillDown:false,
+            allowTransition:true,
+            showTip: true,
+            allowZoom: false,
+            gapWidth:0.3,
+            useShadows: true,
+            thickness: 30,
+            showLabels: true
+        }
+    };
+
+    var ueiParams = {
+		canvas : {
+			containerId:'specialIndicatorGraph',
+			width:500,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowDrillDown:false,
+			allowTransition:true,
+			axisX:{ showAxis: true, label: "Group" },
+			axisY:{ showAxis: true, label: "Cost" },
+			gridLinesX:false,
+			gridLinesY:true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: true,
+			paddingTop: 50
+		}
+    };
+
+	var indicatorPrincipalData = widgetBuilder.getIndicatorLoadedById(presenterData.id)
+
+	if (indicatorPrincipalData.type == "1010") {
+		var graph = new Pie3DChart(presenterData.dataToDraw, peiParams, null, null);
+		graph.drawChart();
+		//the pie chart goes to much upwards,so a margin is added:
+		$('#specialIndicatorGraph').css('margin-top','60px');
+	}
+
+	if (indicatorPrincipalData.type == "1030") {
+		var graph = new BarChart(presenterData.dataToDraw, ueiParams, null, null);
+		graph.drawChart();
+	}
+	
+
+	this.fillSpecialIndicatorFirstViewDetail(presenter.orderDataList(presenterData.data, selectedOrderOfDetailList()));
+	setIndicatorActiveMarker();
+}
+
+var fillSpecialIndicatorFirstViewDetail = function (list) {
+	//presenterData = { id: "indId", efficiencyIndex: "0.11764706", efficiencyVariation: -0.08235294,
+	// 					inefficiencyCost: "-127.5000", inefficiencyCostToShow: -127, efficiencyIndexToShow: 0.12
+	// 					data: {indicatorId, uid, name, averateTime...}, dataToDraw: [{datalabe, value}] }
+	var widgetBuilder = new WidgetBuilder();
+	var gridDetail = $('#relatedDetailGridStack').data('gridstack');
+	gridDetail.remove_all();
+	
+	window.currentDetailList = list;	
+	window.currentDetailFunction = fillSpecialIndicatorFirstViewDetail;
+
+	$.each(list, function(index, dataItem) {
+		var $widget = widgetBuilder.buildSpecialIndicatorFirstViewDetail(dataItem);
+		var x = (index % 2 == 0) ? 6 : 0;
+		//the first 2 elements are not hidden
+		if (index < 2) {
+			$widget.removeClass("hideme");
+		}
+		gridDetail.add_widget($widget, x, 15, 6, 2, true);
+	});
+	if (window.currentIndicator.type == "1010") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_PROCESS']);
+	}
+	if (window.currentIndicator.type == "1030") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_GROUPS']);
+	}
+	hideScrollIfAllDivsAreVisible();
+}
+
+var fillSpecialIndicatorSecondView = function(presenterData) {
+	//presenterData= object {dataToDraw[], entityData[] //user/tasks data}
+	var widgetBuilder = new WidgetBuilder();
+	var panel = $('#indicatorsDataGridStack').data('gridstack');
+	panel.remove_all();
+	var $widget = widgetBuilder.buildSpecialIndicatorSecondView(presenterData);
+	panel.add_widget($widget, 0, 15, 20, 4.7, true);
+	var detailParams = {
+		canvas : {
+			containerId:'specialIndicatorGraph',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowTransition: false,
+			allowDrillDown: true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: false,
+			gridLinesX: true,
+			gridLinesY: true,
+			area: {visible: false, css:"area"},
+			axisX:{ showAxis: true, label: "User" },
+			axisY:{ showAxis: true, label: "Cost" },
+			showErrorBars: true
+
+		}
+	};
+
+	var indicatorPrincipalData = widgetBuilder.getIndicatorLoadedById(window.currentEntityData.indicatorId);
+
+	if (window.currentIndicator.type == "1010") {
+		detailParams.graph.axisX.label = "Task";
+		var graph = new BarChart(presenterData.dataToDraw, detailParams, null, null);
+		graph.drawChart();
+	}
+
+	if (window.currentIndicator.type == "1030") {
+		var graph = new BarChart(presenterData.dataToDraw, detailParams, null, null);
+		graph.drawChart();
+	}
+	this.fillSpecialIndicatorSecondViewDetail(presenter.orderDataList(presenterData.entityData, selectedOrderOfDetailList()));
+}
+
+var fillSpecialIndicatorSecondViewDetail = function (list) {
+	//presenterData =  { entityData: Array[{name,uid,inefficiencyCost,
+	// 									inefficiencyIndex, deviationTime,
+	// 									averageTime}],
+	// 						dataToDraw: Array[{datalabel, value}] }
+	var widgetBuilder = new WidgetBuilder();
+	var gridDetail = $('#relatedDetailGridStack').data('gridstack');
+	gridDetail.remove_all();
+
+	window.currentDetailList = list;	
+	window.currentDetailFunction = fillSpecialIndicatorSecondViewDetail;
+
+	$.each(list, function(index, dataItem) {
+		if (window.currentIndicator.type == "1010") {
+			var $widget = widgetBuilder.buildSpecialIndicatorSecondViewDetailPei(dataItem);
+		}
+
+		if (window.currentIndicator.type == "1030") {
+			var $widget = widgetBuilder.buildSpecialIndicatorSecondViewDetailUei(dataItem);
+		}
+
+		var x = (index % 2 == 0) ? 6 : 0;
+		//the first 2 elements are not hidden
+		if (index < 2) {
+			$widget.removeClass("hideme");
+		}
+		gridDetail.add_widget($widget, x, 15, 6, 2, true);
+	});
+
+	if (window.currentIndicator.type == "1010") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_TASKS']);
+	}
+	if (window.currentIndicator.type == "1030") {
+		$('#relatedLabel').find('h3').text(G_STRING['ID_RELATED_USERS']);
+	}
+	hideScrollIfAllDivsAreVisible();
+}
+
+var fillGeneralIndicatorFirstView = function (presenterData) {
+	var widgetBuilder = new WidgetBuilder();
+	var panel = $('#indicatorsDataGridStack').data('gridstack');
+	panel.remove_all();
+	$('#relatedDetailGridStack').data('gridstack').remove_all();
+
+	var $widget = widgetBuilder.buildGeneralIndicatorFirstView(presenterData);
+	panel.add_widget($widget, 0, 15, 20, 4.7, true);
+
+	$('#relatedLabel').find('h3').text('');
+
+	var generalLineParams1 = {
+		canvas : {
+			containerId:'generalGraph1',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowTransition: false,
+			allowDrillDown: true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: false,
+			gridLinesX: true,
+			gridLinesY: true,
+			area: {visible: false, css:"area"},
+			axisX:{ showAxis: true, label: G_STRING.ID_PROCESS_TASKS },
+			axisY:{ showAxis: true, label: G_STRING.ID_TIME_HOURS },
+			showErrorBars: false
+		}
+	};
+
+	var generalLineParams2 = {
+		canvas : {
+			containerId:'generalGraph2',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowTransition: false,
+			allowDrillDown: true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: false,
+			gridLinesX: true,
+			gridLinesY: true,
+			area: {visible: false, css:"area"},
+			axisX:{ showAxis: true, label: G_STRING.ID_PROCESS_TASKS },
+			axisY:{ showAxis: true, label: G_STRING.ID_TIME_HOURS },
+			showErrorBars: false
+		}
+	};
+
+	var generalBarParams1 = {
+		canvas : {
+			containerId:'generalGraph1',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowDrillDown:false,
+			allowTransition:true,
+			axisX:{ showAxis: true, label: G_STRING.ID_YEAR },
+			axisY:{ showAxis: true, label: "Q" },
+			gridLinesX:false,
+			gridLinesY:true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: true,
+			paddingTop: 50,
+			colorPalette: ['#5486bf','#bf8d54','#acb30c','#7a0c0c','#bc0000','#906090','#007efb','#62284a','#0c7a7a','#74a9a9']
+		}
+	};
+
+	var generalBarParams2 = {
+		canvas : {
+			containerId:'generalGraph2',
+			width:300,
+			height:300,
+			stretch:true
+		},
+		graph: {
+			allowDrillDown:false,
+			allowTransition:true,
+			axisX:{ showAxis: true, label: G_STRING.ID_YEAR },
+			axisY:{ showAxis: true, label: "Q" },
+			gridLinesX:false,
+			gridLinesY:true,
+			showTip: true,
+			allowZoom: false,
+			useShadows: true,
+			paddingTop: 50,
+			colorPalette: ['#5486bf','#bf8d54','#acb30c','#7a0c0c','#bc0000','#906090','#007efb','#62284a','#0c7a7a','#74a9a9']
+		}
+	};
+
+	var graph1 = null;
+	if (presenterData.graph1Type == '10') {
+		generalBarParams1.graph.axisX.label = presenterData.graph1XLabel;
+		generalBarParams1.graph.axisY.label = presenterData.graph1YLabel;
+		graph1 = new BarChart(presenterData.graph1Data, generalBarParams1, null, null);
+	} else {
+		generalLineParams1.graph.axisX.label = presenterData.graph1XLabel;
+		generalLineParams1.graph.axisY.label = presenterData.graph1YLabel;
+		graph1 = new LineChart(presenterData.graph1Data, generalLineParams1, null, null);
+	}
+	graph1.drawChart();
+
+	var graph2 = null;
+	if (presenterData.graph2Type == '10') {
+		generalBarParams2.graph.axisX.label = presenterData.graph2XLabel;
+		generalBarParams2.graph.axisY.label = presenterData.graph2YLabel;
+		graph2 = new BarChart(presenterData.graph2Data, generalBarParams2, null, null);
+	} else {
+		generalLineParams2.graph.axisX.label = presenterData.graph2XLabel;
+		generalLineParams2.graph.axisY.label = presenterData.graph2YLabel;
+		graph2 = new LineChart(presenterData.graph2Data, generalLineParams2, null, null);
+	}
+	graph2.drawChart();
+
+	setIndicatorActiveMarker();
+}
+
+var animateProgress = function (indicatorItem, widget){
+      var getRequestAnimationFrame = function () {
+        return window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||   
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame ||
+        function ( callback ){
+          window.setTimeout(enroute, 1 / 60 * 1000);
+        };
+      };
+
+      var fpAnimationFrame = getRequestAnimationFrame();   
+      var i = 0;
+      var j = 0;
+
+	  var indicator = indicatorItem;
+	  var animacion = function () {
+		  var intComparative = parseInt(indicator.comparative);
+		  var divId = "#indicatorButton" + indicator.id;
+		  var $valueLabel = widget
+				.find('.ind-value-selector');
+		  var $progressBar = widget
+				.find('.ind-progress-selector');
+
+		  if (!($valueLabel.length > 0)) {throw new Error ('"No ind-value-selector found for " + divId');}
+		  this.helper.assert($progressBar.length > 0, "No ind-progress-selector found for " + divId);
+		  $progressBar.attr('aria-valuemax', intComparative);
+		  var indexToPaint = Math.min(indicator.value * 100 / intComparative, 100);
+		  
+		  if (i <= indexToPaint) {
+			  $progressBar.css('width', i+'%').attr('aria-valuenow', i);
+			  i++;
+			  fpAnimationFrame(animacion);
+		  }
+		  
+		  if(j <= indicator.value){
+			  $valueLabel.text(j + "%");
+			  j++;
+			  fpAnimationFrame(animacion);
+		  }
+		  
+	  }
+	fpAnimationFrame(animacion); 
+};
+
+/*var dashboardButtonTemplate = ' <div class="btn-group pull-left"> \ 
+								<button id="favorite" type="button" class="btn btn-success"><i class="fa fa-star fa-1x"></i></button> \
+								<button id="dasB" type="button" class="btn btn-success">'+ G_STRING.ID_MANAGERS_DASHBOARDS +'</button> \
+							</div>';*/
+
+
+
--- a/workflow/engine/templates/strategicDashboard/viewDashboard.html
+++ b/workflow/engine/templates/strategicDashboard/viewDashboard.html
@@ -242,15 +242,15 @@
 				<div class="col-xs-12 vcenter-task">
 					<div class="col-xs-4 ">
 						<div  class="blue small"><%- detailData.percentageOverdue%> %</div>
-						<div class="smallB grey fontMedium detail-efficiency-selector">Overdue</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">{translate label="ID_OVERDUE"}</div>
 					</div>
 					<div class="col-xs-4">
 						<div  class="blue small"><%- detailData.percentageAtRisk%> %</div>
-						<div class="smallB grey fontMedium detail-efficiency-selector">At Risk</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">{translate label="ID_AT_RISK"}</div>
 					</div>
 					<div class="col-xs-4 ">
 						<div  class="blue small"><%- detailData.percentageOnTime%> %</div>
-						<div class="smallB grey fontMedium detail-efficiency-selector">On Time</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">{translate label="ID_ON_TIME"}</div>
 					</div>
 				</div>
 				<div class="clearfix"></div>
@@ -294,15 +294,15 @@
 			</div>
 			<div class="text-center huge" style="margin:0 auto; width:98%;">
 				<div class="col-xs-4" style="width:auto;">
-					<div class="status-graph-title-low">Overdue:</div>
+					<div class="status-graph-title-low">{translate label="ID_OVERDUE"}:</div>
 					<div id="graph1" style="width:400px; height:300px;"></div>	
 				</div>
 				<div class="col-xs-4" style="width:auto;">
-					<div class="status-graph-title-medium">At Risk:</div>
+					<div class="status-graph-title-medium">{translate label="ID_AT_RISK"}:</div>
 					<div id="graph2" style="width:400px; height:300px;"></div>	
 				</div>
 				<div class="col-xs-4" style="width:auto;">
-					<div class="status-graph-title-high">On Time:</div>
+					<div class="status-graph-title-high">{translate label="ID_ON_TIME"}:</div>
 					<div id="graph3" style="width:400px; height:300px;"></div>	
 				</div>
 			</div>
--- a/workflow/engine/templates/strategicDashboard/viewDashboardIE.html
+++ b/workflow/engine/templates/strategicDashboard/viewDashboardIE.html
@@ -1,17 +1,450 @@
-
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Dashboards</title>
+
+    <link rel="stylesheet" href="/lib/pmdynaform/libs/bootstrap-3.1.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/sb-admin-2.css">
+    <link rel="stylesheet" href="/css/font-awesome.min.css">
+
+    <link href="/css/gridstack.css" rel="stylesheet">
+    <link href="/css/general.css" rel="stylesheet">
+    <link href="/css/dashboardStylesForIE.css" rel="stylesheet">
+
+    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Chivo:400,400italic' rel='stylesheet' type='text/css'>
+
+    <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="/js/jquery/jquery-ui-1.11.2.min.js" ></script>
+    <script src="/lib/pmdynaform/libs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
+    <script src="/lib/pmdynaform/libs/underscore/underscore.js"></script>
+    <script type="text/javascript" >
+        var urlProxy = '{$urlProxy}';
+        var pageUserId = '{$usrId}';
+        var token = '{$credentials.access_token}';
+        var G_STRING = [];
+        {foreach from=$translation key=index item=option}
+            G_STRING['{$index}'] = "{$option}";
+        {/foreach}
+    </script>
+
+    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardHelper.js"></script>
+    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardModel.js"></script>
+    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardPresenter.js"></script>
+    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardViewIE.js"></script>
+
+	<script type="text/template" class="specialIndicatorButtonTemplate">
+		<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
+			 id="indicatorButton-<%- indicator.id %>"
+			 data-indicator-id="<%- indicator.id %>"
+			 data-indicator-type="<%- indicator.type %>"
+			 data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
+			<div class="ind-container-selector panel panel-green grid-stack-item-content" style="min-width:200px;">
+				<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
+					<div class="panel-heading" >
+						<div class="row">
+							<div class="col-xs-3">
+								<div class="huge ind-value-selector"><%- indicator.value %></div>
+							</div>
+							<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x"></i>
+								<div class="small ind-comparative-selector">
+									<%- indicator.comparative %> (<%- indicator.percentComparative %> %)
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="panel-footer text-center ind-title-selector">
+						<%- indicator.title %>
+					</div>
+				</a>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="statusIndicatorButtonTemplate">
+		<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
+			 id="indicatorButton-<%- indicator.id %>"
+			 data-indicator-id="<%- indicator.id %>"
+			 data-indicator-type="<%- indicator.type %>"
+			 data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
+			<div class="ind-container-selector panel grid-stack-item-content" style="min-width:200px;">
+				<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
+					<div class="panel-heading status-indicator-low"
+						 style=" width:<%- indicator.percentageOverdue %>%;
+						 		visibility: <%- indicator.overdueVisibility %>" >
+						<div class="row">
+							<div class="col-xs-12">
+								<div class="small ind-comparative-selector"><%- indicator.percentageOverdue %>%</div>
+							</div>
+						</div>
+					</div>
+					<div class="panel-heading status-indicator-medium"
+						 style=" width:<%- indicator.percentageAtRisk %>%;
+						 		visibility: <%- indicator.atRiskVisibility %>;" >
+						<div class="row">
+							<div class="col-xs-12">
+								<div class="small ind-comparative-selector"><%- indicator.percentageAtRisk %>%</div>
+							</div>
+						</div>
+					</div>
+					<div class="panel-heading status-indicator-high"
+						 style=" width:<%- indicator.percentageOnTime %>%;
+						 		visibility: <%- indicator.onTimeVisibility %>;">
+						<div class="row">
+							<div class="col-xs-12">
+								<div class="small ind-comparative-selector"><%- indicator.percentageOnTime %>%</div>
+							</div>
+						</div>
+					</div>
+					<div class="panel-footer text-center ind-title-selector" style="clear:both;">
+						<%- indicator.title %>
+					</div>
+				</a>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="indicatorButtonTemplate">
+		<div class="col-lg-3 col-md-6 ind-button-selector" id="generalLowItem"
+					id="indicatorButton-<%- indicator.id %>"
+					data-indicator-id="<%- indicator.id %>"
+					data-indicator-type="<%- indicator.type %>"
+					data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2" >
+			<div class="panel ie-panel panel-low grid-stack-item-content ind-container-selector" style="min-width: 200px;">
+				<a data-toggle="collapse" href="#completedcases" aria-expanded="false" aria-controls="completedcases">
+					<div class="panel-heading"> <div class="row"> <div class="col-xs-3">
+								<div class="huge ind-value-selector">X</div>
+							</div>
+							<div class="col-xs-9 text-right"><i class="fa fa-file-text-o fa-3x"></i>
+								<div class="small ind-comparative-selector ellipsis"><%- indicator.comparative %></div>
+							</div>
+						</div>
+					</div>
+					<div class="progress progress-xs progress-dark-base ie-progress-dark-base mar-no">
+						<div role="progressbar"
+							aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+							class="progress-bar progress-bar-light ind-progress-selector"
+							style="width: 0%">
+						</div>
+					</div>
+					<div class="panel-footer text-center ind-title-selector">
+						<span>
+						<%- indicator.title %>
+						</span>
+					</div>
+				</a>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="specialIndicatorMainPanel">
+		<div class="process-div well" id="specialIndicatorMainPanel"
+			data-gs-no-resize="true"
+			style="clear:both;position:relative;height:auto;">
+
+            <div class="panel-heading bluebg sind-title-selector"">
+                <ol class="breadcrumb">
+                </ol>
+            </div>
+
+			<div class="text-center huge">
+				<div class="col-xs-3 vcenter">
+					<div class="green"><%- indicator.efficiencyIndexToShow %></div>
+					<div class="small grey sind-index-selector ellipsis"></div>
+				</div>
+				<div class="col-xs-3 vcenter" style="margin-right:40px">
+					<div class="red sind-cost-number-selector"><%- indicator.inefficiencyCostToShow %></div>
+					<div class="small grey sind-cost-selector ellipsis"></div>
+				</div>
+				<div class="col-xs-6" id="specialIndicatorGraph" style="width:540px;height:300px;"></div>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+	</script>
+
+	<script type="text/template" class="specialIndicatorDetail">
+		<div  class="process-div well hideme  detail-button-selector" data-gs-no-resize="true"
+			  id="detailData-<%- detailData.uid %>"
+			  data-indicator-id="<%- detailData.indicatorId %>"
+			  data-detail-id="<%- detailData.uid %>"
+			  data-detail-index="<%- detailData.efficiencyIndexToShow %>"
+			  data-detail-cost-to-show="<%- detailData.inefficiencyCostToShow %>"
+			  data-detail-cost="<%- detailData.inefficiencyCost%>"
+			  data-detail-name="<%- detailData.name %>"
+            >
+			<div class="col-lg-12 vcenter-task">
+				<a href="#" class="process-button">
+					<div class="col-xs-5 text-left title-process">
+						<div  class="small grey detail-title-selector"> <%- detailData.name %></div>
+					</div>
+					<div class="col-xs-3 text-center ">
+						<div class="blue"><%- detailData.efficiencyIndexToShow%></div>
+						<div class="small grey detail-efficiency-selector ellipsis"></div>
+					</div>
+					<div class="col-xs-3 text-center ">
+						<div class="red detail-cost-number-selector"><%- detailData.inefficiencyCostToShow %></div>
+						<div class="small grey detail-cost-selector ellipsis"></div>
+					</div>
+					<div class="col-xs-1 text-right arrow"><i class="fa fa-chevron-right fa-fw"></i></div>
+				</a>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+	</script>
+
+	<script type="text/template" class="specialIndicatorSencondViewDetailUei">
+		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
+			 id="detailData-<%- detailData.uid %>"
+			 data-indicator-id="<%- detailData.indicatorId %>"
+			 data-detail-id="<%- detailData.uid %>">
+			<div class="panel-heading greenbg">
+				<div class="col-xs-12 text-center detail-title-selector">
+					<i class="fa fa-tasks fa-fw"></i> 
+					<span id="usrName"><%- detailData.name %> </span>
+					<span>(<%- detailData.rankToShow %>)</span>
+				 </div>
+				<div class="clearfix"></div>
+			</div>
+			<div class="text-center huge">
+				<div class="col-xs-12 vcenter-task">
+					<div class="col-xs-6 ">
+						<div class="blue small"><%- detailData.efficiencyIndexToShow%></div>
+						<div class="smallB grey detail-efficiency-selector ellipsis"></div>
+					</div>
+					<div class="col-xs-6 ">
+						<div class="small detail-cost-number-selector"><%- detailData.inefficiencyCostToShow%></div>
+						<div class="smallB grey detail-cost-selector ellipsis"></div>
+					</div>
+				</div>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="specialIndicatorSencondViewDetailPei">
+		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
+			 id="detailData-<%- detailData.uid %>"
+			 data-indicator-id="<%- detailData.indicatorId %>"
+			 data-detail-id="<%- detailData.uid %>">
+			<div class="panel-heading greenbg">
+				<div class="col-xs-12 text-center detail-title-selector">
+					<i class="fa fa-tasks fa-fw"></i> 
+					<span id="usrName"><%- detailData.name %> </span>
+				 </div>
+				<div class="clearfix"></div>
+			</div>
+			<div class="text-center huge">
+				<div class="col-xs-12 vcenter-task">
+					<div class="col-xs-6 ">
+						<div class="blue small"><%- detailData.efficiencyIndexToShow%></div>
+						<div class="smallB grey detail-efficiency-selector ellipsis"></div>
+					</div>
+					<div class="col-xs-6 ">
+						<div class="small detail-cost-number-selector"><%- detailData.inefficiencyCostToShow%></div>
+						<div class="smallB grey detail-cost-selector ellipsis"></div>
+					</div>
+				</div>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="statusDetail">
+		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
+			 id="detailData-<%- detailData.uid %>"
+			 data-indicator-id="<%- detailData.indicatorId %>"
+			 data-detail-id="<%- detailData.uid %>">
+			<div class="panel-heading greenbg">
+				<div class="col-xs-12 text-center detail-title-selector"><i class="fa fa-tasks fa-fw"></i> <span id="usrName"><%- detailData.taskTitle %></span> </div>
+				<div class="clearfix"></div>
+			</div>
+			<div class="text-center huge">
+				<div class="col-xs-12 vcenter-task">
+					<div class="col-xs-4 ">
+						<div  class="blue small"><%- detailData.percentageOverdue%> %</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">Overdue</div>
+					</div>
+					<div class="col-xs-4">
+						<div  class="blue small"><%- detailData.percentageAtRisk%> %</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">At Risk</div>
+					</div>
+					<div class="col-xs-4 ">
+						<div  class="blue small"><%- detailData.percentageOnTime%> %</div>
+						<div class="smallB grey fontMedium detail-efficiency-selector">On Time</div>
+					</div>
+				</div>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</script>
+
+	<script type="text/template" class="dashboardButtonTemplate">
+		<div id="dashboardButton-<%- dashboard.id %>" class="btn-group pull-left"
+			data-dashboard-id="<%- dashboard.id %>" >
+			<button  type="button" class="btn btn-success das-icon-selector">
+				<i class="fa fa-star fa-1x"></i>
+			</button>
+			<button   type="button" class="btn btn-success das-title-selector" >
+				<%- dashboard.title %>
+			</button>
+		</div>
+	</script>
+
+	<script type="text/template" class="generalIndicatorMainPanel">
+        <div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
+            <div class="panel-heading bluebg">
+                <ol class="breadcrumb">
+                    <li class="ind-title-selector"></li>
+                </ol>
+            </div>
+            <div class="text-center huge">
+                <div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png" /></div>
+                <div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px;margin-left:60px;"><img src="../dist/img/graph.png" /></div>
+            </div>
+            <div class="clearfix"></div>
+        </div>
+    </script>
+
+	<script type="text/template" class="statusIndicatorMainPanel">
+		<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
+			<div class="panel-heading bluebg">
+				<ol class="breadcrumb">
+					<li class="ind-title-selector"></li>
+				</ol>
+			</div>
+			<div class="text-center huge" style="margin:0 auto; width:98%;">
+				<div class="col-xs-4" style="width:auto;">
+					<div class="status-graph-title-low">Overdue:</div>
+					<div id="graph1" style="width:400px; height:300px;"></div>	
+				</div>
+				<div class="col-xs-4" style="width:auto;">
+					<div class="status-graph-title-medium">At Risk:</div>
+					<div id="graph2" style="width:400px; height:300px;"></div>	
+				</div>
+				<div class="col-xs-4" style="width:auto;">
+					<div class="status-graph-title-high">On Time:</div>
+					<div id="graph3" style="width:400px; height:300px;"></div>	
+				</div>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+	</script>
 	
 </head>
+	
+
 <body id="page-top" class="index">
-  
  <div id="wrapper">
-	For better compatibility with Internet Explorer, a new tab with the KPIs has been opened. Please select this tab on the tab list above to see all the KPI's functionality.
-  </div>
+    <div id="page-wrapper">
+		<div class="title-process" style="height:50px;"> </div>
+		<div class="title-process" style="margin-top:50px; width:500px; clear:both; border:1px solid #999; margin:0 auto; padding:15px;">
+			This is just a basic view of your indexes. For better compatibility with Internet Explorer, a new tab with the KPIs has been opened. Please select this new tab on the tab list above to see all our KPIs functionality. 	
+		</div>
+          <!--Cabezera-->
+            <div class="row" style="visibility:hidden;">
+                <div class="col-lg-12">
+                    <div class="panel panel-default">
+                      <div class="panel-body">
+                        <a class="btn btn-primary dashboard-button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+                        <i class="fa fa-bar-chart fa-2x"></i>
+                        <i class="fa fa-chevron-down fa-1x"></i>
+                        </a>
+                        <h4 id="titleH4" class="header-dashboard">{translate label="ID_MANAGERS_DASHBOARDS"}</h4>
+                        <div class="pull-right dashboard-right container-fluid">

+							<div class="row pull-left">
+								<div class="span4 pull-left">
+									<h5 class="pull-left">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
+								</div>
+
+
+								<div class="span4 pull-left">
+									<select id="year" class="form-control pull-right ">
+									{literal}
+									<script>
+										now = new Date();
+										anio = now.getFullYear();
+										for(a=anio;a>=anio-7;a--){
+										document.write('<option value="'+a+'">'+a+'</option>');
+										}
+									</script>
+									{/literal}
+									</select>
+
+									<select id="month" class="form-control pull-right ">
+									  <option value="1">{translate label="ID_MONTH_ABB_1"}</option>
+									  <option value="2">{translate label="ID_MONTH_ABB_2"}</option>
+									  <option value="3">{translate label="ID_MONTH_ABB_3"}</option>
+									  <option value="4">{translate label="ID_MONTH_ABB_4"}</option>
+									  <option value="5">{translate label="ID_MONTH_ABB_5"}</option>
+									  <option value="6">{translate label="ID_MONTH_ABB_6"}</option>
+									  <option value="7">{translate label="ID_MONTH_ABB_7"}</option>
+									  <option value="8">{translate label="ID_MONTH_ABB_8"}</option>
+									  <option value="9">{translate label="ID_MONTH_ABB_9"}</option>
+									  <option value="10">{translate label="ID_MONTH_ABB_10"}</option>
+									  <option value="11">{translate label="ID_MONTH_ABB_11"}</option>
+									  <option value="12">{translate label="ID_MONTH_ABB_12"}</option>
+									</select>
+								</div>
+
+								<div class="span4 pull-left">
+									<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
+								</div>
+
+							</div>
+                        </div>
+                        <div class="clearfix"></div>
+                        <div class="collapse" id="collapseExample">
+                          <div class="well">
+                            <p class="text-center">{translate label="ID_DASH_CLICK_TO_VIEW"}</p>
+                            <p>
+                                <!-- Split button -->
+                              <div id="dashboardsList">
+                              </div>
+                            </p>
+                            <div class="clearfix"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+                <!-- /.col-lg-12 -->
+            </div>
+          <!-- Indicators -->
+          <div class="row">
+              <div class="indicators">
+                <div id="indicatorsGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
+                  <!--Here are added dynamically the Indicators-->
+                </div>
+              </div>
+            <!-- Details by Indicator -->
+              <div class="col-lg-12 col-md-12 bottom">
+                  <div id="indicatorsDataGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
+                  <!--Here are added dynamically the Dat by indicator-->
+                  </div>
+              </div>
+
+			  <div id="relatedLabel" style="clear:both; visibility:hidden;">
+					<div>
+						<center><h3></h3></center>
+					</div>
+					<div>
+						Sort by Cost: &nbsp; &nbsp;<a id="sortListButton" class="fa fa-chevron-up fa-1x" style="color:#000;" href="#"></a>
+					</div>
+			  </div>
+
+              <div class="col-lg-12 col-md-12">
+				  <div id="relatedDetailGridStack" class="grid-stack" data-gs-width="12" 
+							data-gs-animate="no" style="clear:both;">
+                   </div>
+              </div>
+            </div>
+    </div>
+  </div>

 </body>
 </html>

-