From fc4b8a26522f17b8ce2d8b9839bd2660d787ff48 Mon Sep 17 00:00:00 2001
From: Alex <40072887+alexdcrane@users.noreply.github.com>
Date: Wed, 23 Jul 2025 16:32:39 -0700
Subject: [PATCH] Dashboard - Allow drag and drop in parent widgets (#7431)

* Dashboard - Allow drag and drop in parent widgets

* Update parent.php

* Update index.php

* Update config.php

* Update missed_calls.php

* Update recent_calls.php

* Update voicemails.php

* Update active_calls.php

* Update config.php

* Update config.php

* Update config.php

* Update voicemails.php

* Update parent.php

* Update voicemails.php

* Update parent.php

* Update parent.php

* Update index.php

---------

Co-authored-by: FusionPBX <markjcrane@gmail.com>
---
 .../resources/dashboard/active_calls.php      |   8 +-
 .../resources/dashboard/config.php            |   1 +
 app/devices/resources/dashboard/config.php    |   1 +
 .../resources/dashboard/voicemails.php        |   4 +-
 .../resources/dashboard/missed_calls.php      |   4 +-
 .../resources/dashboard/recent_calls.php      |   2 -
 core/contacts/resources/dashboard/config.php  |   1 +
 core/dashboard/index.php                      | 124 ++++++--
 core/dashboard/resources/dashboard/parent.php | 269 +++++++++++-------
 9 files changed, 264 insertions(+), 150 deletions(-)

diff --git a/app/active_calls/resources/dashboard/active_calls.php b/app/active_calls/resources/dashboard/active_calls.php
index 578dc9c039..72d259b4cb 100644
--- a/app/active_calls/resources/dashboard/active_calls.php
+++ b/app/active_calls/resources/dashboard/active_calls.php
@@ -70,11 +70,9 @@ $row_style["1"] = "row_style1";
 //icon and count
 echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
 	echo "<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/active_calls/active_calls.php'\">".$text['title']."</a></span>\n";
-	echo "<div class='hud_content'>\n";
-		echo "<div style='position: relative; display: inline-block;'>\n";
-			echo "<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
-			echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
-		echo "</div>\n";
+	echo "<div style='position: relative; display: inline-block;'>\n";
+		echo "<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
+		echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
 	echo "</div>\n";
 echo "</div>\n";
 
diff --git a/app/call_centers/resources/dashboard/config.php b/app/call_centers/resources/dashboard/config.php
index 20e25dd1b3..085f674c04 100644
--- a/app/call_centers/resources/dashboard/config.php
+++ b/app/call_centers/resources/dashboard/config.php
@@ -4,6 +4,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = '9083305a-ebb4-4b67-bb9b-8c09cf03026
 $array['dashboard'][$x]['dashboard_name'] = 'Call Center Agents';
 $array['dashboard'][$x]['dashboard_path'] = 'call_centers/call_center_agents';
 $array['dashboard'][$x]['dashboard_icon'] = '';
+$array['dashboard'][$x]['dashboard_icon_color'] = '';
 $array['dashboard'][$x]['dashboard_url'] = '';
 $array['dashboard'][$x]['dashboard_target'] = '';
 $array['dashboard'][$x]['dashboard_width'] = '';
diff --git a/app/devices/resources/dashboard/config.php b/app/devices/resources/dashboard/config.php
index 3b1917a277..a173fcc407 100644
--- a/app/devices/resources/dashboard/config.php
+++ b/app/devices/resources/dashboard/config.php
@@ -5,6 +5,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = 'f1c722d5-b714-4fa2-9664-5f6d24d4466
 $array['dashboard'][$x]['dashboard_name'] = 'Device Keys';
 $array['dashboard'][$x]['dashboard_path'] = 'devices/device_keys';
 $array['dashboard'][$x]['dashboard_icon'] = '';
+$array['dashboard'][$x]['dashboard_icon_color'] = '';
 $array['dashboard'][$x]['dashboard_url'] = '';
 $array['dashboard'][$x]['dashboard_target'] = 'self';
 $array['dashboard'][$x]['dashboard_width'] = '';
diff --git a/app/voicemails/resources/dashboard/voicemails.php b/app/voicemails/resources/dashboard/voicemails.php
index 6f062a54ca..e24f957850 100644
--- a/app/voicemails/resources/dashboard/voicemails.php
+++ b/app/voicemails/resources/dashboard/voicemails.php
@@ -105,12 +105,10 @@
 
 	//dashboard icon
 	if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
-		echo "<span class='hud_content'>\n";
-		echo "<div style='position: relative; display: inline-block;'>\n";
+		echo "	<div style='position: relative; display: inline-block;'>\n";
 		echo "		<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
 		echo "		<span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$messages['new']."</span>\n";
 		echo "	</div>\n";
-		echo "</span>";
 	}
 
 	echo "</div>\n";
diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index 3aeeaa890d..20051cb68e 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -146,12 +146,10 @@
 
 	//dashboard icon
 	if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
-		echo "<span class='hud_content'>\n";
-		echo "<div style='position: relative; display: inline-block;'>\n";
+		echo "	<div style='position: relative; display: inline-block;'>\n";
 		echo "		<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
 		echo "		<span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#EA4C46')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$num_rows."</span>\n";
 		echo "	</div>\n";
-		echo "</span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/xml_cdr/resources/dashboard/recent_calls.php b/app/xml_cdr/resources/dashboard/recent_calls.php
index 253c336e8c..b5ca5a635b 100644
--- a/app/xml_cdr/resources/dashboard/recent_calls.php
+++ b/app/xml_cdr/resources/dashboard/recent_calls.php
@@ -144,12 +144,10 @@
 
 	//dashboard icon
 	if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
-		echo "<div class='hud_content'>\n";
 		echo "	<div style='position: relative; display: inline-block;'>\n";
 		echo "		<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
 		echo "		<span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#417ed3')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$num_rows."</span>\n";
 		echo "	</div>\n";
-		echo "</div>";
 	}
 
 	echo "</div>\n";
diff --git a/core/contacts/resources/dashboard/config.php b/core/contacts/resources/dashboard/config.php
index ade1eb5a76..114bf4fbc4 100644
--- a/core/contacts/resources/dashboard/config.php
+++ b/core/contacts/resources/dashboard/config.php
@@ -5,6 +5,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = '3b0cbb2f-733d-4646-8332-7d108808f2f
 $array['dashboard'][$x]['dashboard_name'] = 'Contacts';
 $array['dashboard'][$x]['dashboard_path'] = 'dashboard/icon';
 $array['dashboard'][$x]['dashboard_icon'] = 'fa-regular fa-address-card';
+$array['dashboard'][$x]['dashboard_icon_color'] = '#0292ff';
 $array['dashboard'][$x]['dashboard_url'] = '/core/contacts/contacts.php';
 $array['dashboard'][$x]['dashboard_target'] = 'self';
 $array['dashboard'][$x]['dashboard_width'] = '';
diff --git a/core/dashboard/index.php b/core/dashboard/index.php
index 931912fd8d..0492c0b0c2 100644
--- a/core/dashboard/index.php
+++ b/core/dashboard/index.php
@@ -1,3 +1,4 @@
+
 <?php
 /*
 	FusionPBX
@@ -105,10 +106,10 @@
 	$sql .= "dashboard_details_state, ";
 	$sql .= "dashboard_order, ";
 	$sql .= "cast(dashboard_enabled as text), ";
-	$sql .= "dashboard_description ";
+	$sql .= "dashboard_description, ";
+	$sql .= "dashboard_parent_uuid ";
 	$sql .= "from v_dashboard as d ";
 	$sql .= "where dashboard_enabled = 'true' ";
-	$sql .= "and dashboard_parent_uuid is null ";
 	$sql .= "and dashboard_uuid in (";
 	$sql .= "	select dashboard_uuid from v_dashboard_groups where group_uuid in (";
 	$sql .= "		".$group_uuids_in." ";
@@ -123,13 +124,25 @@
 		//set the variables from the http values
 		if (isset($_POST["widget_order"])) {
 			$widgets = explode(",", $_POST["widget_order"]);
-			$dashboard_order = '0';
 			$x = 0;
+
 			foreach ($widgets as $widget) {
+				list($widget_id, $parent_id, $order) = explode("|", $widget);
+				$parent_uuid = null;
+
 				foreach ($dashboard as $row) {
 					$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
-					if ($widget == $dashboard_name) {
-						$dashboard_order = $dashboard_order + 10;
+					if ($widget_id == $dashboard_name) {
+						if (!empty($parent_id)) {
+							//find parent uuid
+							foreach ($dashboard as $parent_row) {
+								$parent_dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($parent_row['dashboard_name'])), '_');
+								if ($parent_dashboard_name === $parent_id) {
+									$parent_uuid = $parent_row['dashboard_uuid'];
+									break;
+								}
+							}
+						}
 						$array['dashboard'][$x]['dashboard_uuid'] = $row['dashboard_uuid'];
 						$array['dashboard'][$x]['dashboard_name'] = $row['dashboard_name'];
 						$array['dashboard'][$x]['dashboard_icon'] = $row['dashboard_icon'];
@@ -140,8 +153,10 @@
 						$array['dashboard'][$x]['dashboard_target'] = $row['dashboard_target'];
 						$array['dashboard'][$x]['dashboard_width'] = $row['dashboard_width'];
 						$array['dashboard'][$x]['dashboard_height'] = $row['dashboard_height'];
-						$array['dashboard'][$x]['dashboard_order'] = $dashboard_order;
+						$array['dashboard'][$x]['dashboard_order'] = $order;
+						$array['dashboard'][$x]['dashboard_parent_uuid'] = $parent_uuid;
 						$x++;
+						break;
 					}
 				}
 			}
@@ -386,6 +401,11 @@ foreach ($dashboard as $row) {
 			echo "	height: 195px;\n";
 			echo "}\n";
 	}
+	if ($row['dashboard_column_span'] > 1) {
+		echo "#".$dashboard_name." div.parent_widgets.hud_content {\n";
+		echo "	 justify-content: space-evenly;\n";
+		echo "}\n";
+	}
 
 }
 ?>
@@ -576,12 +596,13 @@ function toggle_grid_row_end_all() {
 		$widget_name = $dashboard_path_array[1];
 		$path_array = glob(dirname(__DIR__, 2).'/*/'.$application_name.'/resources/dashboard/'.$widget_name.'.php');
 
-		echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_name_id."' draggable='false'>\n";
-		if (file_exists($path_array[0])) {
-			include $path_array[0];
+		if (empty($row['dashboard_parent_uuid'])) {
+			echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_name_id."' draggable='false'>\n";
+			if (file_exists($path_array[0])) {
+				include $path_array[0];
+			}
+			echo "</div>\n";
 		}
-		echo "</div>\n";
-
 		$x++;
 	}
 	echo "</div>\n";
@@ -632,8 +653,9 @@ function toggle_grid_row_end_all() {
 		</style>
 
 		<script>
-		var widgets = document.getElementById('widgets');
-		var sortable;
+		const widgets = document.getElementById('widgets');
+		let sortable;
+
 		//make widgets draggable
 		function edit_mode(state) {
 
@@ -642,39 +664,85 @@ function toggle_grid_row_end_all() {
 				$('.hud_box').addClass('editable');
 				$('#btn_back, #btn_save').show();
 				$('div.widget').attr('draggable',true).addClass('editable');
+				$('div.parent_widget').attr('draggable',true).addClass('editable');
+
+				function update_widget_order() {
+					let widget_ids_list = [];
+					let order = 10;
+
+					document.querySelectorAll('#widgets > div.widget[id]').forEach(widget => {
+						const widget_id = widget.id;
+
+						//add the widgets to the list
+						widget_ids_list.push(`${widget_id}|null|${order}`);
+						order += 10;
+
+						//add the nested widgets to the list
+						const nested_container = widget.querySelector('.parent_widgets');
+						if (nested_container) {
+							nested_container.querySelectorAll(':scope > div.parent_widget[id]').forEach(nested => {
+								const child_id = nested.id;
+								widget_ids_list.push(`${child_id}|${widget_id}|${order}`);
+								order += 10;
+							});
+						}
+					});
+
+					document.getElementById('widget_order').value = widget_ids_list;
+				}
 
 				sortable = Sortable.create(widgets, {
+					group: 'nested',
 					animation: 150,
-					draggable: ".widget",
+					draggable: '.widget',
 					preventOnFilter: true,
 					ghostClass: 'ghost',
-					onSort: function (evt) {
-						let widget_ids = document.querySelectorAll("#widgets > div[id]");
-						let widget_ids_list = [];
-						for (let i = 0; i < widget_ids.length; i++) {
-							widget_ids_list.push(widget_ids[i].id);
-						}
-						document.getElementById('widget_order').value = widget_ids_list;
+					onSort: update_widget_order,
+					onAdd: function (evt) {
+						evt.item.classList.add('widget');
+						update_widget_order();
+					},
+					onRemove: function (evt) {
+						evt.item.classList.remove('widget');
+						update_widget_order();
 					},
 				});
 
-				// set initial widget order
-				let widget_ids = document.querySelectorAll("#widgets > div[id]");
-				let widget_ids_list = [];
-				for (let i = 0; i < widget_ids.length; i++) {
-					widget_ids_list.push(widget_ids[i].id);
-				}
-				document.getElementById('widget_order').value = widget_ids_list;
+				document.querySelectorAll('.parent_widgets').forEach(function(container) {
+					Sortable.create(container, {
+						group: 'nested',
+						animation: 150,
+						draggable: '.parent_widget',
+						ghostClass: 'ghost',
+						fallbackOnBody: true,
+						onSort: update_widget_order,
+						onAdd: function (evt) {
+							evt.item.classList.add('parent_widget');
+							update_widget_order();
+						},
+						onRemove: function (evt) {
+							evt.item.classList.remove('parent_widget');
+							update_widget_order();
+						},
+					});
+				});
 
 			}
 			else { // off
 
 				$('div.widget').attr('draggable',false).removeClass('editable');
+				$('div.parent_widget').attr('draggable',false).removeClass('editable');
 				$('.hud_box').removeClass('editable');
 				$('#btn_back, #btn_save').hide();
 				$('span#expand_contract, #btn_edit, #btn_add').show();
 
 				sortable.option('disabled', true);
+				document.querySelectorAll('.parent_widgets').forEach(el => {
+				const nested_sortable = Sortable.get(el);
+					if (nested_sortable) {
+						nested_sortable.option('disabled', true);
+					}
+				});
 
 			}
 		}
diff --git a/core/dashboard/resources/dashboard/parent.php b/core/dashboard/resources/dashboard/parent.php
index 4fcf295d12..db3d875f67 100644
--- a/core/dashboard/resources/dashboard/parent.php
+++ b/core/dashboard/resources/dashboard/parent.php
@@ -23,6 +23,7 @@
 	$sql .= "dashboard_name, ";
 	$sql .= "dashboard_path, ";
 	$sql .= "dashboard_icon, ";
+	$sql .= "dashboard_icon_color, ";
 	$sql .= "dashboard_url, ";
 	$sql .= "dashboard_target, ";
 	$sql .= "dashboard_width, ";
@@ -38,9 +39,12 @@
 	$sql .= "dashboard_label_background_color_hover, ";
 	$sql .= "dashboard_number_text_color, ";
 	$sql .= "dashboard_number_text_color_hover, ";
+	$sql .= "dashboard_number_background_color, ";
 	$sql .= "dashboard_background_color, ";
 	$sql .= "dashboard_background_color_hover, ";
 	$sql .= "dashboard_detail_background_color, ";
+	$sql .= "dashboard_background_gradient_style, ";
+	$sql .= "dashboard_background_gradient_angle, ";
 	$sql .= "dashboard_column_span, ";
 	$sql .= "dashboard_row_span, ";
 	$sql .= "dashboard_details_state, ";
@@ -62,110 +66,125 @@
 		$window_parameters .= "width=".$dashboard_width.",height=".$dashboard_height;
 	}
 
-//dashboard settings
-	echo "<style>\n";
-	foreach ($parent_widgets as $row) {
-		$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
-		if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) {
-			echo "#".$dashboard_name." .hud_title {\n";
-			if (!empty($row['dashboard_label_text_color'])) { echo "	color: ".$row['dashboard_label_text_color'].";\n"; }
-			if (!empty($row['dashboard_label_background_color'])) { echo "	background-color: ".$row['dashboard_label_background_color'].";\n"; }
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) {
-			echo "#".$dashboard_name.":hover .hud_title {\n";
-			if (!empty($row['dashboard_label_text_color_hover'])) { echo "	color: ".$row['dashboard_label_text_color_hover'].";\n"; }
-			if (!empty($row['dashboard_label_background_color_hover'])) { echo "	background-color: ".$row['dashboard_label_background_color_hover'].";\n"; }
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_number_text_color'])) {
-			echo "#".$dashboard_name." .hud_stat {\n";
-			echo "	color: ".$row['dashboard_number_text_color'].";\n";
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_number_text_color_hover'])) {
-			echo "#".$dashboard_name.":hover .hud_stat {\n";
-			echo "	color: ".$row['dashboard_number_text_color_hover'].";\n";
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_background_color'])) {
-			$background_color = json_decode($row['dashboard_background_color'], true);
-			echo "#".$dashboard_name." {\n";
-			echo "	background: ".$background_color[0].";\n";
-			echo "	background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_background_color_hover'])) {
-			$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
-			echo "#".$dashboard_name.":hover {\n";
-			echo "	background: ".$background_color_hover[0].";\n";
-			echo "	background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
-			echo "}\n";
-		}
-		if (!empty($row['dashboard_detail_background_color'])) {
-			$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
-			echo "#".$dashboard_name." .hud_details {\n";
-			echo "	background: ".$detail_background_color[0].";\n";
-			echo "	background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
-			echo "}\n";
-		}
-		if ($row['dashboard_label_enabled'] == 'false') {
-			echo "#".$dashboard_name." .hud_title {\n";
-			echo "	display: none;\n";
-			echo "}\n";
-			echo "#".$dashboard_name." .hud_content {\n";
-			echo "	align-content: center;\n";
-			echo "}\n";
-		}
-		if ($row['dashboard_path'] == "dashboard/icon") {
-			echo "#".$dashboard_name.",\n";
-			echo "#".$dashboard_name." span.hud_title,\n";
-			echo "#".$dashboard_name." span.hud_stat {\n";
-			echo "	transition: .4s;\n";
-			echo "	border-radius: 5px;\n";
-			echo "}\n";
-		}
-		switch ($row['dashboard_row_span']) {
-			case 1:
-				echo "#".$dashboard_name." .hud_content {\n";
-				echo "	height: 89.5px;\n";
-				echo "}\n";
-				echo "#".$dashboard_name." .hud_stat {\n";
-				echo "	line-height: 0;\n";
-				echo "	font-size: 30pt;\n";
-				echo "}\n";
-				echo "#".$dashboard_name." .hud_chart {\n";
-				echo "	height: 54px;\n";
-				echo "	width: 180px;\n";
-				echo "	padding-top: 0;\n";
-				echo "}\n";
-				echo "#".$dashboard_name." div.hud_content .fas {\n";
-				echo "	line-height: 0;\n";
-				echo "	font-size: 24pt;\n";
-				echo "}\n";
-				break;
-			case 2:
-				echo "#".$dashboard_name." .hud_content {\n";
-				echo "	height: 195px;\n";
-				echo "}\n";
-				break;
-			case 3:
-				echo "#".$dashboard_name." .hud_content {\n";
-				echo "	height: 300.5px;\n";
-				echo "}\n";
-				break;
-		}
+?>
+
+<style>
+
+div.parent_widgets .hud_content {
+	align-content: center;
+}
+
+div.parent_widgets {
+	row-gap: 1rem;
+}
+
+div.parent_widget div.hud_box:first-of-type {
+	min-width: 120px;
+	flex: 0 0 33.3333%;
+	box-sizing: border-box;
+	box-shadow: none;
+	-webkit-transition: .1s;
+	-moz-transition: .1s;
+	transition: .1s;
+}
+
+div.parent_widget:has(i) div.hud_box {
+	max-height: 89.5px;
+}
+
+div.parent_widget:hover:has(i) div.hud_box,
+div.parent_widget.editable:hover:has(i) div.hud_box {
+	transform: scale(1.05, 1.05);
+	-webkit-transition: .1s;
+	-moz-transition: .1s;
+	transition: .1s;
+}
+
+/* dashboard settings */
+<?php
+foreach ($parent_widgets as $row) {
+	$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
+	if (!empty($row['dashboard_icon_color'])) {
+		echo "#".$dashboard_name." .hud_stat:has(i) {\n";
+		echo "	color: ".$row['dashboard_icon_color'].";\n";
+		echo "}\n";
 	}
-	echo "</style>\n";
+	if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) {
+		echo "#".$dashboard_name." .hud_title {\n";
+		if (!empty($row['dashboard_label_text_color'])) { echo "	color: ".$row['dashboard_label_text_color'].";\n"; }
+		if (!empty($row['dashboard_label_background_color'])) { echo "	background-color: ".$row['dashboard_label_background_color'].";\n"; }
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) {
+		echo "#".$dashboard_name.":hover .hud_title {\n";
+		if (!empty($row['dashboard_label_text_color_hover'])) { echo "	color: ".$row['dashboard_label_text_color_hover'].";\n"; }
+		if (!empty($row['dashboard_label_background_color_hover'])) { echo "	background-color: ".$row['dashboard_label_background_color_hover'].";\n"; }
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_number_text_color'])) {
+		echo "#".$dashboard_name." .hud_stat {\n";
+		echo "	color: ".$row['dashboard_number_text_color'].";\n";
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_number_text_color_hover'])) {
+		echo "#".$dashboard_name.":hover .hud_stat {\n";
+		echo "	color: ".$row['dashboard_number_text_color_hover'].";\n";
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_background_color'])) {
+		$background_color = json_decode($row['dashboard_background_color'], true);
+		echo "#".$dashboard_name." {\n";
+		echo "	background: ".$background_color[0].";\n";
+		echo "	background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_background_color_hover'])) {
+		$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
+		echo "#".$dashboard_name.":hover {\n";
+		echo "	background: ".$background_color_hover[0].";\n";
+		echo "	background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_detail_background_color'])) {
+		$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
+		echo "#".$dashboard_name." .hud_details {\n";
+		echo "	background: ".$detail_background_color[0].";\n";
+		echo "	background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
+		echo "}\n";
+	}
+	if ($row['dashboard_label_enabled'] == 'false') {
+		echo "#".$dashboard_name." .hud_title {\n";
+		echo "	display: none;\n";
+		echo "}\n";
+		echo "#".$dashboard_name." .hud_content {\n";
+		echo "	align-content: center;\n";
+		echo "}\n";
+	}
+	if ($row['dashboard_path'] == "dashboard/icon") {
+		echo "#".$dashboard_name.",\n";
+		echo "#".$dashboard_name." span.hud_title,\n";
+		echo "#".$dashboard_name." span.hud_stat {\n";
+		echo "	transition: .4s;\n";
+		echo "	border-radius: 5px;\n";
+		echo "}\n";
+	}
+}
+?>
+
+</style>
+
+<?php
 
 //include the dashboards
-	echo "<div class='hud_box' style='width: 100%; overflow: scroll;'>\n";
-	echo "	<div class='hud_content'>\n";
+	echo "<div class='hud_box' style='overflow: scroll;'>\n";
+	echo "	<div class='parent_widgets hud_content'>\n";
 
 	$x = 0;
 	foreach ($parent_widgets as $row) {
-		$dashboard_name = $row['dashboard_name'];
-		$dashboard_label = $row['dashboard_name'];
+		//set the variables
+		$dashboard_uuid = $row['dashboard_uuid'] ?? '';
+		$dashboard_name = $row['dashboard_name'] ?? '';
+		$dashboard_label = $row['dashboard_name'] ?? '';
 		$dashboard_icon = $row['dashboard_icon'] ?? '';
 		$dashboard_url = $row['dashboard_url'] ?? '';
 		$dashboard_target = $row['dashboard_target'] ?? '';
@@ -174,18 +193,50 @@
 		$dashboard_content = $row['dashboard_content'] ?? '';
 		$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
 		$dashboard_content_details = $row['dashboard_content_details'] ?? '';
-		//$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut";
-		$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color');
-		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
-		//$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
-		//$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
-		//if ($dashboard_details_state == "expanded") {
-		//	$dashboard_row_span += 3;
-		//}
+		$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut";
+		$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
+		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
+		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
+		$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
+		$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
 
-		echo "<div class='icon_widget' style='width: 120px; margin: 15px 15px 8px 15px;' id='".trim(preg_replace("/[^a-z]/", '_', strtolower($dashboard_name)),'_')."' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\" draggable='false'>\n";
-		echo "	<span class='hud_title'>".escape($dashboard_label)."</span>";
-		echo "	<span class='hud_stat' style='padding: 0 0 7px 0;'><i class=\"fas ".$dashboard_icon."\" style='font-size: 24pt;'></i></span>\n";
+		//define the regex patterns
+		$uuid_pattern = '/[^-A-Fa-f0-9]/';
+		$number_pattern = '/[^-A-Za-z0-9()*#]/';
+		$text_pattern = '/[^a-zA-Z0-9 _\-\/.\?:\=#\n]/';
+
+		//sanitize the data
+		$dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid);
+		$dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name));
+		$dashboard_name_id = trim(preg_replace("/[^a-z_]/", '_', strtolower($dashboard_name)),'_');
+		$dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon);
+		$dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url));
+		$dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target));
+		$dashboard_width = trim(preg_replace($text_pattern, '', $dashboard_width));
+		$dashboard_height = trim(preg_replace($text_pattern, '', $dashboard_height));
+		$dashboard_content = preg_replace($text_pattern, '', $dashboard_content);
+		$dashboard_content = str_replace("\n", '<br />', $dashboard_content);
+		$dashboard_content_text_align = trim(preg_replace($text_pattern, '', $dashboard_content_text_align));
+		$dashboard_content_details = preg_replace($text_pattern, '', $dashboard_content_details);
+		$dashboard_content_details = str_replace("\n", '<br />', $dashboard_content_details);
+		$dashboard_chart_type = preg_replace($text_pattern, '', $dashboard_chart_type);
+		$dashboard_label_text_color = preg_replace($text_pattern, '', $dashboard_label_text_color);
+		$dashboard_number_text_color = preg_replace($text_pattern, '', $dashboard_number_text_color);
+		$dashboard_number_background_color = preg_replace($text_pattern, '', $dashboard_number_background_color);
+		$dashboard_details_state = preg_replace($text_pattern, '', $dashboard_details_state);
+		$dashboard_row_span = preg_replace($number_pattern, '', $dashboard_row_span);
+		$dashboard_path = preg_replace($text_pattern, '', strtolower($row['dashboard_path']));
+
+		//find the application and widget
+		$dashboard_path_array = explode('/', $dashboard_path);
+		$application_name = $dashboard_path_array[0];
+		$parent_widget_name = $dashboard_path_array[1];
+		$path_array = glob(dirname(__DIR__, 4).'/*/'.$application_name.'/resources/dashboard/'.$parent_widget_name.'.php');
+
+		echo "<div class='parent_widget' onclick=\"".(!empty($dashboard_url && $dashboard_path == "dashboard/icon") ? "window.open('". $dashboard_url ."', '". $dashboard_target ."', '". $window_parameters ."')" : "")."\" id='".$dashboard_name_id."' draggable='false'>\n";
+		if (file_exists($path_array[0])) {
+			include $path_array[0];
+		}
 		echo "</div>\n";
 	}