From 9ebf0ce1e5a483c7489632d7845c38ad08f46e42 Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Fri, 29 Jan 2021 17:02:05 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B03535=20Migrate=20dashboard=20editor=20mo?=
 =?UTF-8?q?dal=20to=20new=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/dashboard.class.inc.php           |  83 +++++++-------
 application/dashlet.class.inc.php             |  18 +--
 application/forms.class.inc.php               |  24 ++--
 css/backoffice/components/_all.scss           |   1 +
 css/backoffice/components/_prop.scss          |  28 +++++
 css/backoffice/components/input/_all.scss     |   3 +
 .../components/input/_input-checkbox.scss     |   7 ++
 .../components/input/_input-select-icon.scss  |  44 ++++++++
 .../components/input/_input-textarea.scss     |   5 +
 css/backoffice/layout/_all.scss               |   2 +-
 css/backoffice/layout/dashboard/_all.scss     |  20 ++++
 .../layout/dashboard/_dashboard-editor.scss   | 104 ++++++++++++++++++
 css/backoffice/vendors/_jqueryui.scss         |  46 +++++++-
 images/dashlets/icons8-badge-48.png           | Bin 0 -> 1540 bytes
 images/dashlets/icons8-bar-chart-48.png       | Bin 0 -> 277 bytes
 images/dashlets/icons8-header-1-48.png        | Bin 0 -> 319 bytes
 images/dashlets/icons8-header-48.png          | Bin 0 -> 757 bytes
 images/dashlets/icons8-header-altered-48.png  | Bin 0 -> 10086 bytes
 images/dashlets/icons8-list-48.png            | Bin 0 -> 307 bytes
 images/dashlets/icons8-pie-chart-48.png       | Bin 0 -> 1277 bytes
 images/dashlets/icons8-text-box-48.png        | Bin 0 -> 1164 bytes
 .../dashlets/icons8-transaction-list-48.png   | Bin 0 -> 315 bytes
 js/dashlet.js                                 |   2 +-
 js/icon_select.js                             |   6 +-
 js/property_field.js                          |  12 +-
 25 files changed, 336 insertions(+), 69 deletions(-)
 create mode 100644 css/backoffice/components/_prop.scss
 create mode 100644 css/backoffice/components/input/_input-checkbox.scss
 create mode 100644 css/backoffice/components/input/_input-select-icon.scss
 create mode 100644 css/backoffice/components/input/_input-textarea.scss
 create mode 100644 css/backoffice/layout/dashboard/_all.scss
 create mode 100644 css/backoffice/layout/dashboard/_dashboard-editor.scss
 create mode 100644 images/dashlets/icons8-badge-48.png
 create mode 100644 images/dashlets/icons8-bar-chart-48.png
 create mode 100644 images/dashlets/icons8-header-1-48.png
 create mode 100644 images/dashlets/icons8-header-48.png
 create mode 100644 images/dashlets/icons8-header-altered-48.png
 create mode 100644 images/dashlets/icons8-list-48.png
 create mode 100644 images/dashlets/icons8-pie-chart-48.png
 create mode 100644 images/dashlets/icons8-text-box-48.png
 create mode 100644 images/dashlets/icons8-transaction-list-48.png

diff --git a/application/dashboard.class.inc.php b/application/dashboard.class.inc.php
index 49302f467..dc4173673 100644
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -442,11 +442,11 @@ abstract class Dashboard
 	public function RenderProperties($oPage, $aExtraParams = array())
 	{
 		// menu to pick a layout and edit other properties of the dashboard
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:Properties').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard--properties"><div class="ui-widget-header ui-corner-all ibo-dashboard--properties--title">'.Dict::S('UI:DashboardEdit:Properties').'</div>');
 		$sUrl = utils::GetAbsoluteUrlAppRoot();
 
-		$oPage->add('<div style="text-align:center">'.Dict::S('UI:DashboardEdit:Layout').'</div>');
-		$oPage->add('<div id="select_layout" style="text-align:center">');
+		$oPage->add('<div class="ibo-dashboard--properties--subtitle">'.Dict::S('UI:DashboardEdit:Layout').'</div>');
+		$oPage->add('<div id="select_layout" class="ibo-dashboard--properties--layout-list">');
 		foreach( get_declared_classes() as $sLayoutClass)
 		{
 			if (is_subclass_of($sLayoutClass, 'DashboardLayout'))
@@ -457,7 +457,7 @@ abstract class Dashboard
 					$aCallSpec = array($sLayoutClass, 'GetInfo');
 					$aInfo = call_user_func($aCallSpec);
 					$sChecked = ($this->sLayoutClass == $sLayoutClass) ? 'checked' : '';
-					$oPage->add('<input type="radio" name="layout_class" '.$sChecked.' value="'.$sLayoutClass.'" id="layout_'.$sLayoutClass.'"><label for="layout_'.$sLayoutClass.'"><img src="'.$sUrl.$aInfo['icon'].'" /></label>'); // title="" on either the img or the label does nothing !
+					$oPage->add('<input type="radio" name="layout_class" '.$sChecked.' value="'.$sLayoutClass.'" id="layout_'.$sLayoutClass.'"><label for="layout_'.$sLayoutClass.'"><img src="'.$sUrl.$aInfo['icon'].'" class="ibo-dashboard--properties--icon"/></label>'); // title="" on either the img or the label does nothing !
 				}
 			}
 		}
@@ -488,7 +488,8 @@ abstract class Dashboard
 		$oPage->add_ready_script(
 <<<EOF
 	// Note: the title gets deleted by the validation mechanism
-	$("#attr_auto_reload_sec").tooltip({items: 'input', content: '$sRateTitle'});
+	$("#attr_auto_reload_sec").attr('data-tooltip-content', '$sRateTitle');
+	CombodoGlobalToolbox.InitTooltipFromMarkup($("#attr_auto_reload_sec"));
 	$("#attr_auto_reload_sec").prop('disabled', !$('#attr_auto_reload').is(':checked'));
 	
 	$('#attr_auto_reload').change( function(ev) {
@@ -578,19 +579,19 @@ JS
 	public function RenderDashletsSelection(WebPage $oPage)
 	{
 		// Toolbox/palette to drag and drop dashlets
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:Dashlets').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashboard--available-dashlets"><div class="ui-widget-header ui-corner-all ibo-dashboard--available-dashlet--title">'.Dict::S('UI:DashboardEdit:Dashlets').'</div>');
 		$sUrl = utils::GetAbsoluteUrlAppRoot();
 
-		$oPage->add('<div id="select_dashlet" style="text-align:center; max-height:120px; overflow-y:auto;">');
+		$oPage->add('<div id="select_dashlet" class="ibo-dashboard--available-dashlets--list">');
 		$aAvailableDashlets = $this->GetAvailableDashlets();
 		foreach($aAvailableDashlets as $sDashletClass => $aInfo)
 		{
-			$oPage->add('<span dashlet_class="'.$sDashletClass.'" class="dashlet_icon ui-widget-content ui-corner-all" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'" style="width:34px; height:34px; display:inline-block; margin:2px;"><img src="'.$sUrl.$aInfo['icon'].'" /></span>');
+			$oPage->add('<span dashlet_class="'.$sDashletClass.'" class="ibo-dashlet--icon dashlet_icon ui-widget-content ui-corner-all" id="dashlet_'.$sDashletClass.'" title="'.$aInfo['label'].'"><img src="'.$sUrl.$aInfo['icon'].'" /></span>');
 		}
 		$oPage->add('</div>');
 
 		$oPage->add('</div>');
-		$oPage->add_ready_script("$('.dashlet_icon').draggable({helper: 'clone', appendTo: 'body', zIndex: 10000, revert:'invalid'});");
+		$oPage->add_ready_script("$('.dashlet_icon').draggable({cursor: 'move', helper: 'clone', appendTo: 'body', zIndex: 10000, revert:'invalid'});");
 	}
 
 	/**
@@ -600,12 +601,12 @@ JS
 	public function RenderDashletsProperties(WebPage $oPage, $aExtraParams = array())
 	{
 		// Toolbox/palette to edit the properties of each dashlet
-		$oPage->add('<div class="ui-widget-content ui-corner-all"><div class="ui-widget-header ui-corner-all" style="text-align:center; padding: 2px;">'.Dict::S('UI:DashboardEdit:DashletProperties').'</div>');
+		$oPage->add('<div class="ui-widget-content ui-corner-all ibo-dashlet--properties"><div class="ui-widget-header ui-corner-all ibo-dashlet--properties--title">'.Dict::S('UI:DashboardEdit:DashletProperties').'</div>');
 
 		/** @var \DashboardLayoutMultiCol $oLayout */
 		$oLayout = new $this->sLayoutClass();
 
-		$oPage->add('<div id="dashlet_properties" style="text-align:center">');
+		$oPage->add('<div id="dashlet_properties">');
 		foreach($this->aCells as $iCellIdx => $aCell)
 		{
 			/** @var \Dashlet $oDashlet */
@@ -1221,12 +1222,12 @@ EOF
 		}
 		$aRenderParams['dashboard_div_id'] = $aExtraParams['dashboard_div_id'];
 		$sJSExtraParams = json_encode($aExtraParams);
-		$oPage->add('<div id="dashboard_editor">');
+		$oPage->add('<div id="dashboard_editor" class="ibo-dashboard-editor">');
 		$oPage->add('<div class="ui-layout-center">');
 		$this->SetCustomFlag(true);
 		$this->Render($oPage, true, $aRenderParams);
 		$oPage->add('</div>');
-		$oPage->add('<div class="ui-layout-east">');
+		$oPage->add('<div class="ui-layout-east ibo-dashboard-editor--pane">');
 		$this->RenderProperties($oPage, $aExtraParams);
 		$this->RenderDashletsSelection($oPage);
 		$this->RenderDashletsProperties($oPage, $aExtraParams);
@@ -1261,7 +1262,24 @@ $('#dashboard_editor').dialog({
 	modal: true,
 	title: '$sDialogTitle',
 	buttons: [
-	{ text: "$sOkButtonLabel", click: function() {
+	{ text: "$sCancelButtonLabel",
+	 class: "ibo-is-alternative",
+	 click: function() {
+		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
+		if (oDashboard.is_modified())
+		{
+			if (!confirm('$sCancelConfirmationMessage'))
+			{
+				return;
+			}
+		}
+		window.bLeavingOnUserAction = true;
+		$(this).dialog( "close" );
+		$(this).remove();
+	} },
+	{ text: "$sOkButtonLabel",
+	 class: "ibo-is-primary",
+	 click: function() {
 		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
 		if (oDashboard.is_dirty())
 		{
@@ -1277,19 +1295,6 @@ $('#dashboard_editor').dialog({
 		window.bLeavingOnUserAction = true;
 		oDashboard.save($(this));
 	} },
-	{ text: "$sCancelButtonLabel", click: function() {
-		var oDashboard = $('.itop-dashboard').data('itopRuntimedashboard');
-		if (oDashboard.is_modified())
-		{
-			if (!confirm('$sCancelConfirmationMessage'))
-			{
-				return;
-			}
-		}
-		window.bLeavingOnUserAction = true;
-		$(this).dialog( "close" );
-		$(this).remove();
-	} },
 	],
 	close: function() { $(this).remove(); }
 });
@@ -1307,20 +1312,16 @@ $('#dashboard_editor .ui-layout-center').runtimedashboard({
 	new_dashlet_parameters: {operation: 'new_dashlet'}
 });
 
-dashboard_prop_size = GetUserPreference('dashboard_prop_size', 350);
-$('#dashboard_editor').layout({
-	east: {
-		minSize: 200,
-		size: dashboard_prop_size,
-		togglerLength_open: 0,
-		togglerLength_closed: 0, 
-		onresize_end: function(name, elt, state, options, layout)
-		{
-			if (state.isSliding == false)
-			{
-				SetUserPreference('dashboard_prop_size', state.size, true);
-			}
-		},
+var dashboard_prop_size = GetUserPreference('dashboard_prop_size', 400);
+$('#dashboard_editor > .itop-dashboard').width($('#dashboard_editor').width() - dashboard_prop_size);
+
+// We check when we finish click on the pane with the resize slider
+// if the pane size changed (% 5px), if it's the case we save the value in userpref
+$('#dashboard_editor > .itop-dashboard').on('mouseup',function (){
+	var iWidthDiff = $(this).width() - ($('#dashboard_editor').width()  - dashboard_prop_size);
+	if( Math.abs(iWidthDiff) > 5){
+		dashboard_prop_size = iWidthDiff;
+		SetUserPreference('dashboard_prop_size', $('#dashboard_editor').width() - $(this).width(), true);
 	}
 });
 
diff --git a/application/dashlet.class.inc.php b/application/dashlet.class.inc.php
index 19826ff97..89f9adfad 100644
--- a/application/dashlet.class.inc.php
+++ b/application/dashlet.class.inc.php
@@ -872,7 +872,7 @@ class DashletPlainText extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletPlainText:Label'),
-			'icon' => 'images/dashlet-text.png',
+			'icon' => 'images/dashlets/icons8-text-box-48.png',
 			'description' => Dict::S('UI:DashletPlainText:Description'),
 		);
 	}
@@ -981,7 +981,7 @@ class DashletObjectList extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletObjectList:Label'),
-			'icon' => 'images/dashlet-list.png',
+			'icon' => 'images/dashlets/icons8-list-48.png',
 			'description' => Dict::S('UI:DashletObjectList:Description'),
 		);
 	}
@@ -1581,7 +1581,7 @@ abstract class DashletGroupBy extends Dashlet
 		// Note: no need to translate, should never be visible to the end-user!
 		return array(
 			'label' => 'Objects grouped by...',
-			'icon' => 'images/dashlet-object-grouped.png',
+			'icon' => 'images/dashlets/icons8-transaction-list-48.png',
 			'description' => 'Grouped objects dashlet (abstract)',
 		);
 	}
@@ -1645,7 +1645,7 @@ class DashletGroupByPie extends DashletGroupBy
 	{
 		return array(
 			'label' => Dict::S('UI:DashletGroupByPie:Label'),
-			'icon' => 'images/dashlet-pie-chart.png',
+			'icon' => 'images/dashlets/icons8-pie-chart-48.png',
 			'description' => Dict::S('UI:DashletGroupByPie:Description'),
 		);
 	}
@@ -1720,7 +1720,7 @@ class DashletGroupByBars extends DashletGroupBy
 	{
 		return array(
 			'label' => Dict::S('UI:DashletGroupByBars:Label'),
-			'icon' => 'images/dashlet-bar-chart.png',
+			'icon' => 'images/dashlets/icons8-bar-chart-48.png',
 			'description' => Dict::S('UI:DashletGroupByBars:Description'),
 		);
 	}
@@ -1821,7 +1821,7 @@ class DashletGroupByTable extends DashletGroupBy
 		return array(
 			'label' => Dict::S('UI:DashletGroupByTable:Label'),
 			'description' => Dict::S('UI:DashletGroupByTable:Description'),
-			'icon' => 'images/dashlet-groupby-table.png',
+			'icon' => 'images/dashlets/icons8-transaction-list-48.png',
 		);
 	}
 
@@ -1950,7 +1950,7 @@ class DashletHeaderStatic extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletHeaderStatic:Label'),
-			'icon' => 'images/dashlet-header.png',
+			'icon' => 'images/dashlets/icons8-header-48.png',
 			'description' => Dict::S('UI:DashletHeaderStatic:Description'),
 		);
 	}
@@ -2256,7 +2256,7 @@ class DashletHeaderDynamic extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletHeaderDynamic:Label'),
-			'icon' => 'images/dashlet-header-stats.png',
+			'icon' => 'images/dashlets/icons8-header-altered-48.png',
 			'description' => Dict::S('UI:DashletHeaderDynamic:Description'),
 		);
 	}
@@ -2368,7 +2368,7 @@ class DashletBadge extends Dashlet
 	{
 		return array(
 			'label' => Dict::S('UI:DashletBadge:Label'),
-			'icon' => 'images/dashlet-badge.png',
+			'icon' => 'images/dashlets/icons8-badge-48.png',
 			'description' => Dict::S('UI:DashletBadge:Description'),
 		);
 	}
diff --git a/application/forms.class.inc.php b/application/forms.class.inc.php
index eadd1661b..4a6d2dc7e 100644
--- a/application/forms.class.inc.php
+++ b/application/forms.class.inc.php
@@ -107,7 +107,7 @@ class DesignerForm
 				$aRow = $oField->Render($oP, $sFormId);
 				if ($oField->IsVisible())
 				{
-					$sValidation = '&nbsp;<span class="prop_apply">'.$this->GetValidationArea($oField->GetFieldId()).'</span>';
+					$sValidation = '<span class="prop_apply ibo-prop--apply">'.$this->GetValidationArea($oField->GetFieldId()).'</span>';
 					$sField = $aRow['value'].$sValidation;
 					$aDetails[] = array('label' => $aRow['label'], 'value' => $sField);
 				}
@@ -230,18 +230,18 @@ class DesignerForm
 				if ($oField->IsVisible())
 				{
 					$sFieldId = $this->GetFieldId($oField->GetCode());
-					$sValidation = $this->GetValidationArea($sFieldId, '<span title="Apply" class="ui-icon ui-icon-circle-check"/>');
-					$sValidationFields = '</td><td class="prop_icon prop_apply">'.$sValidation.'</td><td  class="prop_icon prop_cancel"><span title="Revert" class="ui-icon ui-icon-circle-close"/></td>'.$this->EndRow();
+					$sValidation = $this->GetValidationArea($sFieldId, '<span data-tooltip-content="Apply"><i class="fas fa-check"></i></span>');
+					$sValidationFields = '</td><td class="prop_icon prop_apply ibo-prop--apply">'.$sValidation.'</td><td  class="prop_icon prop_cancel ibo-prop--cancel"><span data-tooltip-content="Revert"><i class="fas fa-times"></i></span></td>'.$this->EndRow();
 					
 					$sPath = $this->GetHierarchyPath().'/'.$oField->GetCode();
 					
 					if (is_null($aRow['label']))
 					{
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value" colspan="2">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value ibo-field--value" colspan="2">'.$aRow['value'];
 					}
 					else
 					{
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label">'.$aRow['label'].'</td><td class="prop_value">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label ibo-field--label">'.$aRow['label'].'</td><td class="prop_value ibo-field--value">'.$aRow['value'];
 					}
 					if (!($oField instanceof DesignerFormSelectorField) && !($oField instanceof DesignerMultipleSubFormField))
 					{
@@ -266,6 +266,7 @@ class DesignerForm
 					$this->AddReadyScript(
 <<<EOF
 $('#row_$sFieldId').$sWidgetClass({parent_selector: $sNotifyParentSelectorJS, field_id: '$sFieldId', equals: $sHandlerEquals, get_field_value: $sHandlerGetValue, auto_apply: $sAutoApply, value: '', submit_to: '$sActionUrl', submit_parameters: $sJSSubmitParams $sJSExtraParams });
+CombodoGlobalToolbox.InitTooltipFromMarkup($('#$sFormId [data-tooltip-content]'));
 EOF
 					);
 				}
@@ -548,7 +549,7 @@ EOF
 	
 	public function GetValidationArea($sId, $sContent = '')
 	{
-		return "<span style=\"display:inline-block;width:20px;\" id=\"v_{$sId}\"><span class=\"ui-icon ui-icon-alert\"></span>$sContent</span>";
+		return "<span id=\"v_{$sId}\">$sContent</span>";
 	}
 	public function GetAsyncActionClass()
 	{
@@ -716,7 +717,7 @@ class DesignerFormField
 		$this->bMandatory = false;
 		$this->bReadOnly = false;
 		$this->bAutoApply = false;
-		$this->aCSSClasses = array();
+		$this->aCSSClasses = array('ibo-input');
 		$this->bDisplayed = true;
 		$this->aWidgetExtraParams = array();
 	}
@@ -1055,6 +1056,12 @@ EOF
 
 class DesignerLongTextField extends DesignerTextField
 {
+	public function __construct($sCode, $sLabel = '', $defaultValue = '')
+	{
+		parent::__construct($sCode, $sLabel, $defaultValue);
+		$this->aCSSClasses[] = 'ibo-input-text-area';
+	}
+
 	public function Render(WebPage $oP, $sFormId, $sRenderMode='dialog')
 	{
 		$sId = $this->oForm->GetFieldId($this->sCode);
@@ -1178,6 +1185,7 @@ class DesignerComboField extends DesignerFormField
 		$this->bMultipleSelection = false;
 		$this->bOtherChoices = false;
 		$this->sNullLabel = Dict::S('UI:SelectOne');
+		$this->aCSSClasses[] = 'ibo-input-select';
 
 		$this->bAutoApply = true;
 		$this->bSorted = true; // Sorted by default
@@ -1315,6 +1323,7 @@ class DesignerBooleanField extends DesignerFormField
 	{
 		parent::__construct($sCode, $sLabel, $defaultValue);
 		$this->bAutoApply = true;
+		$this->aCSSClasses[] = 'ibo-input-checkbox';
 	}
 	
 	public function Render(WebPage $oP, $sFormId, $sRenderMode='dialog')
@@ -1597,6 +1606,7 @@ class DesignerFormSelectorField extends DesignerFormField
 		$this->defaultRealValue = $defaultValue;
 		$this->aSubForms = array();
 		$this->bSorted = true;
+		$this->aCSSClasses[] = 'ibo-input-select';
 	}
 
 	public function IsSorted()
diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss
index a010f7df1..0378b8493 100644
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -17,6 +17,7 @@
 @import "modal";
 @import "dashlet/all";
 @import "input/all";
+@import "prop";
 
 @import "title";
 @import "datatable";
diff --git a/css/backoffice/components/_prop.scss b/css/backoffice/components/_prop.scss
new file mode 100644
index 000000000..521fb59c4
--- /dev/null
+++ b/css/backoffice/components/_prop.scss
@@ -0,0 +1,28 @@
+$ibo-prop--apply--padding-left: 12px !default;
+$ibo-prop--cancel--padding-left: 7px !default;
+
+$ibo-prop--apply-cancel--span--height: 28px !default;
+$ibo-prop--apply-cancel--span--width: 32px !default;
+
+.ibo-prop--apply{
+	padding-left: $ibo-prop--apply--padding-left;
+	> span{
+		@extend .ibo-is-green;
+	}
+}
+.ibo-prop--cancel{
+	padding-left: $ibo-prop--cancel--padding-left;
+	> span{
+		@extend .ibo-is-red;
+	}
+}
+.ibo-prop--apply, .ibo-prop--cancel{
+	> span{
+		display: block;
+		height: $ibo-prop--apply-cancel--span--height;
+		width: $ibo-prop--apply-cancel--span--width;
+		text-align: center;
+		@extend .ibo-button;
+		@extend .ibo-is-alternative;
+	}
+}
diff --git a/css/backoffice/components/input/_all.scss b/css/backoffice/components/input/_all.scss
index 58001e1f0..615c9ecdf 100644
--- a/css/backoffice/components/input/_all.scss
+++ b/css/backoffice/components/input/_all.scss
@@ -5,8 +5,11 @@
 
 @import "input";
 @import "input-select";
+@import "input-checkbox";
 @import "input-date";
 @import "input-datetime";
 @import "input-duration";
+@import "input-select-icon";
 @import "input-string";
 @import "input-tagset";
+@import "input-textarea";
diff --git a/css/backoffice/components/input/_input-checkbox.scss b/css/backoffice/components/input/_input-checkbox.scss
new file mode 100644
index 000000000..c03476a30
--- /dev/null
+++ b/css/backoffice/components/input/_input-checkbox.scss
@@ -0,0 +1,7 @@
+$ibo-input-checkbox--height: 16px !default;
+$ibo-input-checkbox--width: auto !default;
+
+.ibo-input-checkbox{
+	height: $ibo-input-checkbox--height;
+	width: $ibo-input-checkbox--width;
+}
\ No newline at end of file
diff --git a/css/backoffice/components/input/_input-select-icon.scss b/css/backoffice/components/input/_input-select-icon.scss
new file mode 100644
index 000000000..0725869c8
--- /dev/null
+++ b/css/backoffice/components/input/_input-select-icon.scss
@@ -0,0 +1,44 @@
+$ibo-input-select-icon--icon--padding-right: 4px !default;
+
+$ibo-input-select-icon--menu--z-index: 21 !default;
+$ibo-input-select-icon--menu--max-height: 300px !default;
+
+$ibo-input-select-icon--menu--icon--max-height: 80px !default;
+$ibo-input-select-icon--menu--icon--max-width: 45px !default;
+$ibo-input-select-icon--menu--icon--margin-right: 10px !default;
+
+.ibo-input-select-icon{	
+	>img{
+		max-height: 100%;
+		max-width: 100%;
+		padding-right: $ibo-input-select-icon--icon--padding-right;
+	}
+}
+
+.ibo-input-select-icon--menu {
+	position: absolute;
+	z-index: $ibo-input-select-icon--menu--z-index;
+	max-height: $ibo-input-select-icon--menu--max-height;
+	overflow-x: hidden;
+	overflow-y: auto;
+	@extend .ibo-popover-menu;
+	@extend .ibo-is-opened;
+	flex-wrap: nowrap;
+}
+
+.ibo-input-select-icon--menu--item {
+	@extend .ibo-popover-menu--item;
+
+	> * {
+		width: 100%;
+		white-space: nowrap;
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+
+		> .ibo-input-select-icon--menu--icon {
+			max-width: $ibo-input-select-icon--menu--icon--max-height;
+			max-height: $ibo-input-select-icon--menu--icon--max-width;
+			margin-right: $ibo-input-select-icon--menu--icon--margin-right;
+		}
+	}
+}
diff --git a/css/backoffice/components/input/_input-textarea.scss b/css/backoffice/components/input/_input-textarea.scss
new file mode 100644
index 000000000..b50d4d30a
--- /dev/null
+++ b/css/backoffice/components/input/_input-textarea.scss
@@ -0,0 +1,5 @@
+$ibo-input-text-area--min-height: 4rem !default;
+
+.ibo-input-text-area{
+	min-height: $ibo-input-text-area--min-height;
+}
\ No newline at end of file
diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss
index ccd51e0a8..bf935712e 100644
--- a/css/backoffice/layout/_all.scss
+++ b/css/backoffice/layout/_all.scss
@@ -23,7 +23,7 @@
 @import "tab-container/tab";
 @import "multi-column/multi-column";
 @import "multi-column/column";
-@import "dashboard/dashboard";
+@import "dashboard/all";
 @import "wizard-container/wizard-container";
 @import "object-details";
 @import "activity-panel/activity-panel";
diff --git a/css/backoffice/layout/dashboard/_all.scss b/css/backoffice/layout/dashboard/_all.scss
new file mode 100644
index 000000000..763057787
--- /dev/null
+++ b/css/backoffice/layout/dashboard/_all.scss
@@ -0,0 +1,20 @@
+/*!
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+@import "dashboard";
+@import "dashboard-editor";
\ No newline at end of file
diff --git a/css/backoffice/layout/dashboard/_dashboard-editor.scss b/css/backoffice/layout/dashboard/_dashboard-editor.scss
new file mode 100644
index 000000000..d3767d8ec
--- /dev/null
+++ b/css/backoffice/layout/dashboard/_dashboard-editor.scss
@@ -0,0 +1,104 @@
+$ibo-dashboard-editor--pane-padding: 16px 30px 16px 15px !default;
+
+$ibo-dashlet--icon--height: 34px !default;
+$ibo-dashlet--icon--width: $ibo-dashlet--icon--height !default;
+$ibo-dashlet--icon--margin: 2px 5px !default;
+
+$ibo-dashboard--properties--title--padding-bottom: 2rem !default;
+
+$ibo-dashboard--properties--layout-list--padding-bottom: 12px !default;
+
+$ibo-dashboard--properties--layout-list--button--margin: 0 15px 0 5px !default;
+
+$ibo-dashboard-editor--padding: 0 !default;
+
+$ibo-dashboard-editor--dashboard--border-right: solid 1px $ibo-color-grey-200 !default;
+$ibo-dashboard-editor--dashboard--padding: 16px 15px 16px 30px !default;
+
+$ibo-dashlet--delete--top: 7px !default;
+$ibo-dashlet--delete--right: 9px !default;
+$ibo-dashlet--delete--padding: 2px 6px !default;
+$ibo-dashlet--delete--z-index: 21 !default;
+
+
+.ibo-dashboard-editor--pane{
+	flex-grow: 1;
+	padding: $ibo-dashboard-editor--pane-padding;
+	overflow: auto;
+}
+
+.ibo-dashlet--icon{
+	display: inline-block; 
+	height: $ibo-dashlet--icon--height; 
+	width: $ibo-dashlet--icon--width; 
+	margin: $ibo-dashlet--icon--margin;
+	cursor: grab;
+	&:active{
+		cursor: move;
+	}
+}
+.ibo-dashboard--properties,
+.ibo-dashboard--available-dashlets,
+.ibo-dashlet--properties{
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 20px;
+	table{
+		width: 100%;
+		text-align: left;
+		td{
+			margin-bottom: 14px;
+			.ibo-field{
+				@extend %ibo-font-ral-med-100;				
+			}
+		}
+	}
+}
+.ibo-dashboard--properties--title{
+	padding-bottom: $ibo-dashboard--properties--title--padding-bottom;
+	@extend %ibo-font-ral-med-250;
+}
+.ibo-dashboard--properties--subtitle,
+.ibo-dashboard--available-dashlet--title,
+.ibo-dashlet--properties--title{
+	@extend .ibo-fieldset-legend;
+	@extend %ibo-font-ral-med-150;
+}
+
+.ibo-dashboard--properties--layout-list {
+	display: flex;
+	justify-content: center;
+	padding-bottom: $ibo-dashboard--properties--layout-list--padding-bottom;
+	> .ui-button {
+		display: inline-block;
+		height: auto;
+		margin: $ibo-dashboard--properties--layout-list--button--margin;
+	}
+}
+.ibo-dashboard--available-dashlets--list{
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+#dashboard_editor{
+	display: flex;
+	flex-direction: row;
+	padding: $ibo-dashboard-editor--padding;
+	> .itop-dashboard{
+		resize: horizontal;
+		overflow: scroll;
+		border-right: $ibo-dashboard-editor--dashboard--border-right;
+		padding: $ibo-dashboard-editor--dashboard--padding;
+	}
+}
+.ibo-dashlet--delete{
+	position: absolute;
+	top: $ibo-dashlet--delete--top;
+	right: $ibo-dashlet--delete--right;
+	padding: $ibo-dashlet--delete--padding;
+	z-index: $ibo-dashlet--delete--z-index;
+	@extend .ibo-button;
+	@extend .ibo-is-alternative;
+	@extend .ibo-is-danger;
+}
\ No newline at end of file
diff --git a/css/backoffice/vendors/_jqueryui.scss b/css/backoffice/vendors/_jqueryui.scss
index 8cbea762b..5f4735192 100644
--- a/css/backoffice/vendors/_jqueryui.scss
+++ b/css/backoffice/vendors/_jqueryui.scss
@@ -54,7 +54,7 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 		float: left;
 		margin: .1em 0;
 		white-space: nowrap;
-		width: 90%;
+		width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -252,6 +252,12 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 	top: -5px;
 }
 
+// Layout
+
+.ui-layout-pane {
+	overflow: auto;
+}
+
 // Date picker
 
 .ui-datepicker{
@@ -471,4 +477,42 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
 			border-left-width: 1px;
 		}
 	}
+}
+
+// Helper
+
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	// border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix {
+	&:before {
+		content: "";
+		display: table;
+		border-collapse: collapse;
+	}
+	&:after {
+		content: "";
+		display: table;
+		border-collapse: collapse;
+		clear: both;
+	}
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter: Alpha(Opacity=0);
 }
\ No newline at end of file
diff --git a/images/dashlets/icons8-badge-48.png b/images/dashlets/icons8-badge-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..820a781bae509bb7a62b81009d0532b912ea5367
GIT binary patch
literal 1540
zcmV+f2K)JmP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x1-VH?K~!jg?U+qyTvZgufA_wbOqxuSG-{K!NvmdIi`t?fv>=7LXi<x3
z#f?Rf3auMg1;K@g6*nRlabt^A3M#m$A7HIQLAp^4BHC)ds0&RhCbo^XNoG28KU}=8
z``*mFH<9V8IdJB_x$nMn&i|Zq&wb~?A}!L*P2xrfJu!Y^RCsDX#%{H~mgAlkFFp9c
z+H;-O)o}nP#!roEBYpxq7)@HRa77BUVavu1lbzHjJ1GpHR@eKrQiEElqt@t=DrQt^
zbxbQYSg-51I<2qJX@N?qtpL`j=O5X!@gl(2C&u?^EB*kxt<(BC4nQll6hJz$tyIDD
z6kz*0t?x!e004nKc;w4(c6*)_*y{)VY1?UajR3soK7SNz4*;t&pA-Uwj7J0rfz~S6
zwDw_OLMa27z;=tb=PQe~J{W7jI%76Xg59kTJ#j1(0M@>nZ@hHa1tNk7*o3pK^NaKX
zqpc5`a5O%U)-(d*0I)h60F2}sFJ%fu006<?b9DwwCbr+XxKtG&N+1FNRs`M;)*13Z
zjHV|RRz`*NJt#bX4B3gmduIwv&uO$$Xr)kEp_F2J&T!~lF<KYNiexyl7C`N9V%PJs
z(evSWYDThmyj8KW!O<DI93me|{0K<fP9zoxAj<P5#-{-I*U^Kq;ozr?Xtr5h5Dv)v
zjomJQWWGxwct#)LY5fUBbX-UbT(iCGSoUFBKyx7027pWqLbw2Q2LMDl>qlW&T;}!q
z8?3Pt@nL0%oG)v2M(UGH7Ms+9C`zdkB|?BQ01#9rA#$UTzhhF~f1&n1YxD$I;b#*9
zDFt3ZplaY%Ydm}TaEvIyDIg-1dWZ&nd6XT2L|*&6Uj0h7RA$rmE(+b<2<eNkMxiQI
zjvukyGxJL;fx&14@49+|`N;E*-i#>ZKy=f`7g#k#`qnI=*i*(Ul_>=5mC6)*%M9PO
zgnDjfir8=w{%>?v?7-HPAAtnJMOLt3=wD>98?Ueg=@tE@x(>j|?Q?wp!%D}i0R>)M
zzkMx*E-we5PpYOk`SG`zuTX8C1F<J6J$>{qn?=e3(kmhhrPxMOXIVc~2Kt+b$ls9v
zhjIX<LnwG?-8s6J3^?~mTze(SwtLU;%J0p@2~K`-)|m*)YU-uV8Zg@DoD|B~1I-`2
zP`ndaG+3iCx`t5!>l)T*u$tex#~c~$bgg-7THjxAKd|%k%bZ{JBEzx@_|+#IwW{#f
ze2Jas_O*O|;d|h_%rzMiXq~V7&OU~&&7o?uNxnYMt7mtlWOO3$Tg%9aK-vJmPJb}D
znS#{3x$ZDh`rb4~v-iv{KKgTW>xf(1#vTZ+jRvDKjfb{hr;|Xs%Uv8TJjL{k<;qpX
zm8**B8Ozbala$J(=GCTQ&c^fB`QJoe7G*~u?3@Dby``7oyI0aP*b5e}O_%ApJ`2FS
zSjy1a<t(=_KQqtN`Aby(sWgbp+5@VlIQi+%4SKUECjzmMTgQf2vuTV{Uk|!&P<6vQ
zy{|DXS28VE@pkV%RNbKKhElnk(fd|0xOyO4e2&hjcg~=OZ1r}1mV82b^o`uciu=c$
zs0UqcxYBRp6Il_in>sVa+~v7=VPt36*t_-LIRmVA&Vrcqp~n+8=a*4y7`S5yT{jKJ
z#l{o;M0N#>`&afecX>7?(=|TyviqgN;T&oMfJK(N(aJc+$M>2=!QGRh;3Z@w7Nmi=
zRj7^pZw~-axpa-Lf!?Mm5*wcc5w5GxUXMK)A<HtpeebsoVCu)yPCx8rHudrAaWiV=
z{lH-30_a2;P3Sg3>naj0Y<v+kBk7j0K~6f2QpTJ1y}vL32@p2;dJuB(X)yu<jZv`9
z&?0RXXnZRGlVp9J3qeE;R0ty7-!_Xvs>V0GLgX4hk)CLBklEb<h}L9{U#DF*3*_|k
qZ5S_v*qyg%krru@7HN@gF8U8<l|uSb(3G|S0000<MNUMnLSTXbMdiBy

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-bar-chart-48.png b/images/dashlets/icons8-bar-chart-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..89812df5c5033935376f60778c4622b9f295f519
GIT binary patch
literal 277
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCwj^(N7l!{JxM1({$v}})o-U3d
z8I5nR9^_;)6kxp||1pcP>W1E)j@!-R(gNKZrn5?aNa8+}$6luJB2q^oF4bJ{Sjtbf
zf7WUSXVi^Z1Oz9t^xbv1|LmPL!|D^I)p0w1eNHf{^G@6Nj4|P^{g2}eYFr1*&c+tp
zyJK~r{rQcBwQp8iReWD87^iT_hT+FUp=FmiB6aos=Wo8Ja3H7r*RP3t`fjf=o}*>r
zw5-2n?GITEyN23M{_AVJXRP`m9>8G6nh=amY<tAq(cv-4d<~Pt-Me$6?g4$p;OXk;
Jvd$@?2>{9SY)t?F

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-header-1-48.png b/images/dashlets/icons8-header-1-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb4cfce8fb32401c4fd7af3ac809d9b5b3b3e9b8
GIT binary patch
literal 319
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCwj^(N7l!{JxM1({$v}}Wo-U3d
z8I5nR8*&{o5Mg^@@5+8qcm=z_k>)G02l@K+_V$Dqyu9#+_5A}wEe=~J-O`Io!)7hJ
zHvQ25URC`k>iUYT9UUEPKB4wHO-t5D&v2XFzp>Qndj4b1W0!>+7N4|Hp6vNQb=!WO
zg<TQ{Zf!aCy3ls*ndT=CRzB(y>t>g^(YS0{rjpcwWvQ!<M4i|MB+DEapU0nhd`5BG
z)1-zqEw^U!m1#9FeNjICO6=#YEpC6LYEOEtFv#8b!Tciw*M-Wy59|J(S$5Cjz;^RK
z-OJkpg_oae;ANX|jNwvG{=#+jDYcS+_zW6Mz#<Y3Qp^H^f`RP*=Mv18YArlb5A;8S
Mr>mdKI;Vst00x+eM*si-

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-header-48.png b/images/dashlets/icons8-header-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..e46cbea9c6f5084d90a0f2dae5fb5b839551ca8b
GIT binary patch
literal 757
zcmV<R0t)?!P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x0;)+wK~!jg?N~dK)Ibc?Qk;Q^D-e(nYynjqgOpQ{QANx(xCI$AAyoui
zf-~4H5!hp^+xoTDBrq>nd&f0TQokozy8w6G@qgpNdieI!uPXpO5&!@#pH=q{aJhbd
z@g|eNtB*gg1n_txKEy(}{P^-xjq%hXM<ShgA%A^7^_2qG16qlR1zGRR7<K{Jk`X5!
z0z|6#h@BJ#0>uib$S6b{1yapN><3p}gJ&Vx`vYY_Tp7h8n57hSS_lqy%HkG7@O~(S
zSpcC&oUh=fGUuz*NLgrWuzunwHU)T(?ICjt)D0#O548~I7F1UdQ{V(~6y~6SVHN^L
z7N5}(xP!t$XpBlljI+>AB==Zqj4lM`izbQPLg#uc^d8_ZE^%*3AiJ(~SV*%|4#fM6
z#foyr6j1h{Q5KSujmglx%(ZrU{^3fMos_2M995cRCz{)Z0?S;V{Ccugq8-xamO0S+
zAeiV*V|`#EG)4jX6J4HKr>a(HKW|`fqgB=!`6ct4Ur=&5!YrUY_EYkc^Lz_+Zl>7^
z96HrWByg&JqFPKDjsgnP5c$1C2lT*hA)V~^*LUXsmOMOr|E=|D^J}IDnlGRAX(WW2
zs1ved3W-tEI8LyZbd&<o@z{&QsAjg+dXOQ|#0tqMH&I!yJaNDGZtxYTMEDCmfCY9-
z^27%yAof6jv<p<$#3k!w6%d=aFMtc28E<VJB0ol;0K=O@{v<0*X~8<VU1)Ad;@*sc
zDh2vu*ah$gI~l;m)&oKefUE**0ak!4P>2E0*jI<6z%DPH4B&!WNKiSo3sEcY!8+qC
zL>vEd-6l|G7Xq!p0LDxp0KhVVn0R%s<B9o{$^~#<d`k0jT3D9Cr~uIXJzD_bbfGc<
n;sjVGp!Le`(=qP2<6p)f&waU<5VSz400000NkvXXu0mjf2WL+z

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-header-altered-48.png b/images/dashlets/icons8-header-altered-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..f67b9c374b07dc9b11d3f2cdd20372bffdbfece9
GIT binary patch
literal 10086
zcmeHrXIPWlwk}P&NL7}ILI9BxNJ1ch^qSC{^kPVXP(lk$1VMTckS@}Dl@0<@EJ#yO
zs&qs^REkOy0XYFzaow};K6gLQJ^xnnB>Co??|8?U?;K-(`DUb^j{0fZ^Ry%+B&QK@
z6$9cg==eiTN&Ge;+Y2WlVP3sqWJ)kVdULtDyI^rn7%qaZD~1c>gTs=L_)J!&;}TG<
z_>dzHHfyr?NT~}vkH|&mF2Nnjj6J6vJ06H2JSmwem?J6TMh>!%tUq>qJC`ul7oLQQ
z)ZZLDXXCV_JoesZrb=!9u;r-PFRDX6w){O!Klg46q}%WC-9ujn*IB{rCsPW|b1Z9{
zDqp-04p3ZvK$hsm&4=X4SL5s6hcuIq)CqHH>TGD*Z$66a*7&-2?d!s3@x-lz%+Isb
zFWyyT4oJQ%_uOHhUmU+;vUlC5LBxEIb#HZ-X>Ea%KK$lpVnCh7VNBm<;@;A?xE#=g
z+ylwaA6|UBd30ks<Wl!WphN37PX0rw&2Bem?QhK)-5cgS<qgYbR@+Re&s$5n4R-iN
zoE}cEO#$R1=Q`il-=dW_3!2sG314sdGOP_wsTO|s5;Q6-w(AGuWNFKk_=0!l*K-$c
zMMtkOpgC-x#hFPoFNF0!t75V4*59x1TJ`PEdT{^6v!||w;`CSwS`F(TEb<);^(hLo
z?3vl^PedG>rn;hatec|()3!VH-!KFm931ewd8&Y%V0LFsJ+CU)Ul(blP{&hEx*_Ke
z7t;~%7y_fyu3nFEQ&CWVcRNyz-!T#V4a}0=r!XPy!odyVeiM{DcD0so!U=<4M__Fn
zgJr|t3X?Ixi&X5R%AfTqJI(X&(T6#>J`QKJg>#29I}l!XGorNgd#Wy{-lP>MN^%!0
z#isf*NG&JT_3@3{Mh9O|j^s<W)F@3x2=SP#Kd{tuta~XwrxXornARxg{6?5lj+5Q4
zxbeaB&09(t@B*AC4)PJoaz$JIX^hxQnf?m85@6E-t<Zz|uY%=r`PdPfPnYD6WE_^6
z#9Mjz&K22>JQOeNW>j0@g};bM+YXE1k0c3fWERW3vuli4;l;L?)&fi`=$SK+ytXQ@
zbWu+sgKydZyG*d9!y_U54wDpL?!K;y4q_!Bayr{>pSgj1w8*j8D}?uSSLx*4085ZZ
zL$ikde)q=5x!KPfl+2Un7v*Cl->2orLV(r-ZFYl4^bNkUt=7pxLmwMUrIairAA8Lj
zYesizb8PnEdh8sr6W!^S4<BuN?oF$g@wDQ@Dj#-?<e1;pXP&;^-`UXo;tEW}%7pHw
zun<g0eG-kH^(YPK2!{%a?T#uV9PW7HSF_9xVosUH)~n%Ww_|76@~!ORaS<jnUM(0~
zQ=vPJ8=<?S*7N7N+bZMknptsNpCP}}lpZYDcYe46<e;5YspgAd$MulXDH+iN`7T8l
z73{rf&6cy6j&U@_ruhP|gA<GGD<-fL)?1gymLNUuVfvX>QG>Fo>Q+2gH9m`PBO53N
z8yD>4E(sLhdc>kho9a<I%2ei_f9BvKzZr;!W{ruDg%+;eI-!I&y;jtyBMcs!VISaB
zX8GvEsnp}}Z1P48&tOPvO>d;OD<xf!>gP?j*>?ZdjVH<r%iIN=k86$aTA{=2*$+iF
z%*>v>mh6agh%hJP!WEeMp7VhGcxy%0bf~)G6V4quBateE1;))6aavj{vOAJredDXB
zh~8H1nha}YN-~|L+zl?~K9HK{y6|EDcFTN-#Pz5*c7v}jsRWH|cF_-!$AmLHuYu||
zjIUZTttC)A5mUaL34I!F&>7f{JJrkB70$+g*5{STr5O9Idu2<(xep=}l7p*uS)Z_8
z3t_qEje==C_Bs_%+VY!4_7%t@$2%2aDn^*#>8ZecaxVs8P}k=nwCYt2wSly?B2Ma;
zWV3N-h7zr22s8L&%QS1sjIyDdl3>D;1O{BbFVmFlnas7JOcgH{WTerPE<W?I>xEqD
zwTbLeK4-Oq=K1$m_0b=)LTTitCRdF3JxtR$gms`QO#2m=#@pRi%imyWOF)j_2abHW
z#Dwl~qJrYSv69&KQMae<=H)Wab)Du2vV2)TTR7Mgdo7T?Gr2-QgFI0d7CqxZu7DSX
z+%`*&s*lj&Us*zbML$|Oy6)^LuLX$-WgG~2vUgFNzvxbK4V>$J0{e5JFocHR6}KyC
z>td77i|Zs1bbi5yZty&-G0J$xs=Iur8uI;ZWxo_#`>wxOhbGRyefC}D#wg2&svzS8
zfswt#b6MZ_vP=VGQ=^|mHu!?>Hdfy4AnUA%UxU5+ZkJ=hpKl8p?tMnXJj+yR4QkWl
zl1*QCNlLD`zX~vx6pULNsAh^${-pDP^AiG(ZjBkqzK}1)u6yoXp<v2vZU^|e&=}LB
zS<~)z+aHw%hSIJ0;ux}?ors;thFOr-#0ADI(<Y8jH9a@;+)B<-WnJG?^pEsfzopVz
zd8bPF&a3Sep@!b}8l&5f@ekiIcn5@B<*=RGmlG<iF^8@6hBgdNrUb(-Eg=rgsxF^P
zTT{`j`@u6`*U(6KGuFK8Q?A~bNm7+Nr}2UD%8J0#fn8PIm7&G)GT$Zaka8+wO+I8Y
z)JkV|y`qpxrM@_THdb7Up9Z1J|D}|`WCi2TdrVJOcbOBdP80a9`od7(k(ym^Q|abC
zFKRRJT5uPOWkHe7%tJ93DLwXcw33=>Wll+n6M!j+K2f)z(?>a<3uaTN^*KB9tkgG_
zsukP_Hzm!_FR!g!0_oi*KUlr3XZ8+iIgwFeo^AA;8?!h^b72eJ;;!oX(Dn><v)!b_
zP_(M#Es)xHxcssf6(#kkp(8VfOY@HA6^XU?JUxt!Oid$6<&ImQ2jcu=6b!k!CqAsY
z`Fx_+&YP2D809UGCJCuv@URJ!pXN4yjnRCOx2K@^Qlv-1p!iIqX6`p9;c`*i7rEy{
zJ96p#&SfqXM!&IFkf0QA<{^<;$#N*7>U~FQW_;B%iNiQT0H)ZS7&-&tBZcwqluo#j
zliG0~qIVbcaMGl6pVZ281r6^EadfRaaK60#aM`0Wr=3H0j@tRXR3WLtXq19PKE6K(
zoZH1?t@`*iE3=>e{nHVzKb)q!;0#pewXGAOJIbYIb9y0c(E|UCM*YP^<(J4Y$CRt#
z1QK<C*qJ5t&R8zAkI7XzY*5gd;wyKo;c#L-7l0f$t<p9ASwOkaZAwA1j$eE=p9U_(
z9H8z@HD8di>u$l88Kq@OuAay2?WYK5&<kfvtSm*y${5bdC=V*M<s=o&K%E?eO{ZcT
z>YH>OhZ~IB?thx;x8yI|sTwo>Qqz8;@D)Z(Tk?_it0`r{TlYP6C&@Tv!1>qilba4d
zJ9EQf)S@P_;Px0zy}flWc^`pJg_E<*?=~af!cYnHM(!DjGQFlqGiPp*`z#d0>sn}V
zir5o30J<QiarwwA#TLT2+SDWA9kp7S@3QwzoRcZ?!{Xj$_R68cQPL(wM<vAY6h?Pj
zUbs3^ib0<t*F_KFTgE!UrFwQ5q^=^fRd;x$wl=ZtP;atQHlbOO&`|J!E#vKX)#jI0
zYP^W}{%FRM`?WM50DTcPsjF>_zd7huJa<{o5ugaD?}YXNm1^tF>}!qalR5fcu)la@
zK|eO_sMPRSG>qFkuY3n;>G!NYgC6-?9^^@Nly%>Ymhe$WIaGEo@OChvi#rzX-A}T0
zOJU~$@H9&0R18{Dt~X$1e51OZ3AB_`!|SnNuofGgSWUg#XvjP}VdAJtS9B?_??~GS
zGhQhb3O&o+>14gd(eeb!-`fUs9Iy4nupPiJH(A_Z{vd>{y*|S8jLS4-r&e8a?&zZO
zQElF8AnZu}p}*M043kBVvgnf6&Xkwf)_AP2)?{hY5fFdhi1Pf62r}!OC3f&jCg-oX
zS4QW9tm3s<IlsoAHm}z-F^VO5YuJYN7M^?(MGG!Y7=Gpbk^5#melWS(mffF(b|FW9
z8B))th!mI&6L@k#TF1Rz+lFy+jA8=K>k_4E8F<(JatMm@P-N63&1zbVc2O>xb{HYc
zgWC#0n(A*GrrY0ed(+Q#PwiB>nwR4Xx7MV{r)xAZnUGws%xdJ3z{|NeTDNu`(^*V?
zY@IXiS9J6a-{#(zSQO*xvv1X~Frtx<9<3FXT#}-cbM>nWbKPR-eqD+T8TAxn?5<i^
zvaD3xk)V1fo&N5;cJjb%&O55J+jPA_{<?%&<_5Y`aC!PIUM_;w83V3Fkly|i1y*7C
z#>qogvZ@k<Ka;F+H9T<Kv2<wJ_8PZ)go5$4FV!is^Gczj@EFqMUgL;NZ3wcZo?rWk
zr(Yu9D|XE~ZjPrzzPuh5iiS^8va8|AnJU@1t7ZKF(ZEcbMWspF7G5?LWG<UmP|`fN
zg!Qn-ohg=L<r+HI?TBg>w>We6l*8c2oOIzkw%%ov8!(rc5U&;}VdDW|$+(46xn)&6
zTwQnGG$<mj89u)MaO3cSom=QB^7EzaJ#k*FZ6n3B)MtQEI0{($YMD0lEQ3vY9z-@r
zK>f$I&{3ebj?S)#pG56o#<`F(fX9?f?&*Yvz||=o>Oi{6`Zhs{w``C*s^(2i*$3Yw
zi{*3@66PIr1a1`%Gc-W0vQ+%*X8PAtB?$`b=z$1xMfQh0m4bO4l!)8$GrXTK=RsTU
znnkEF7!8WtTxG~7aC4v@8t)*ZhTa++eaKY_R+|`+FYd?=%~}Dm2WiR0YmGFh<1rc=
zVogQYwFKb@FUsW#TW(%0mYm4?`rS?k(RNmmbmRay=a+|1iR2Gm6EKDbG)1~s#~r@g
znljUvskEcM2A9(a*zIn_n-mO{hl%Iz4X4CAH1YI%my_=Z0p7m7!jBMQf%{vudK#w>
zx$iWiH3#sY3v2HeGsPJ|Ub);=&-k%3E0lf5ChA~o#T06;zvfbWzaEC6-&h_s)y~?4
zQrNsW$fE?y=$GYb`0@0RNm&$(Di1Pq-bgVEHOMgIcpfdydn)CNx<hTS5js1AA;92F
zG0hg>taGwV4BhQ>wf5GMTD^(d6Sf=C^&1T60R5H>6C2UA&I`^%{#pfOju)4)T4J3G
zc*A>PS>9w*lY?@L_noc`=`mdJi2T9NrD{~5tN*&OMDKQ8?R}iU{bj!Md5BuvkI+CS
zJ>Nr_;w=6`RMm%xnsBGWRA0jChQ$M$35~Yb*VO%vR2Cn<Q_H`TWEYhxb9Ta?Lo0>_
z)!G_xW#R47=}><=(6%BHJAFF!ULSq)Ia;~2w`ZmEfM<<G`DILjgJFxlLH0Xkm$z9B
zn4p?BSLlPFy)_ZCC3zn0o#|iSd@eeC=`g{aW*6Rh1>xLcu{(8Y_uzqHj4kMTq{yas
za74nr)^GMyfC247cp$(=8ctSc_yeP?f!>+n-BKS+NzF>uRyrS_qf(MIoLex+`J)aN
zF9_eCUJ%W-2yyDW=EbhxOvdNAD|t#QLblpdH`V|9p|H%yzWwER-|+N=ncR-+Ya?AY
z$Q^*(_9@3~_&&vCXu?RcZcgc(PC!+12f4O$0cXZxWGx*;-+%a$=>a8lJF>otZIPyK
zZh*FDXI%Ej?K--;q$S(~^{yhix^gijsHWD!lf$)1z%;(mO|4tB(u&@~K@ldRkvj1j
zzNhi}j^Oz|xnLyJ^AgV&4e}I@bL;9-vi-_;imD!n7|XmG+=(B3=jPSN1N}Um8Wk@9
z&KFqF_1M}HNHeTI+-TUmQ(Ay8Q-2%cET>US{myP}Wbosj<C@V|0(SiQ;1l1E%c)`=
zqgvt*s1>{<41X9?awKni=NVE3Uvtf%n$hXTQ9Y96OA+b`!8R>_FY8{c`0oDQFh26a
z{)6X&AAke9U*A|ae&oMGzD=`h*p+*pu$03YLnx|mV_F?zb9l`3hJ-($iBjKK{drd#
zvM@n-h-+l!L&?}<6G5EI*DmIy%NLYqnNlVt>M~>eVgRyAl5=O_A0_)o#(6i2FWK1@
zDk@-A%w1nK+)0(F)Npyr5u~qD?trr&7-tE)Ui$_-h|ih7x&BIO?rb_U$0lwPhaO0A
zef@=Y=O!HfP_ezdI-&II^mMfb$}yHpsU54%LAMPI`bLu4Jc@OgYJ6-Mg<Sju{%X0m
zvs3>g?!7ZMgVRg1eH4W{voYAla!~Zi6<o#*FimrSxNB^6)z~N2$s90jnb?mb9lPIC
zE<Ce%NYAaFFdoGI<zA%JLso5b1`t0eoH0ixn>JG^HeyK%eH83XdDB@;yx=#jYS)`A
zBayuKwS7x%v@k2BmG2p^KpH%}ZB&g0{6}a9*pt)M^g9<A#;*yQ^ym-22(1Xa+5gy$
z+6ZfSe#xNmASbNhDssX~JM(GCw#<amb2iA83dY4~fc{3+qbunHw_13C#sCi~&H<gk
zM0IX@*jCPv+Lx__4QcM^;M5J7%a5%TG|tdQ$6P3AYD%)9hdsTg6Sum8FD27jwlBY?
z!Tff!K3E4DC?B0qQM0EjudkeL(+~x(fSZ=6xggtfm|i@V)-*hG2}f{x{ou_++q%A8
z($}=LRo;y%?~u*y*zCD=J%CsNuMRF}kxuNj6eWdI&Lir`i^jl#gCB({HW#Z8vS&Nw
zN||~Kew>?e5HH{A#qp7lkcQ%vmGuzH%72`D5l_1^{O`)bpX#xO>RJ>6k{P^SEihI~
zn=!JvjR>;lDwVLAdxCsFT!P}@29_62jo%KIkG@8A&d!R{@|5Cds%I}>B3`R%JQ5YC
zkNEQBoqvY+;M=x+l3V#tjOrXO=!y5k`B{`Cngl6q-YT;q=}~&NMRNR60zPBovYv)B
zUA`&abJ?TCi`tamC>G3$IL>~d{IXS4=rPM5Tb)qAn9UOR8$oeF{XxG-hntA>>ic_4
zJc(KSv5a(G3@KOBlIfFuq9lt-&M)oPi3nvhNtP#{cbrM=040qZr!?z0QX_<IX#f;G
zCAl%Q!q0HyaPZxt&5&^UkKa_?dlv<R@1jVrmBe3=|90shtI{kj!!=QfCTG8^QC=-@
zUgTB9)Xr{=GfX$IQ_Qun;c%1^w28RUR@oIB_*uf$ZDwpycHW(e-DikT*}Z@Scq^CW
zQTA)tQs57Z9PgKz7N0H@pHT?ICby6>Fa*5@V5<BcwHABek9O*pcgY>o-3v}%jh7%H
zITMW|9z>dIYe}PAoJEjm7h8;okFzWBppt|{M&8F2iE_jcxNI?YIJ_)iqqPITg+t2%
zOvJT8+OEnNdmQ|RJI3&ajuGmHBT5Plke8#C@sTDHIAaJ%E+1znyoa=pEZ~G!ns|NO
zEehZ|fe;*J0jAn|T*@x)7%r#?R0IT6^}%^T0CKckGVW-sw1JA+?-azAEWn;XaFrGn
z_4f7_@fH(takmo%OG!zIf*_(02#|;XdidfANFN~HgXfsyCx;5g1Lcl$CE#4}T*sV9
zTNh7)EC4_p=lY$TIEqsBA$I=m;JAH4??FI|B8UwraXv(VC<FwO1cD$yh?MBB_QX+b
z?LV#Y9>1$d)Kk<4=_(2q0f{<0|INaKpz8IPzkg}rVMII+7B#?lxOlpwFsfb{Jb~v|
zr>;((9>4nZ^uQc<oy6^g#)=YyI`RCgjXFYG?@ya!8SQY+t|u19=wFd&)Soz4Pj{yi
z3>qbhal$wg1Mwg-ga3vn;IMx!(BI~BJo4WHA-emM|8M9&^g4;<L|17Q7nJ9*Q-q2v
z;5c4sv<nJ{mOi<}fTYC4P-0?0BnAZrLdB6%KuJj`28a~L!mwZn8U{syexX9(JqSoV
z3Uf?FBp1OEdBmioU{YcdFd!0wmIOi}w&Fl33<d<0w8cn>K_KE1;$rAuD0JO%#7aOq
z{TkIV6`DweltQCz(I7Aof`VazP&C9AD2c&H0mZSl5HX0Pn3OmebwYK#4$_Kx2w4C`
z<Y#;*J$g<^0@lUdSr(v$!+ZMt1vSDsV+;w%W6{78V6X&CTtWgS1{M<s|6*;7arYo5
z`7tLLBm#k)n4?kBYD7jPG1+j=NIQ(EE8gy8;CNZ2iIX7;i#)CkBJ)W<aW2xz?ieJ&
z#ofro#Yq-$92wU!<w;3#$^2d{(poO46T=fQ27O#_zgL_R(oXcGDI@yt!2gZO(B8!x
z|NqAG7xYgSMR$U?i@T$)yRNMR21WSyJpT&(CzAnjuk#?d`y&2_N&O!<nV;zjC)&EW
z`~KqJ5aaf<^>agV!ktLP#dWd?NFz}{<@Z2(VSXkWQOBP{D0?K{4ny2+e=oH^`f>jv
zjiq4XXt0DW6bO}qz<^L&Bp4_qC58pUBqTv-s3aH)gZ<3CKiNH8umo?UJ4Vrtm;=Oh
zCYIL8I&)n)$v%OTbodkPZI2=5h!6-Y4FUmvE-#mi=<$a7$Mj^5w;XM4>0bqqIo^__
z5yzQl=;`X}gu}T1U6?--<^O{F#s2rC{GZH!h5fWvc5(G37Og!&*Bk$D-Tw>VPX;X<
z3WN7>`FElJ3i&C^FZUf{%s=~x_cP+{QS{II<L_xf6#0Mi^?SPgZ@S>(`p3zCr0+j+
z{Ug_Zq`-d!{wKTsk?TKF;6DQYlU@Jc<f8rS2^)ha{?YR$K0jkc;%*V2y(w)q)m2E2
zj^8<L#fiio8dtcP2MGxs%khVlBt3(j*hxh|Xsc2!k)A&zKxOuRvx<a-Y#5=UXk<UT
zX42uvs>u2yrNVwbLP-G>MX6ZNgg`MRkUOtFd(xrsfUzFI&&()X&m<ImKyGYoY@4g<
zZW3wFO;P`qih}8JgzL)8fZbiO_0`qYN169}C^y*Ndc9xwlW*T>^Cf*Q(RehKQ1*1E
z5+)nCNkM{d8<yi=*}-R9)6>ka-WiuA+q@Nc+J<%}b$7W!Zb;Bobuy@_^PG}U$w-L;
z&-LYu7`bcT;hgiQK+8e-X$B*o)5=*-#iD8Kud|Xyv*g5fPhWB%>?2An_nB~deZo<1
zg|b4lq`Knc&)S!Y4pNj@cE$j50a?!}$^AOdJ(M8dyC`(ur(IT$=E5~4zLqn|uO!GX
zc6#!mH311B2Ur3p<xM}~WLR33iVRKj4PpBj<CpeocVFAk>}{J0I)c&-gWL?LtxO!?
zJ(r6?sP;kk_JTJMN?|`eVVY#BejnyOe*L83yF#+&W7l6V0?NrxPlZzSTgrZ4d+ZQ2
zmLuVGuWlzu_*MD+4Y2r%i~KEJ{+ik&dmv5J^Ag>h^)lvE>uGR6oqIsx+0&y_C1*XU
z4_Vs;uX2&!$T9WG&ozbVd0&er&3-}Yb7N&hTy|`+cl!Bv3mExWW=ibBz4vwrq(zBZ
zuD&aBx(DA$NzTyD-6L_e=?p9{V>Q{tf0DxPJ{lU3kBDMaRq~1-JTu6bfW6-qfMn~;
zQ&1klGV$uw<=UpT4n8W5w<-oZZ+D_*3_Ieo_1WWNyA`gcwGU@eeIViZAv-VDeN@@}
zTh7fI2TQU-*-pyjj&<#dx+iM9063TTIo6F+5^_Pv-q7c2y(QA5$!zTQ*31l)5JTzH
zLmh!Z$o1?!$RR9)6ymXx-5O4+EIoai*>>zy^Yv7QaZ3hi&3+iEmb~FytgdZIroZzb
z``i(<#>DU9I*-IucfGfbd1Z8FX@5BBO)ak$rOd)5brP%>di(MixUnX5!o^=xReDj<
S<cOH@BnVX<l?O`KZ~qt5H}0hX

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-list-48.png b/images/dashlets/icons8-list-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2b808b349a6587e0b2f6ac93499eccbce6b580f
GIT binary patch
literal 307
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCwj^(N7l!{JxM1({$v}}8o-U3d
z8I5nJ8S))6;Bno5ns>(GL;-1chci2a!&Uqa95|MGt8ps#7h?sdxg`#(Tp0dt-???}
z^S8`S9EwNylOHG5?#Mm6hE;-rDS<zE&ztGb3*&Fh-R8EXf%U<~$Ti0Cn`_psu>5+z
z{uR5<qpv$W?RvAne`+uk$k@Dgg>t@vjs)BD%Rdy=|I0)_Wxq1f-(vnB2KD)`IJHiS
zfBwl>tLMLA_JsG^r>y1c8w`bB9Q(v8`I*_kL~z6PMgFIxz2p^JR<v!Ju<63>Pn@ZW
zsS6`NopN&OSnm|+5&0tbXA4M1r!rMhu|?qj5!rRwe@q%=UTg&VnZeW5&t;ucLK6TI
Ct%7d=

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-pie-chart-48.png b/images/dashlets/icons8-pie-chart-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..47d4bdff0a02e5117b176e4577e41babb81982dc
GIT binary patch
literal 1277
zcmV<Z1OoesP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x1hPp)K~!jg?U`Ln990y@|7T|Qg92M&Q7BfRP+Hj7tPLAujI;~Xs4q<=
zf{7Lq6F;JD(1#{IXv{<tA55&FR?_-H0;ML9)FwXkr3I}qHHNfSQVZ4aKnShX@U@V#
zpT`I2f;%%ipAeJsd)S>l_uO;;|Gl%bbLRq^Z1P}3P85-47A{xMhrr23VhS<wE&$sB
z<WAqX0|piWOcL=}5<Dyr4PAEyh9OhR?%1{r)b}oKb8-9#gWHMl*lJZyAFdck$5&f0
z!NffY7P@YJ8n|s$gCzsc^vxD{m}O>q6JW2hsv!d_$GpU#(~>(T|0?gDHLFE1+o7Rn
zrrDjsC^K~cP>MH?m%#5P;;zxhKNxw@Y-htW(9+N1bZqwcitshCGTGb=EWc9vt+VFV
z@5crPT9Za}88Q&=X0IU4oduxs4LNFH`Iz}!G~#{b&o8T^dfIePp_YCY1u4=Ckm>2Q
z458VRf3H6*4@r8dx(23W^Tz>x$r)uPAUgPW%>S8QT2=!MJu}VB=*X6{t`NOf`{8eg
zvZZJmIM6@6RUqM{^Qufi#B}Nj`PxHT37Q5{OX4RCY+D~)rYMdlBw4Fb)j+s=p#;RQ
zub(D!F!0uH`D&?Jo2mgpOdbU&XMJUv!Yd`Ex78XH24tB9kkGdNn#{q>ZID@^R}r{e
zJs$$NY-41Zfy!%=BYQKW3Im*^ri~F~9%63Hj47vtP`5F1tU#g6h;jyi-5Vpu5;d6t
z<yDBGdb#?ap!i=>8X)9th!ku1G6TAIdv-}A7JitUyt@wo@%_7ZO1~f-Tl3EMKc{c8
zS7M~R`&T=K793H&!Xv?*`wJ>de*|EA0S`tbGo*G3P1znOgQD7seMN!tp8>?})L|8E
z3Iha;*%?HOf*qw#mjtV>16Z<JgBZ6mW6H}YVc6;bdib_K9C|dgYmA{h6^y{dzhuT#
zP9Yw&QrsxH#f8DLrveio%$V&<#6yahB8!<C`y%6Du27axS-|To>b3Hs^NZsXKi$}p
zVwC(>isn^l;&$JGip=6FGe8XR85ISN;_>BHme=ozkwB9MyY#4iGpg%>R9yTD;Cr?d
z8o-_BEvpI#T_gy9=%g;iDcPmgplaaz*YfTF^tEk;1`xfj;>w0Seo+!`YUMC<*FR^T
zSABk}xhD2d;v)hqKXf&N<Z%~PHU!H=mo%c%{8vt#KGy21Y2d<P|2z{Nf%-4kaRir`
zTh$b-a^<+MtO+wx{KojevvZpLvK1XX?E4msPRCU0Kmu*qu|H7f%JVLpApU&no9DjE
z)<^froZss^2BLEgY1D-T!ChHj`(%Ex@5I#3EAQ*(8!7t23HC$_BWJ;>W@W3j|ADMA
z!g;@|=;eV{is@-Hv_Ej6gQ9+Sek(v<XpHI{M4hS9q820K0Sh}cO}#UR7<39i@p8nm
z8Mq6gql2&d2h8X(y+d=Ut>Anr!8HJN!p5Ct8b%a^lazD^%!&tWZt{h@7fM7a{tg4}
z0LoXZ8k&JgChifF!s(0cg%egaII_(OW(xPt)rmkO3mgK{+pPIuFbEMaPk}HB(6v-5
nc`-a*bX9g>n{|^-9(4W%)hLvByxJq`00000NkvXXu0mjfVE$Sn

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-text-box-48.png b/images/dashlets/icons8-text-box-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e3f3a5c1dce11573a2184abab51616c58862c8d
GIT binary patch
literal 1164
zcmV;71atd|P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x1VKqeK~!jg?ODx=RYws1&Nbi+W)W}}fhZBO2@H%8cM=m_3ITEFE94CV
z*<~>=VDcKG>!4yZkX4c~q8pcD2#F#=^2eO|vN%6o)!o(IXLN*+DLD6>TU}NC)lXOV
zy$3j;1Nwhc7c)Ni?7_F}a3*j#N#5Pr-aPv{KrO-WMy$*g&nOj5AHGVEC0c?Zbs%{T
zoYOa+lUYfhl^tSPxWDzYiy@|r16G)wGv?S#ftCSG!!~d}hL}<Zj4&NQ9=<xzsuWqq
z5K%P)dcyBMdNbjH70`|?Uw}CMjgKLwRYveGyCD<o2zCTI;?%qAAUR){t_s-r(m=Bp
zfRo49k;A}_cj7tR>N@rHvw1!pc@L;RSa&i<{|IsR_KWH3-}f$TtmWjA5-QExl74rn
zrn|tFCf9*+&JN71ihTlVb-SkK;5)$3fk|d-ZLeTk^%(cp3^kQdZNi(MKE~7ge`X<g
zHaE7`aQ>^~if?5_49i`sr4mYvro+Sd)BAt8Kt1~H-d{sE1Lk{dBe2D_Q^){^H4vf7
zVOzEpsG29U(Pu;LPn7Hfx%otx_Hi}Y##XMw<#vH!;po=-V3+m^JegHW0V*uw;lrF!
zvZ*FMzVc4u)YWs34DZsd_h6&1?Q!O5yK{27J*)u@mL$YYwZBkfK(PZFd?GLPogS#~
z0|15+T6Oh0)x0=c+5tP1<4rb_DH5u*(a<I6M5+WzL75#W0#zhpir0f#$^hq^?||>r
ztTUORWaK;tMqcQAd)NomCa4`~O}~h!Z&PQ<Op`6Oagm29Tq>0i13-=-QlK8sWQ}o2
zL``Bsi~zc)ir`C?5Qg-tj5awSV;`ppLJHKhYISfF$+zuh2ehu3XlNNfs-}cEl#~vr
z&Q7|%rnWuPOPqzq^mqEleI@+_A<~a^Jlcqk4e7IWY6w~fWqF|kRQn`39H$!7PXfDr
zk5FPN16of54=WD9SVCp&Wd}?NiG(CJq@MtK=|`tR7IS)b^V9Pa;Gr`5k^}Qh0D74^
zaa;NcqVIRjaXGAkj9%v1o+SK#hT6_TB9PTIcRl?i@Yd#G{JQf3B(ZVw2!s;-NQ(4K
z*UX>27C8WATZX<kbF1kGasJ8)19Uo)o8Q>_8F3ejoLcIDE)x*|9f1hAm;R(PMG=lq
zy7oTEOJrxU16r|XZ$iNWI4{C6K$DG$r|v^QW=nhB2L_t=frj*(=sVGk!H4w_?lky)
zYJS1-{@aJ}#V2b`>8}CQjUWXNe0c}>{;@{I3GKC=?afPir1=HM!(V#zy<`AJ;Hv;_
z_py3IFn)Nlvj1xZx)?JSz2La`<KbdnnLJb^?QNzb{N2NlRLr6m92$IEn@$nBDp4DD
zF+{ZJ1xI;Nu??s@7-GF|FE}1uK30gutE0`&e-cFH;#6Dv3y$2&h5aHD*RvQ_y!N^<
e9MA#%SLk0@g-L0yf%YQ+0000<MNUMnLSTaF*C#Ci

literal 0
HcmV?d00001

diff --git a/images/dashlets/icons8-transaction-list-48.png b/images/dashlets/icons8-transaction-list-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..3496ec0c8604276544a79c6b8baa23f38289cd7c
GIT binary patch
literal 315
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCwj^(N7l!{JxM1({$v}}0o-U3d
z8I5nJ8|E<?3b@`^@N1aTH+jJl&#Br01-m@vG|W?aruF3^!ygexuZWx+0l~f>>mw`E
z)4r~mx-ZAzn8fE3F7KX}?7QV~ro(|nfa6lx&u^c0zyDgho$>6x@JBBsk7sAjzt+9{
z;GgG-aU4s(CKUzBCdAyh?qJtYVfQwBGP_{lEb$hO5?5Kb%KyTZ9dFKOP10ZNyq~Lf
zYgHn%(xrg7Bks>WuZ)eGS-Dhx=jqqS?lkN^meE@;u-J50|3#^}$1`H@8)p5JIiAtI
zC;5tDmXBcktLP`SE8m;C)vh#`eQ+5l?!S2NF|e{8!)G?}yXQ>5ks#$U59oIWPgg&e
IbxsLQ0M9Rs^#A|>

literal 0
HcmV?d00001

diff --git a/js/dashlet.js b/js/dashlet.js
index 46d1b9e25..511e87ade 100644
--- a/js/dashlet.js
+++ b/js/dashlet.js
@@ -30,7 +30,7 @@ $(function()
 		{
 			var me = this; 
 
-			this.closeBox = $('<div class="close-box"/>');
+			this.closeBox = $('<div class="ibo-dashlet--delete close-box"/>').append('<i class="fas fa-trash ibo-button--icon"></i>');
 			this.closeBox
 				.click(function() { me._remove_dashlet(); })
 				.prependTo(this.element);
diff --git a/js/icon_select.js b/js/icon_select.js
index e06a47444..51bc3c4f6 100644
--- a/js/icon_select.js
+++ b/js/icon_select.js
@@ -44,7 +44,7 @@ $(function()
 			}
 			this.oImg = $('<img src="'+sIcon+'" style="vertical-align: middle;" foo="bar">');								
 			this.oLabel = $('<span>'+sLabel+'</span>');
-			this.oButton = $('<button type="button" class="icon-select icon-select-dropdown"><div style="display: inline-block;vertical-align: middle;"><span class="ui-icon ui-icon-triangle-1-s"/></div></button>');
+			this.oButton = $('<button type="button" class="icon-select icon-select-dropdown ibo-input ibo-input-select-icon"><div style="display: inline-block;vertical-align: middle;"><span class="ui-icon ui-icon-triangle-1-s"/></div></button>');
 			this.oButton.prepend(this.oLabel).prepend(this.oImg);
 			this.oButton.click(function(event, ui) {
 				//me._cleanAllMenus();
@@ -105,10 +105,10 @@ $(function()
 				me._cleanAllMenus();
 			});
 			var oMenu =
-				$('<ul class="menu-icon-select">');
+				$('<ul class="menu-icon-select ibo-input-select-icon--menu">');
 			for(var i in this.options.items)
 			{
-				var oItem = $('<li><div value="'+i+'"><img src="'+this.options.items[i].icon+'" style="vertical-align: middle;"/>'+this.options.items[i].label+'<div></li>');
+				var oItem = $('<li class="ibo-input-select-icon--menu--item"><div value="'+i+'"><img class="ibo-input-select-icon--menu--icon" src="'+this.options.items[i].icon+'" style="vertical-align: middle;"/>'+this.options.items[i].label+'<div></li>');
 				oItem.on('click',function(data) {me._on_icon_selection(data);} );
 				oMenu.append(oItem);
 			}
diff --git a/js/property_field.js b/js/property_field.js
index c02c5ef20..156c2956b 100644
--- a/js/property_field.js
+++ b/js/property_field.js
@@ -26,7 +26,7 @@ $(function()
 			var me = this;
 
 			this.element
-				.addClass( "itop-property-field" )
+				.addClass( "itop-property-field ibo-field" )
 				.bind('apply_changes.itop-property-field', function(){me._do_apply();} );
 				
 			this.bModified = false;
@@ -52,19 +52,19 @@ $(function()
 				this.element.addClass("itop-property-field-modified");
 				if (this.options.can_apply)
 				{
-					this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: ''});					
+					this.element.find(".prop_icon.ibo-prop--apply").css({visibility: ''});					
 				}
 				else
 				{
-					this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: 'hidden'});
+					this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'});
 				}
-				this.element.find(".prop_icon span.ui-icon-circle-close").css({visibility: ''});
+				this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: ''});
 			}
 			else
 			{
 				this.element.removeClass("itop-property-field-modified");
-				this.element.find(".prop_icon span.ui-icon-circle-check").css({visibility: 'hidden'});
-				this.element.find(".prop_icon span.ui-icon-circle-close").css({visibility: 'hidden'});
+				this.element.find(".prop_icon.ibo-prop--apply").css({visibility: 'hidden'});
+				this.element.find(".prop_icon.ibo-prop--cancel").css({visibility: 'hidden'});
 			}
 		},