From 6ae623ab2220520a8b055a75d8148e5de7151410 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:20:15 +0100
Subject: [PATCH 01/24] bugfix on templates

---
 .vscode/cspell.json                     |   2 +
 core/template/dashboard/AsusWRT.html    | 364 ++++++++++-------
 core/template/dashboard/Monitoring.html | 509 ++++++++++++++----------
 3 files changed, 524 insertions(+), 351 deletions(-)

diff --git a/.vscode/cspell.json b/.vscode/cspell.json
index 00eadc69..4e41ac8a 100644
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -36,6 +36,8 @@
         "Equipement",
         "esata",
         "Etat",
+        "Eteindre",
+        "Etes",
         "firmver",
         "Formated",
         "freebsd",
diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index 42cd756a..7e6931f4 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -197,6 +197,26 @@
 	(() => {
 		'use strict'
 		
+		// Get reference to this specific widget container
+		const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+		if (!widgetRoot) return
+		
+		/**
+		 * Safely parse JSON from data attribute
+		 * @param {string} jsonString - JSON string to parse
+		 * @param {object} fallback - Fallback value if parsing fails
+		 * @returns {object} Parsed object or fallback
+		 */
+		const safeJSONParse = (jsonString, fallback = {min: '-', avg: '-', max: '-'}) => {
+			if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+			try {
+				return JSON.parse(jsonString)
+			} catch (e) {
+				console.warn('[Monitoring AsusWRT] JSON parse error:', e, 'Input:', jsonString)
+				return fallback
+			}
+		}
+		
 		// ========================================
 		// === UTILITY FUNCTIONS ===
 		// ========================================
@@ -285,7 +305,8 @@
 		 * Initialize SSH connection status icon
 		 */
 		const initIconSSH = () => {
-			const iconSSH = document.getElementById('iconSSH#id#')
+		try {
+			const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
 			if (!iconSSH) return
 			
 			if ('#cnx_ssh#' === 'OK') {
@@ -293,13 +314,17 @@
 			} else if ('#cnx_ssh#' === 'KO') {
 				iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
 			}
-		}
-		
-		/**
-		 * Initialize Cron status icon
-		 */
-		const initIconCron = () => {
-			const iconCron = document.getElementById('iconCron#id#')
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initIconSSH:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Cron status icon
+	 */
+	const initIconCron = () => {
+		try {
+			const iconCron = widgetRoot.querySelector('#iconCron#id#')
 			if (!iconCron) return
 			
 			const isOn = '#cron_status#' === '1'
@@ -312,13 +337,17 @@
 			const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
 		
 			iconCron.innerHTML = `<i title="Cron ${label}${customLabel}" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
-		}
-		
-		/**
-		 * Initialize Check Firmware icon
-		 */
-		const initIconCheckFirmware = () => {
-			const el = document.getElementById('iconCheckFirmware#id#')
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initIconCron:', e)
+		}
+	}
+	
+	/**
+	 * Initialize firmware check icon
+	 */
+	const initIconCheckFirmware = () => {
+		try {
+			const el = widgetRoot.querySelector('#iconCheckFirmware#id#')
 			if (!el) return
 			
 			if ('#asus_fw_check#' === '1') {
@@ -326,17 +355,21 @@
 			} else if ('#asus_fw_check#' === '0') {
 				el.innerHTML = '<i title="Check du Firmware :: 0" class="cmd monitor-btn fas fa-bell-slash tooltips" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
 			}
-		}
-		
-		// ========================================
-		// === BUTTON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize Reboot button with confirmation dialog
-		 */
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initIconCheckFirmware:', e)
+		}
+	}
+	
+	// ========================================
+	// === BUTTON HANDLERS ===
+	// ========================================
+	
+	/**
+	 * Initialize Reboot button with confirmation dialog
+	 */
 		const initRebootButton = () => {
-			const rebootBtn = document.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+		try {
+			const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
 			rebootBtn?.addEventListener('click', () => {
 				jeeDialog.confirm({
 					title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
@@ -348,13 +381,17 @@
 					callback: result => result && jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
 				})
 			})
-		}
-		
-		/**
-		 * Initialize Refresh button
-		 */
-		const initRefreshButton = () => {
-			const refreshBtn = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initRebootButton:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Refresh button
+	 */
+	const initRefreshButton = () => {
+		try {
+			const refreshBtn = widgetRoot.querySelector('.refresh')
 			if (!refreshBtn) return
 			
 			if ('#refresh_id#' !== '') {
@@ -362,84 +399,112 @@
 			} else {
 				refreshBtn.remove()
 			}
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - Simple ===
-		// ========================================
-		
-		/**
-		 * Initialize Uptime display
-		 */
-		const initUptime = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initRefreshButton:', e)
+		}
+	}
+	
+	// ========================================
+	// === VALUE DISPLAYS - Simple ===
+	// ========================================
+	
+	/**
+	 * Initialize Uptime display
+	 */
+	const initUptime = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const uptimeEl = document.getElementById('uptime#id#')
+			const uptimeEl = widgetRoot.querySelector('#uptime#id#')
 			if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
-		}
-		
-		/**
-		 * Initialize Network Infos display
-		 */
-		const initNetworkInfos = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initUptime:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Network Infos display
+	 */
+	const initNetworkInfos = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const networkInfosEl = document.getElementById('network_infos#id#')
+			const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
 			if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-		}
-		
-		/**
-		 * Initialize Network Traffic display
-		 */
-		const initNetwork = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Network display
+	 */
+	const initNetwork = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const networkEl = document.getElementById('network#id#')
+			const networkEl = widgetRoot.querySelector('#network#id#')
 			if (networkEl) networkEl.innerHTML = '<span>#network#</span>'
-		}
-		
-		/**
-		 * Initialize Asus Clients display
-		 */
-		const initAsusClients = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Asus Clients display
+	 */
+	const initAsusClients = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const el = document.getElementById('asus_clients#id#')
+			const el = widgetRoot.querySelector('#asus_clients#id#')
 			if (el) el.innerHTML = '<span>#asus_clients#</span>'
-		}
-		
-		/**
-		 * Initialize Asus WAN IP display
-		 */
-		const initAsusWan0IP = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Asus WAN0 IP display
+	 */
+	const initAsusWan0IP = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const el = document.getElementById('asus_wan0_ip#id#')
+			const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
 			if (el) el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
-		}
-		
-		/**
-		 * Initialize Asus WiFi Temperature display
-		 */
-		const initAsusWifiTemp = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initAsusWan0IP:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Asus WiFi Temperature display
+	 */
+	const initAsusWifiTemp = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const el = document.getElementById('asus_wifi_temp#id#')
+			const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
 			if (el) el.innerHTML = '<span>#asus_wifi_temp#</span>'
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - With Thresholds ===
-		// ========================================
-		
-		/**
-		 * Initialize Load Average displays (1mn, 5mn, 15mn)
-		 */
-		const initLoadAverage = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initAsusWifiTemp:', e)
+		}
+	}
+	
+	// ========================================
+	// === VALUE DISPLAYS - With Thresholds ===
+	// ========================================
+	
+	/**
+	 * Initialize Load Average displays (1mn, 5mn, 15mn)
+	 */
+	const initLoadAverage = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
 			// Load avg 1mn
-			const loadAvg1mn = document.getElementById('load_avg_1mn#id#')
+			const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 			if (loadAvg1mn) {
 				const html = buildThresholdHTML(
 					'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
@@ -451,7 +516,7 @@
 			}
 			
 			// Load avg 5mn
-			const loadAvg5mn = document.getElementById('load_avg_5mn#id#')
+			const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
 			if (loadAvg5mn) {
 				const html = buildThresholdHTML(
 					'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
@@ -463,7 +528,7 @@
 			}
 			
 			// Load avg 15mn
-			const loadAvg15mn = document.getElementById('load_avg_15mn#id#')
+			const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
 			if (loadAvg15mn) {
 				const html = buildThresholdHTML(
 					'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
@@ -473,15 +538,19 @@
 				)
 				loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
 			}
-		}
-		
-		/**
-		 * Initialize Memory display with percentage
-		 */
-		const initMemory = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Memory display with percentage
+	 */
+	const initMemory = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const memoryEl = document.getElementById('memory_available_percent#id#')
+			const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
 			if (!memoryEl) return
 			
 			const value = '#memory_available_percent#'
@@ -496,15 +565,19 @@
 				{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
 				'#memory_available_percent_tendance#', '#memory# (', '%', true
 			)
-		}
-		
-		/**
-		 * Initialize Swap display with percentage
-		 */
-		const initSwap = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initMemory:', e)
+		}
+	}
+	
+	/**
+	 * Initialize Swap display with percentage
+	 */
+	const initSwap = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const swapEl = document.getElementById('swap_free_percent#id#')
+			const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
 			if (!swapEl) return
 			
 			const value = '#swap_free_percent#'
@@ -519,15 +592,19 @@
 				{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
 				'#swap_free_percent_tendance#', '#swap# (', '%', true
 			)
-		}
-		
-		/**
-		 * Initialize HDD display with percentage
-		 */
-		const initHDD = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initSwap:', e)
+		}
+	}
+	
+	/**
+	 * Initialize HDD display with percentage
+	 */
+	const initHDD = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const hddEl = document.getElementById('hdd#id#')
+			const hddEl = widgetRoot.querySelector('#hdd#id#')
 			if (!hddEl) return
 			
 			const value = '#hdd_free_percent#'
@@ -542,21 +619,25 @@
 				{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
 				'#hdd_free_percent_tendance#', '#hdd# (', '%', true
 			)
-		}
-		
-		/**
-		 * Initialize CPU display with optional temperature
-		 */
-		const initCPU = () => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initHDD:', e)
+		}
+	}
+	
+	/**
+	 * Initialize CPU display with optional temperature
+	 */
+	const initCPU = () => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
-			const cpuEl = document.getElementById('cpu#id#')
+			const cpuEl = widgetRoot.querySelector('#cpu#id#')
 			if (!cpuEl) return
 			
 			if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
 				cpuEl.innerHTML = '<span>#cpu# </span>'
 				
-				const tempEl = document.getElementById('cpu_temp#id#')
+				const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
 				if (!tempEl) return
 				
 				const temp = parseFloat('#cpu_temp#')
@@ -569,18 +650,22 @@
 			} else {
 				cpuEl.innerHTML = '<span>#cpu#</span>'
 			}
-		}
-		
-		/**
-		 * Initialize custom command display (perso1-4) using data attributes
-		 * @param {HTMLElement} container - The container div with data-perso-* attributes
-		 */
-		const initPerso = (container) => {
+		} catch (e) {
+			console.error('[Monitoring AsusWRT] Error in initCPU:', e)
+		}
+	}
+	
+	/**
+	 * Initialize custom command display (perso1-4) using data attributes
+	 * @param {HTMLElement} container - The container div with data-perso-* attributes
+	 */
+	const initPerso = (container) => {
+		try {
 			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 			
 			const dataset = container.dataset
 			const persoId = dataset.persoId
-			const el = document.getElementById(`${persoId}_unite#id#`)
+			const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
 			if (!el) return
 			
 			const value = dataset.persoValue
@@ -588,15 +673,18 @@
 				el.innerHTML = '<span></span>'
 				return
 			}
-			
-			const val = parseFloat(value)
-			const low = parseFloat(dataset.persoLow)
-			const high = parseFloat(dataset.persoHigh)
-			const history = JSON.parse(dataset.persoHistory)
-			const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, false)
-			
-			el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				
+				const val = parseFloat(value)
+				const low = parseFloat(dataset.persoLow)
+				const high = parseFloat(dataset.persoHigh)
+				const history = safeJSONParse(dataset.persoHistory)
+				const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, false)
+				
+				el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+			} catch (e) {
+				console.error('[Monitoring AsusWRT] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+			}
 		}
 		
 		// ========================================
@@ -632,7 +720,7 @@
 			initCPU()
 			
 			// Custom commands - generic initialization using data attributes
-			document.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
 		}
 	})()
 	</script>
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 2e715e2a..6519d202 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -259,10 +259,30 @@
 	(() => {
 		'use strict'
 		
+		// Get reference to this specific widget container
+		const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+		if (!widgetRoot) return
+		
 		// ========================================
 		// === UTILITY FUNCTIONS ===
 		// ========================================
 		
+		/**
+		 * Safely parse JSON from data attribute
+		 * @param {string} jsonString - JSON string to parse
+		 * @param {object} fallback - Fallback value if parsing fails
+		 * @returns {object} Parsed object or fallback
+		 */
+		const safeJSONParse = (jsonString, fallback = {min: '-', avg: '-', max: '-'}) => {
+			if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+			try {
+				return JSON.parse(jsonString)
+			} catch (e) {
+				console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
+				return fallback
+			}
+		}
+		
 		/**
 		 * Calculate color style based on thresholds
 		 * @param {number} val - Current value
@@ -347,13 +367,17 @@
 		 * Initialize SSH connection status icon
 		 */
 		const initIconSSH = () => {
-			const iconSSH = document.getElementById('iconSSH#id#')
-			if (!iconSSH) return
-			
-			if ('#cnx_ssh#' === 'OK') {
-				iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
-			} else if ('#cnx_ssh#' === 'KO') {
-				iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+			try {
+				const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+				if (!iconSSH) return
+				
+				if ('#cnx_ssh#' === 'OK') {
+					iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+				} else if ('#cnx_ssh#' === 'KO') {
+					iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+				}
+			} catch (e) {
+				console.error('[Monitoring] Error in initIconSSH:', e)
 			}
 		}
 		
@@ -361,19 +385,23 @@
 		 * Initialize Cron status icon
 		 */
 		const initIconCron = () => {
-			const iconCron = document.getElementById('iconCron#id#')
-			if (!iconCron) return
-			
-			const isOn = '#cron_status#' === '1'
-			const isCustom = '#cron_status_custom#' === '1'
-			const display = '#cron_status_display#'
-			
-			const icon = isOn ? 'play-circle' : 'pause-circle'
-			const label = isOn ? 'ON' : 'OFF'
-			const customLabel = isCustom ? 'Custom' : 'Default'
-			const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-		
-			iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+			try {
+				const iconCron = widgetRoot.querySelector('#iconCron#id#')
+				if (!iconCron) return
+				
+				const isOn = '#cron_status#' === '1'
+				const isCustom = '#cron_status_custom#' === '1'
+				const display = '#cron_status_display#'
+				
+				const icon = isOn ? 'play-circle' : 'pause-circle'
+				const label = isOn ? 'ON' : 'OFF'
+				const customLabel = isCustom ? 'Custom' : 'Default'
+				const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+			
+				iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+			} catch (e) {
+				console.error('[Monitoring] Error in initIconCron:', e)
+			}
 		}
 		
 		// ========================================
@@ -384,53 +412,65 @@
 		 * Initialize Reboot button with confirmation dialog
 		 */
 		const initRebootButton = () => {
-			const rebootBtn = document.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-			rebootBtn?.addEventListener('click', () => {
-				jeeDialog.confirm({
+			try {
+				const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+				rebootBtn?.addEventListener('click', () => {
+					jeeDialog.confirm({
 					title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
 					message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
-					buttons: {
-						confirm: { label: 'Redémarrer', className: 'warning' },
-						cancel: { label: 'Annuler', className: 'info' }
-					},
-					callback: (result) => {
-						if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-					}
+						buttons: {
+							confirm: { label: 'Redémarrer', className: 'warning' },
+							cancel: { label: 'Annuler', className: 'info' }
+						},
+						callback: (result) => {
+							if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+						}
+					})
 				})
-			})
+			} catch (e) {
+				console.error('[Monitoring] Error in initRebootButton:', e)
+			}
 		}
 		
 		/**
 		 * Initialize Poweroff button with confirmation dialog
 		 */
 		const initPoweroffButton = () => {
-			const poweroffBtn = document.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
-			poweroffBtn?.addEventListener('click', () => {
-				jeeDialog.confirm({
+			try {
+				const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
+				poweroffBtn?.addEventListener('click', () => {
+					jeeDialog.confirm({
 					title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
 					message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
-					buttons: {
-						confirm: { label: 'Eteindre', className: 'danger' },
-						cancel: { label: 'Annuler', className: 'info' }
-					},
-					callback: (result) => {
-						if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
-					}
+						buttons: {
+							confirm: { label: 'Eteindre', className: 'danger' },
+							cancel: { label: 'Annuler', className: 'info' }
+						},
+						callback: (result) => {
+							if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+						}
+					})
 				})
-			})
+			} catch (e) {
+				console.error('[Monitoring] Error in initPoweroffButton:', e)
+			}
 		}
 		
 		/**
 		 * Initialize Refresh button
 		 */
 		const initRefreshButton = () => {
-			const refreshBtn = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
-			if (!refreshBtn) return
-			
-			if ('#refresh_id#' !== '') {
-				refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-			} else {
-				refreshBtn.remove()
+			try {
+				const refreshBtn = widgetRoot.querySelector('.refresh')
+				if (!refreshBtn) return
+				
+				if ('#refresh_id#' !== '') {
+					refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+				} else {
+					refreshBtn.remove()
+				}
+			} catch (e) {
+				console.error('[Monitoring] Error in initRefreshButton:', e)
 			}
 		}
 		
@@ -442,30 +482,45 @@
 		 * Initialize Uptime display
 		 */
 		const initUptime = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const uptimeEl = document.getElementById('uptime#id#')
-			if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+				if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+			} catch (e) {
+				console.error('[Monitoring] Error in initUptime:', e)
+			}
 		}
 		
 		/**
 		 * Initialize Network Infos display
 		 */
 		const initNetworkInfos = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const networkInfosEl = document.getElementById('network_infos#id#')
-			if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+				if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+			} catch (e) {
+				console.error('[Monitoring] Error in initNetworkInfos:', e)
+			}
 		}
 		
 		/**
 		 * Initialize Network Traffic display
 		 */
 		const initNetwork = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const networkEl = document.getElementById('network#id#')
-			if (networkEl) networkEl.innerHTML = '<span>#network#</span>'
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const networkEl = widgetRoot.querySelector('#network#id#')
+				if (networkEl) {
+					const history = {min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#'}
+					networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+				}
+			} catch (e) {
+				console.error('[Monitoring] Error in initNetwork:', e)
+			}
 		}
 		
 		// ========================================
@@ -476,42 +531,46 @@
 		 * Initialize Load Average displays (1mn, 5mn, 15mn)
 		 */
 		const initLoadAverage = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			// Load avg 1mn
-			const loadAvg1mn = document.getElementById('load_avg_1mn#id#')
-			if (loadAvg1mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
-					'Charge Système (1min)', '#load_avg_1mn_id#',
-					{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-					'#load_avg_1mn_tendance#'
-				)
-				loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
-			}
-			
-			// Load avg 5mn
-			const loadAvg5mn = document.getElementById('load_avg_5mn#id#')
-			if (loadAvg5mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
-					'Charge Système (5min)', '#load_avg_5mn_id#',
-					{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-					'#load_avg_5mn_tendance#'
-				)
-				loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
-			}
-			
-			// Load avg 15mn
-			const loadAvg15mn = document.getElementById('load_avg_15mn#id#')
-			if (loadAvg15mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
-					'Charge Système (15min)', '#load_avg_15mn_id#',
-					{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-					'#load_avg_15mn_tendance#'
-				)
-				loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				// Load avg 1mn
+				const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+				if (loadAvg1mn) {
+					const html = buildThresholdHTML(
+						'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+						'Charge Système (1min)', '#load_avg_1mn_id#',
+						{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+						'#load_avg_1mn_tendance#'
+					)
+					loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+				}
+				
+				// Load avg 5mn
+				const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+				if (loadAvg5mn) {
+					const html = buildThresholdHTML(
+						'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+						'Charge Système (5min)', '#load_avg_5mn_id#',
+						{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+						'#load_avg_5mn_tendance#'
+					)
+					loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+				}
+				
+				// Load avg 15mn
+				const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+				if (loadAvg15mn) {
+					const html = buildThresholdHTML(
+						'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+						'Charge Système (15min)', '#load_avg_15mn_id#',
+						{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+						'#load_avg_15mn_tendance#'
+					)
+					loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+				}
+			} catch (e) {
+				console.error('[Monitoring] Error in initLoadAverage:', e)
 			}
 		}
 		
@@ -519,69 +578,81 @@
 		 * Initialize Memory display with percentage
 		 */
 		const initMemory = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const memoryEl = document.getElementById('memory_available_percent#id#')
-			if (!memoryEl) return
-			
-			const value = '#memory_available_percent#'
-			if (value === '') {
-				memoryEl.innerHTML = '<span>#memory#</span>'
-				return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+				if (!memoryEl) return
+				
+				const value = '#memory_available_percent#'
+				if (value === '') {
+					memoryEl.innerHTML = '<span>#memory#</span>'
+					return
+				}
+				
+				memoryEl.innerHTML = buildPercentageHTML(
+					value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+					'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+					{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+					'#memory_available_percent_tendance#', '#memory# (', '%', true
+				)
+			} catch (e) {
+				console.error('[Monitoring] Error in initMemory:', e)
 			}
-			
-			memoryEl.innerHTML = buildPercentageHTML(
-				value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
-				'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
-				{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-				'#memory_available_percent_tendance#', '#memory# (', '%', true
-			)
 		}
 		
 		/**
 		 * Initialize Swap display with percentage
 		 */
 		const initSwap = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const swapEl = document.getElementById('swap_free_percent#id#')
-			if (!swapEl) return
-			
-			const value = '#swap_free_percent#'
-			if (value === '') {
-				swapEl.innerHTML = '<span></span>'
-				return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+				if (!swapEl) return
+				
+				const value = '#swap_free_percent#'
+				if (value === '') {
+					swapEl.innerHTML = '<span></span>'
+					return
+				}
+				
+				swapEl.innerHTML = buildPercentageHTML(
+					value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+					'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+					{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+					'#swap_free_percent_tendance#', '#swap# (', '%', true
+				)
+			} catch (e) {
+				console.error('[Monitoring] Error in initSwap:', e)
 			}
-			
-			swapEl.innerHTML = buildPercentageHTML(
-				value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
-				'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
-				{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-				'#swap_free_percent_tendance#', '#swap# (', '%', true
-			)
 		}
 		
 		/**
 		 * Initialize HDD display with percentage
 		 */
 		const initHDD = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const hddEl = document.getElementById('hdd#id#')
-			if (!hddEl) return
-			
-			const value = '#hdd_free_percent#'
-			if (value === '') {
-				hddEl.innerHTML = '<span></span>'
-				return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const hddEl = widgetRoot.querySelector('#hdd#id#')
+				if (!hddEl) return
+				
+				const value = '#hdd_free_percent#'
+				if (value === '') {
+					hddEl.innerHTML = '<span></span>'
+					return
+				}
+				
+				hddEl.innerHTML = buildPercentageHTML(
+					value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+					'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+					{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+					'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+				)
+			} catch (e) {
+				console.error('[Monitoring] Error in initHDD:', e)
 			}
-			
-			hddEl.innerHTML = buildPercentageHTML(
-				value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
-				'Espace Disque (% Libre)', '#hdd_free_percent_id#',
-				{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-				'#hdd_free_percent_tendance#', '#hdd# (', '%', true
-			)
 		}
 		
 		/**
@@ -589,61 +660,69 @@
 		 * @param {HTMLElement} synoContainer - The container div with data-syno-* attributes
 		 */
 		const initSynoVolume = (synoContainer) => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const dataset = synoContainer.dataset
-			if (dataset.synoDisplay !== 'block') return
-			
-			const synoId = dataset.synoId
-			const container = document.getElementById(`${synoId}#id#`)
-			if (!container) return
-			
-			container.className = 'tooltips'
-			container.style.display = dataset.synoDisplay
-			container.innerHTML = `<span title="${dataset.synoName} (% Libre)<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span> <span id="${synoId}_free_percent#id#"></span>`
-			
-			const percentEl = document.getElementById(`${synoId}_free_percent#id#`)
-			if (!percentEl) return
-			
-			const value = dataset.synoPercent
-			if (value === '') {
-				percentEl.innerHTML = '<span></span>'
-				return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const dataset = synoContainer.dataset
+				if (dataset.synoDisplay !== 'block') return
+				
+				const synoId = dataset.synoId
+				const container = widgetRoot.querySelector(`#${synoId}#id#`)
+				if (!container) return
+				
+				container.className = 'tooltips'
+				container.style.display = dataset.synoDisplay
+				container.innerHTML = `<span title="${dataset.synoName} (% Libre)<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span> <span id="${synoId}_free_percent#id#"></span>`
+				
+				const percentEl = widgetRoot.querySelector(`#${synoId}_free_percent#id#`)
+				if (!percentEl) return
+				
+				const value = dataset.synoPercent
+				if (value === '') {
+					percentEl.innerHTML = '<span></span>'
+					return
+				}
+				
+				const history = safeJSONParse(dataset.synoHistory)
+				percentEl.innerHTML = buildPercentageHTML(
+					value, dataset.synoLow, dataset.synoHigh,
+					`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
+					history,
+					dataset.synoTendance, `${dataset.synoValue} (`, '%', true
+				)
+			} catch (e) {
+				console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 			}
-			
-			const history = JSON.parse(dataset.synoHistory)
-			percentEl.innerHTML = buildPercentageHTML(
-				value, dataset.synoLow, dataset.synoHigh,
-				`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
-				history,
-				dataset.synoTendance, `${dataset.synoValue} (`, '%', true
-			)
 		}
 		
 		/**
 		 * Initialize CPU display with optional temperature
 		 */
 		const initCPU = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const cpuEl = document.getElementById('cpu#id#')
-			if (!cpuEl) return
-			
-			if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
-				cpuEl.innerHTML = '<span>#cpu# </span>'
-				
-				const tempEl = document.getElementById('cpu_temp#id#')
-				if (!tempEl) return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 				
-				const temp = parseFloat('#cpu_temp#')
-				const low = parseFloat('#cpu_temp_colorlow#')
-				const high = parseFloat('#cpu_temp_colorhigh#')
-				const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
-				const color = getColorStyle(temp, low, high, false)
+				const cpuEl = widgetRoot.querySelector('#cpu#id#')
+				if (!cpuEl) return
 				
-				tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
-			} else {
-				cpuEl.innerHTML = '<span>#cpu#</span>'
+				if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+					cpuEl.innerHTML = '<span>#cpu# </span>'
+					
+					const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+					if (!tempEl) return
+					
+					const temp = parseFloat('#cpu_temp#')
+					const low = parseFloat('#cpu_temp_colorlow#')
+					const high = parseFloat('#cpu_temp_colorhigh#')
+					const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+					const color = getColorStyle(temp, low, high, false)
+					
+					tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+				} else {
+					cpuEl.innerHTML = '<span>#cpu#</span>'
+				}
+			} catch (e) {
+				console.error('[Monitoring] Error in initCPU:', e)
 			}
 		}
 		
@@ -652,27 +731,31 @@
 		 * @param {HTMLElement} container - The container div with data-perso-* attributes
 		 */
 		const initPerso = (container) => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const dataset = container.dataset
-			const persoId = dataset.persoId
-			const el = document.getElementById(`${persoId}_unite#id#`)
-			if (!el) return
-			
-			const value = dataset.persoValue
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+			try {
+				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+				
+				const dataset = container.dataset
+				const persoId = dataset.persoId
+				const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+				if (!el) return
+				
+				const value = dataset.persoValue
+				if (value === '') {
+					el.innerHTML = '<span></span>'
+					return
+				}
+				
+				const val = parseFloat(value)
+				const low = parseFloat(dataset.persoLow)
+				const high = parseFloat(dataset.persoHigh)
+				const history = safeJSONParse(dataset.persoHistory)
+				const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, false)
+				
+				el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+			} catch (e) {
+				console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
 			}
-			
-			const val = parseFloat(value)
-			const low = parseFloat(dataset.persoLow)
-			const high = parseFloat(dataset.persoHigh)
-			const history = JSON.parse(dataset.persoHistory)
-			const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, false)
-			
-			el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
 		}
 		
 		// ========================================
@@ -702,13 +785,13 @@
 			initHDD()
 			
 			// Synology volumes - generic initialization using data attributes
-			document.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
 			
 			// CPU with temperature
 			initCPU()
 			
 			// Custom commands - generic initialization using data attributes
-			document.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
 		}
 	})()
 	</script>

From cca06594b8a351e1cd0d7df886f3cb40daff7e56 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:31:16 +0100
Subject: [PATCH 02/24] update templates

---
 core/template/dashboard/AsusWRT.html    | 1142 ++++++++++-----------
 core/template/dashboard/Monitoring.html | 1244 +++++++++++------------
 2 files changed, 1179 insertions(+), 1207 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index 7e6931f4..331847a0 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -3,6 +3,7 @@
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
 			font-size: 12px !important;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
 			display: none !important;
 		}
@@ -21,6 +22,7 @@
 			align-items: center;
 			box-sizing: border-box;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
 			padding-right: 3px;
 		}
@@ -38,7 +40,7 @@
 			padding-right: 5px;
 			box-sizing: border-box;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
 			overflow: hidden !important;
 			text-overflow: ellipsis;
@@ -59,7 +61,7 @@
 			padding-right: 5px;
 			color: inherit !important;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
 			display: block;
 			text-align: left;
@@ -92,636 +94,636 @@
 	</div>
 	<div class="monitor-cmds">
 		<div class="tooltips" style="display: #distri_name_display#;">
-			<span title="Distribution AsusWRT<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span
+				title="Distribution AsusWRT<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
 			<span>#distri_name#</span>
 		</div>
 		<div class="tooltips" style="display: #uptime_display#;">
-			<span title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span
+				title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
 			<span id="uptime#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #load_avg_display#;">
-			<span title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span
+				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
 			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #memory_display#;">
-			<span title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span
+				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
 			<span id="memory_available_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #swap_display#;">
-			<span title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span
+				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
 			<span id="swap_free_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_infos_display#;">
-			<span title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span
+				title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
 			<span id="network_infos#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_display#;">
-			<span title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
 			<span id="network#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_clients_display#;">
-			<span title="Infos Clients<br><i>Date de valeur : #asus_clients_value#<br>Date de collecte : #asus_clients_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#asus_clients_icon#</span>
+			<span
+				title="Infos Clients<br><i>Date de valeur : #asus_clients_value#<br>Date de collecte : #asus_clients_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_clients_icon#</span>
 			<span id="asus_clients#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_wan0_ip_display#;">
-			<span title="Infos Internet (WAN)<br><i>Date de valeur : #asus_wan0_ip_value#<br>Date de collecte : #asus_wan0_ip_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#asus_wan0_ip_icon#</span>
+			<span
+				title="Infos Internet (WAN)<br><i>Date de valeur : #asus_wan0_ip_value#<br>Date de collecte : #asus_wan0_ip_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_wan0_ip_icon#</span>
 			<span id="asus_wan0_ip#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_wifi_temp_display#;">
-			<span title="Infos Températures WiFi<br><i>Date de valeur : #asus_wifi_temp_value#<br>Date de collecte : #asus_wifi_temp_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#asus_wifi_temp_icon#</span>
+			<span
+				title="Infos Températures WiFi<br><i>Date de valeur : #asus_wifi_temp_value#<br>Date de collecte : #asus_wifi_temp_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_wifi_temp_icon#</span>
 			<span id="asus_wifi_temp#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #hdd_display#;">
-			<span title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span
+				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
-			<span title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span
+				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
 			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso1_display#;"
-		     data-perso-id="perso1"
-		     data-perso-value="#perso1#"
-		     data-perso-name="#perso1_name#"
-		     data-perso-low="#perso1_colorlow#"
-		     data-perso-high="#perso1_colorhigh#"
-		     data-perso-cmd-id="#perso1_id#"
-		     data-perso-unite="#perso1_unite#"
-		     data-perso-tendance="#perso1_tendance#"
-		     data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
+			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
 			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
 			<span id="perso1_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso2_display#;"
-		     data-perso-id="perso2"
-		     data-perso-value="#perso2#"
-		     data-perso-name="#perso2_name#"
-		     data-perso-low="#perso2_colorlow#"
-		     data-perso-high="#perso2_colorhigh#"
-		     data-perso-cmd-id="#perso2_id#"
-		     data-perso-unite="#perso2_unite#"
-		     data-perso-tendance="#perso2_tendance#"
-		     data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
+			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
 			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
 			<span id="perso2_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso3_display#;"
-		     data-perso-id="perso3"
-		     data-perso-value="#perso3#"
-		     data-perso-name="#perso3_name#"
-		     data-perso-low="#perso3_colorlow#"
-		     data-perso-high="#perso3_colorhigh#"
-		     data-perso-cmd-id="#perso3_id#"
-		     data-perso-unite="#perso3_unite#"
-		     data-perso-tendance="#perso3_tendance#"
-		     data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
+			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
 			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
 			<span id="perso3_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso4_display#;"
-		     data-perso-id="perso4"
-		     data-perso-value="#perso4#"
-		     data-perso-name="#perso4_name#"
-		     data-perso-low="#perso4_colorlow#"
-		     data-perso-high="#perso4_colorhigh#"
-		     data-perso-cmd-id="#perso4_id#"
-		     data-perso-unite="#perso4_unite#"
-		     data-perso-tendance="#perso4_tendance#"
-		     data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
+			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
 			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
 			<span id="perso4_unite#id#"></span>
 		</div>
 	</div>
 	#divGraphInfo#
 	<script>
-	(() => {
-		'use strict'
-		
-		// Get reference to this specific widget container
-		const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
-		if (!widgetRoot) return
-		
-		/**
-		 * Safely parse JSON from data attribute
-		 * @param {string} jsonString - JSON string to parse
-		 * @param {object} fallback - Fallback value if parsing fails
-		 * @returns {object} Parsed object or fallback
-		 */
-		const safeJSONParse = (jsonString, fallback = {min: '-', avg: '-', max: '-'}) => {
-			if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
-			try {
-				return JSON.parse(jsonString)
-			} catch (e) {
-				console.warn('[Monitoring AsusWRT] JSON parse error:', e, 'Input:', jsonString)
-				return fallback
+		(() => {
+			'use strict'
+
+			// Get reference to this specific widget container
+			const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			/**
+			 * Safely parse JSON from data attribute
+			 * @param {string} jsonString - JSON string to parse
+			 * @param {object} fallback - Fallback value if parsing fails
+			 * @returns {object} Parsed object or fallback
+			 */
+			const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
+				if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+				try {
+					return JSON.parse(jsonString)
+				} catch (e) {
+					console.warn('[Monitoring AsusWRT] JSON parse error:', e, 'Input:', jsonString)
+					return fallback
+				}
 			}
-		}
-		
-		// ========================================
-		// === UTILITY FUNCTIONS ===
-		// ========================================
-		
-		/**
-		 * Get color style based on value and thresholds
-		 * @param {number} val - Numeric value to evaluate
-		 * @param {number} low - Low threshold
-		 * @param {number} high - High threshold
-		 * @param {boolean} reversed - If true, higher values are better (green)
-		 * @returns {string} Inline style string for color
-		 */
-		const getColorStyle = (val, low, high, reversed = false) => {
-			if (reversed) {
-				// Reversed: higher is better (e.g., % free)
-				if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-			} else {
-				// Normal: lower is better (e.g., temperature, load)
-				if (val < low) return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Get color style based on value and thresholds
+			 * @param {number} val - Numeric value to evaluate
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Inline style string for color
+			 */
+			const getColorStyle = (val, low, high, reversed = false) => {
+				if (reversed) {
+					// Reversed: higher is better (e.g., % free)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal: lower is better (e.g., temperature, load)
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
 			}
-			return ''
-		}
-		
-		/**
-		 * Build HTML for threshold-based value with color
-		 * @param {string} value - Value to display
-		 * @param {string} lowThreshold - Low threshold value
-		 * @param {string} highThreshold - High threshold value
-		 * @param {string} label - Label for tooltip
-		 * @param {string} cmdId - Command ID
-		 * @param {object} history - History stats {min, avg, max}
-		 * @param {string} tendance - Trend indicator
-		 * @param {boolean} reversed - If true, higher values are better
-		 * @returns {string} HTML string
-		 */
-		const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-			if (value === '') return '<span></span>'
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, reversed)
-			
-			return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
-		}
-		
-		/**
-		 * Build HTML for percentage-based value with color and unit
-		 * @param {string} value - Value to display
-		 * @param {string} lowThreshold - Low threshold value
-		 * @param {string} highThreshold - High threshold value
-		 * @param {string} label - Label for tooltip
-		 * @param {string} cmdId - Command ID
-		 * @param {object} history - History stats {min, avg, max}
-		 * @param {string} tendance - Trend indicator
-		 * @param {string} prefix - Prefix text (e.g., "#memory# (")
-		 * @param {string} unit - Unit (e.g., "%")
-		 * @param {boolean} reversed - If true, higher values are better
-		 * @returns {string} HTML string
-		 */
-		const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-			if (value === '') return prefix ? '<span></span>' : ''
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, reversed)
-			
-			const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-			const unitSpan = `<span>${unit}${tendance}</span>`
-			
-			return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
-		}
-		
-		// ========================================
-		// === ICON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize SSH connection status icon
-		 */
-		const initIconSSH = () => {
-		try {
-			const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
-			if (!iconSSH) return
-			
-			if ('#cnx_ssh#' === 'OK') {
-				iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
-			} else if ('#cnx_ssh#' === 'KO') {
-				iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for threshold-based value with color
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
+				if (value === '') return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
 			}
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initIconSSH:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Cron status icon
-	 */
-	const initIconCron = () => {
-		try {
-			const iconCron = widgetRoot.querySelector('#iconCron#id#')
-			if (!iconCron) return
-			
-			const isOn = '#cron_status#' === '1'
-			const isCustom = '#cron_status_custom#' === '1'
-			const display = '#cron_status_display#'
-			
-			const icon = isOn ? 'play-circle' : 'pause-circle'
-			const label = isOn ? 'ON' : 'OFF'
-			const customLabel = isCustom ? ' (Custom)' : ' (Default)'
-			const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-		
-			iconCron.innerHTML = `<i title="Cron ${label}${customLabel}" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initIconCron:', e)
-		}
-	}
-	
-	/**
-	 * Initialize firmware check icon
-	 */
-	const initIconCheckFirmware = () => {
-		try {
-			const el = widgetRoot.querySelector('#iconCheckFirmware#id#')
-			if (!el) return
-			
-			if ('#asus_fw_check#' === '1') {
-				el.innerHTML = '<i title="Check du Firmware :: 1" class="cmd monitor-btn fas fa-bell tooltips" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
-			} else if ('#asus_fw_check#' === '0') {
-				el.innerHTML = '<i title="Check du Firmware :: 0" class="cmd monitor-btn fas fa-bell-slash tooltips" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for percentage-based value with color and unit
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
+			 * @param {string} unit - Unit (e.g., "%")
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
+				if (value === '') return prefix ? '<span></span>' : ''
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+
+				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
+				const unitSpan = `<span>${unit}${tendance}</span>`
+
+				return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
 			}
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initIconCheckFirmware:', e)
-		}
-	}
-	
-	// ========================================
-	// === BUTTON HANDLERS ===
-	// ========================================
-	
-	/**
-	 * Initialize Reboot button with confirmation dialog
-	 */
-		const initRebootButton = () => {
-		try {
-			const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-			rebootBtn?.addEventListener('click', () => {
-				jeeDialog.confirm({
-					title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
-					message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
-					buttons: {
-						confirm: { label: 'Redémarrer', className: 'warning' },
-						cancel: { label: 'Annuler', className: 'info' }
-					},
-					callback: result => result && jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-				})
-			})
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initRebootButton:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Refresh button
-	 */
-	const initRefreshButton = () => {
-		try {
-			const refreshBtn = widgetRoot.querySelector('.refresh')
-			if (!refreshBtn) return
-			
-			if ('#refresh_id#' !== '') {
-				refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-			} else {
-				refreshBtn.remove()
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconSSH:', e)
+				}
 			}
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initRefreshButton:', e)
-		}
-	}
-	
-	// ========================================
-	// === VALUE DISPLAYS - Simple ===
-	// ========================================
-	
-	/**
-	 * Initialize Uptime display
-	 */
-	const initUptime = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-			if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initUptime:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Network Infos display
-	 */
-	const initNetworkInfos = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-			if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Network display
-	 */
-	const initNetwork = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const networkEl = widgetRoot.querySelector('#network#id#')
-			if (networkEl) networkEl.innerHTML = '<span>#network#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Asus Clients display
-	 */
-	const initAsusClients = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = widgetRoot.querySelector('#asus_clients#id#')
-			if (el) el.innerHTML = '<span>#asus_clients#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Asus WAN0 IP display
-	 */
-	const initAsusWan0IP = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
-			if (el) el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initAsusWan0IP:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Asus WiFi Temperature display
-	 */
-	const initAsusWifiTemp = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
-			if (el) el.innerHTML = '<span>#asus_wifi_temp#</span>'
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initAsusWifiTemp:', e)
-		}
-	}
-	
-	// ========================================
-	// === VALUE DISPLAYS - With Thresholds ===
-	// ========================================
-	
-	/**
-	 * Initialize Load Average displays (1mn, 5mn, 15mn)
-	 */
-	const initLoadAverage = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			// Load avg 1mn
-			const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
-			if (loadAvg1mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
-					'Charge Système (1min)', '#load_avg_1mn_id#',
-					{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-					'#load_avg_1mn_tendance#'
-				)
-				loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					iconCron.innerHTML = `<i title="Cron ${label}${customLabel}" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconCron:', e)
+				}
 			}
-			
-			// Load avg 5mn
-			const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-			if (loadAvg5mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
-					'Charge Système (5min)', '#load_avg_5mn_id#',
-					{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-					'#load_avg_5mn_tendance#'
-				)
-				loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+
+			/**
+			 * Initialize firmware check icon
+			 */
+			const initIconCheckFirmware = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconCheckFirmware#id#')
+					if (!el) return
+
+					if ('#asus_fw_check#' === '1') {
+						el.innerHTML = '<i title="Check du Firmware :: 1" class="cmd monitor-btn fas fa-bell tooltips" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
+					} else if ('#asus_fw_check#' === '0') {
+						el.innerHTML = '<i title="Check du Firmware :: 0" class="cmd monitor-btn fas fa-bell-slash tooltips" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconCheckFirmware:', e)
+				}
 			}
-			
-			// Load avg 15mn
-			const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-			if (loadAvg15mn) {
-				const html = buildThresholdHTML(
-					'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
-					'Charge Système (15min)', '#load_avg_15mn_id#',
-					{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-					'#load_avg_15mn_tendance#'
-				)
-				loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with confirmation dialog
+			 */
+			const initRebootButton = () => {
+				try {
+					const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+					rebootBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
+							message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Redémarrer', className: 'warning' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: result => result && jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+						})
+					})
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initRebootButton:', e)
+				}
 			}
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Memory display with percentage
-	 */
-	const initMemory = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
-			if (!memoryEl) return
-			
-			const value = '#memory_available_percent#'
-			if (value === '') {
-				memoryEl.innerHTML = '<span>#memory#</span>'
-				return
+
+			/**
+			 * Initialize Refresh button
+			 */
+			const initRefreshButton = () => {
+				try {
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
+
+					if ('#refresh_id#' !== '') {
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						refreshBtn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initRefreshButton:', e)
+				}
 			}
-			
-			memoryEl.innerHTML = buildPercentageHTML(
-				value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
-				'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
-				{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-				'#memory_available_percent_tendance#', '#memory# (', '%', true
-			)
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initMemory:', e)
-		}
-	}
-	
-	/**
-	 * Initialize Swap display with percentage
-	 */
-	const initSwap = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
-			if (!swapEl) return
-			
-			const value = '#swap_free_percent#'
-			if (value === '') {
-				swapEl.innerHTML = '<span></span>'
-				return
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initUptime:', e)
+				}
 			}
-			
-			swapEl.innerHTML = buildPercentageHTML(
-				value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
-				'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
-				{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-				'#swap_free_percent_tendance#', '#swap# (', '%', true
-			)
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initSwap:', e)
-		}
-	}
-	
-	/**
-	 * Initialize HDD display with percentage
-	 */
-	const initHDD = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const hddEl = widgetRoot.querySelector('#hdd#id#')
-			if (!hddEl) return
-			
-			const value = '#hdd_free_percent#'
-			if (value === '') {
-				hddEl.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
+				}
 			}
-			
-			hddEl.innerHTML = buildPercentageHTML(
-				value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
-				'Espace Disque (% Libre)', '#hdd_free_percent_id#',
-				{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-				'#hdd_free_percent_tendance#', '#hdd# (', '%', true
-			)
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initHDD:', e)
-		}
-	}
-	
-	/**
-	 * Initialize CPU display with optional temperature
-	 */
-	const initCPU = () => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const cpuEl = widgetRoot.querySelector('#cpu#id#')
-			if (!cpuEl) return
-			
-			if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
-				cpuEl.innerHTML = '<span>#cpu# </span>'
-				
-				const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
-				if (!tempEl) return
-				
-				const temp = parseFloat('#cpu_temp#')
-				const low = parseFloat('#cpu_temp_colorlow#')
-				const high = parseFloat('#cpu_temp_colorhigh#')
-				const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
-				const color = getColorStyle(temp, low, high, false)
-				
-				tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
-			} else {
-				cpuEl.innerHTML = '<span>#cpu#</span>'
+
+			/**
+			 * Initialize Network display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (networkEl) networkEl.innerHTML = '<span>#network#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
+				}
 			}
-		} catch (e) {
-			console.error('[Monitoring AsusWRT] Error in initCPU:', e)
-		}
-	}
-	
-	/**
-	 * Initialize custom command display (perso1-4) using data attributes
-	 * @param {HTMLElement} container - The container div with data-perso-* attributes
-	 */
-	const initPerso = (container) => {
-		try {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const dataset = container.dataset
-			const persoId = dataset.persoId
-			const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
-			if (!el) return
-			
-			const value = dataset.persoValue
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Asus Clients display
+			 */
+			const initAsusClients = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_clients#id#')
+					if (el) el.innerHTML = '<span>#asus_clients#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
+				}
 			}
-				
-				const val = parseFloat(value)
-				const low = parseFloat(dataset.persoLow)
-				const high = parseFloat(dataset.persoHigh)
-				const history = safeJSONParse(dataset.persoHistory)
-				const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-				const color = getColorStyle(val, low, high, false)
-				
-				el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
-			} catch (e) {
-				console.error('[Monitoring AsusWRT] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+
+			/**
+			 * Initialize Asus WAN0 IP display
+			 */
+			const initAsusWan0IP = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
+					if (el) el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusWan0IP:', e)
+				}
 			}
-		}
-		
-		// ========================================
-		// === INITIALIZATION ===
-		// ========================================
-		
-		// Only initialize if template is properly instantiated
-		if ('#uid#') {
-			// Icon handlers
-			initIconSSH()
-			initIconCron()
-			initIconCheckFirmware()
-			
-			// Button handlers
-			initRebootButton()
-			initRefreshButton()
-			
-			// Simple value displays
-			initUptime()
-			initNetworkInfos()
-			initNetwork()
-			initAsusClients()
-			initAsusWan0IP()
-			initAsusWifiTemp()
-			
-			// Value displays with thresholds
-			initLoadAverage()
-			initMemory()
-			initSwap()
-			initHDD()
-			
-			// CPU with temperature
-			initCPU()
-			
-			// Custom commands - generic initialization using data attributes
-			widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
-		}
-	})()
+
+			/**
+			 * Initialize Asus WiFi Temperature display
+			 */
+			const initAsusWifiTemp = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
+					if (el) el.innerHTML = '<span>#asus_wifi_temp#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusWifiTemp:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With Thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+							'Charge Système (1min)', '#load_avg_1mn_id#',
+							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+							'#load_avg_1mn_tendance#'
+						)
+						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+							'Charge Système (5min)', '#load_avg_5mn_id#',
+							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+							'#load_avg_5mn_tendance#'
+						)
+						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+							'Charge Système (15min)', '#load_avg_15mn_id#',
+							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+							'#load_avg_15mn_tendance#'
+						)
+						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
+				}
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						memoryEl.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					memoryEl.innerHTML = buildPercentageHTML(
+						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+						'#memory_available_percent_tendance#', '#memory# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initMemory:', e)
+				}
+			}
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						swapEl.innerHTML = '<span></span>'
+						return
+					}
+
+					swapEl.innerHTML = buildPercentageHTML(
+						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+						'#swap_free_percent_tendance#', '#swap# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initSwap:', e)
+				}
+			}
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						hddEl.innerHTML = '<span></span>'
+						return
+					}
+
+					hddEl.innerHTML = buildPercentageHTML(
+						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initHDD:', e)
+				}
+			}
+
+			/**
+			 * Initialize CPU display with optional temperature
+			 */
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					if (!cpuEl) return
+
+					if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+						if (!tempEl) return
+
+						const temp = parseFloat('#cpu_temp#')
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+						const color = getColorStyle(temp, low, high, false)
+
+						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const history = safeJSONParse(dataset.persoHistory)
+					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+					const color = getColorStyle(val, low, high, false)
+
+					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+				initIconCheckFirmware()
+
+				// Button handlers
+				initRebootButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+				initAsusClients()
+				initAsusWan0IP()
+				initAsusWifiTemp()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// CPU with temperature
+				initCPU()
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
 	</script>
-</div>
+</div>
\ No newline at end of file
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 6519d202..5f003c41 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -3,6 +3,7 @@
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
 			font-size: 12px !important;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
 			display: none !important;
 		}
@@ -21,6 +22,7 @@
 			align-items: center;
 			box-sizing: border-box;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
 			padding-right: 3px;
 		}
@@ -38,7 +40,7 @@
 			padding-right: 5px;
 			box-sizing: border-box;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
 			overflow: hidden !important;
 			text-overflow: ellipsis;
@@ -59,7 +61,7 @@
 			padding-right: 5px;
 			color: inherit !important;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
 			display: block;
 			text-align: left;
@@ -75,10 +77,10 @@
 		<div class="monitor-name-left">
 			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
 			<span id="iconCron#id#" class="cmd monitor-btn"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement"  data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
 				<i class="cmd monitor-btn fas fa-redo"></i>
 			</span>
-			<span class="cmd action poweroff cursor" title="Eteindre l'équipement"  data-type="action" data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
 				<i class="cmd monitor-btn fas fa-power-off"></i>
 			</span>
 		</div>
@@ -86,7 +88,7 @@
 			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
 			<a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
 		</div>
-		<div class="monitor-name-right">	
+		<div class="monitor-name-right">
 			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
 				<i class="fas fa-sync"></i>
 			</span>
@@ -94,705 +96,673 @@
 	</div>
 	<div class="monitor-cmds">
 		<div class="tooltips" style="display: #distri_name_display#;">
-			<span title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span
+				title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
 			<span>#distri_name#</span>
 		</div>
 		<div class="tooltips" style="display: #uptime_display#;">
-			<span title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span
+				title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
 			<span id="uptime#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #load_avg_display#;">
-			<span title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span
+				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
 			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #memory_display#;">
-			<span title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span
+				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
 			<span id="memory_available_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #swap_display#;">
-			<span title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span
+				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
 			<span id="swap_free_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_infos_display#;">
-			<span title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span
+				title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
 			<span id="network_infos#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_display#;">
-			<span title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
 			<span id="network#id#"></span>
 		</div>
 		<!-- Cartes réseau supplémentaires -->
 		#multi_network_cards#
 		<div class="tooltips" style="display: #hdd_display#;">
-			<span title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span
+				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#"
-		     data-syno-id="syno_hddv2"
-		     data-syno-name="Syno Volume 2"
-		     data-syno-display="#syno_hddv2_display#"
-		     data-syno-value="#syno_hddv2#"
-		     data-syno-collect="#syno_hddv2_collect#"
-		     data-syno-icon="#syno_hddv2_icon#"
-		     data-syno-percent="#syno_hddv2_free_percent#"
-		     data-syno-low="#syno_hddv2_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv2_free_percent_colorhigh#"
-		     data-syno-cmd-id="#syno_hddv2_free_percent_id#"
-		     data-syno-tendance="#syno_hddv2_free_percent_tendance#"
-		     data-syno-date-value="#syno_hddv2_value#"
-		     data-syno-history='{"min":"#syno_hddv2_free_percent_minHistory#","avg":"#syno_hddv2_free_percent_averageHistory#","max":"#syno_hddv2_free_percent_maxHistory#"}'></div>
-		<div id="syno_hddv3#id#"
-		     data-syno-id="syno_hddv3"
-		     data-syno-name="Syno Volume 3"
-		     data-syno-display="#syno_hddv3_display#"
-		     data-syno-value="#syno_hddv3#"
-		     data-syno-collect="#syno_hddv3_collect#"
-		     data-syno-icon="#syno_hddv3_icon#"
-		     data-syno-percent="#syno_hddv3_free_percent#"
-		     data-syno-low="#syno_hddv3_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv3_free_percent_colorhigh#"
-		     data-syno-cmd-id="#syno_hddv3_free_percent_id#"
-		     data-syno-tendance="#syno_hddv3_free_percent_tendance#"
-		     data-syno-date-value="#syno_hddv3_value#"
-		     data-syno-history='{"min":"#syno_hddv3_free_percent_minHistory#","avg":"#syno_hddv3_free_percent_averageHistory#","max":"#syno_hddv3_free_percent_maxHistory#"}'></div>
-		<div id="syno_hddv4#id#"
-		     data-syno-id="syno_hddv4"
-		     data-syno-name="Syno Volume 4"
-		     data-syno-display="#syno_hddv4_display#"
-		     data-syno-value="#syno_hddv4#"
-		     data-syno-collect="#syno_hddv4_collect#"
-		     data-syno-icon="#syno_hddv4_icon#"
-		     data-syno-percent="#syno_hddv4_free_percent#"
-		     data-syno-low="#syno_hddv4_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv4_free_percent_colorhigh#"
-		     data-syno-cmd-id="#syno_hddv4_free_percent_id#"
-		     data-syno-tendance="#syno_hddv4_free_percent_tendance#"
-		     data-syno-date-value="#syno_hddv4_value#"
-		     data-syno-history='{"min":"#syno_hddv4_free_percent_minHistory#","avg":"#syno_hddv4_free_percent_averageHistory#","max":"#syno_hddv4_free_percent_maxHistory#"}'></div>
-		<div id="syno_hddusb#id#"
-		     data-syno-id="syno_hddusb"
-		     data-syno-name="Syno Volume USB"
-		     data-syno-display="#syno_hddusb_display#"
-		     data-syno-value="#syno_hddusb#"
-		     data-syno-collect="#syno_hddusb_collect#"
-		     data-syno-icon="#syno_hddusb_icon#"
-		     data-syno-percent="#syno_hddusb_free_percent#"
-		     data-syno-low="#syno_hddusb_free_percent_colorlow#"
-		     data-syno-high="#syno_hddusb_free_percent_colorhigh#"
-		     data-syno-cmd-id="#syno_hddusb_free_percent_id#"
-		     data-syno-tendance="#syno_hddusb_free_percent_tendance#"
-		     data-syno-date-value="#syno_hddusb_value#"
-		     data-syno-history='{"min":"#syno_hddusb_free_percent_minHistory#","avg":"#syno_hddusb_free_percent_averageHistory#","max":"#syno_hddusb_free_percent_maxHistory#"}'></div>
-		<div id="syno_hddesata#id#"
-		     data-syno-id="syno_hddesata"
-		     data-syno-name="Syno Volume eSATA"
-		     data-syno-display="#syno_hddesata_display#"
-		     data-syno-value="#syno_hddesata#"
-		     data-syno-collect="#syno_hddesata_collect#"
-		     data-syno-icon="#syno_hddesata_icon#"
-		     data-syno-percent="#syno_hddesata_free_percent#"
-		     data-syno-low="#syno_hddesata_free_percent_colorlow#"
-		     data-syno-high="#syno_hddesata_free_percent_colorhigh#"
-		     data-syno-cmd-id="#syno_hddesata_free_percent_id#"
-		     data-syno-tendance="#syno_hddesata_free_percent_tendance#"
-		     data-syno-date-value="#syno_hddesata_value#"
-		     data-syno-history='{"min":"#syno_hddesata_free_percent_minHistory#","avg":"#syno_hddesata_free_percent_averageHistory#","max":"#syno_hddesata_free_percent_maxHistory#"}'></div>
+		<div id="syno_hddv2#id#" data-syno-id="syno_hddv2" data-syno-name="Syno Volume 2"
+			data-syno-display="#syno_hddv2_display#" data-syno-value="#syno_hddv2#"
+			data-syno-collect="#syno_hddv2_collect#" data-syno-icon="#syno_hddv2_icon#"
+			data-syno-percent="#syno_hddv2_free_percent#" data-syno-low="#syno_hddv2_free_percent_colorlow#"
+			data-syno-high="#syno_hddv2_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv2_free_percent_id#"
+			data-syno-tendance="#syno_hddv2_free_percent_tendance#" data-syno-date-value="#syno_hddv2_value#"
+			data-syno-history='{"min":"#syno_hddv2_free_percent_minHistory#","avg":"#syno_hddv2_free_percent_averageHistory#","max":"#syno_hddv2_free_percent_maxHistory#"}'>
+		</div>
+		<div id="syno_hddv3#id#" data-syno-id="syno_hddv3" data-syno-name="Syno Volume 3"
+			data-syno-display="#syno_hddv3_display#" data-syno-value="#syno_hddv3#"
+			data-syno-collect="#syno_hddv3_collect#" data-syno-icon="#syno_hddv3_icon#"
+			data-syno-percent="#syno_hddv3_free_percent#" data-syno-low="#syno_hddv3_free_percent_colorlow#"
+			data-syno-high="#syno_hddv3_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv3_free_percent_id#"
+			data-syno-tendance="#syno_hddv3_free_percent_tendance#" data-syno-date-value="#syno_hddv3_value#"
+			data-syno-history='{"min":"#syno_hddv3_free_percent_minHistory#","avg":"#syno_hddv3_free_percent_averageHistory#","max":"#syno_hddv3_free_percent_maxHistory#"}'>
+		</div>
+		<div id="syno_hddv4#id#" data-syno-id="syno_hddv4" data-syno-name="Syno Volume 4"
+			data-syno-display="#syno_hddv4_display#" data-syno-value="#syno_hddv4#"
+			data-syno-collect="#syno_hddv4_collect#" data-syno-icon="#syno_hddv4_icon#"
+			data-syno-percent="#syno_hddv4_free_percent#" data-syno-low="#syno_hddv4_free_percent_colorlow#"
+			data-syno-high="#syno_hddv4_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv4_free_percent_id#"
+			data-syno-tendance="#syno_hddv4_free_percent_tendance#" data-syno-date-value="#syno_hddv4_value#"
+			data-syno-history='{"min":"#syno_hddv4_free_percent_minHistory#","avg":"#syno_hddv4_free_percent_averageHistory#","max":"#syno_hddv4_free_percent_maxHistory#"}'>
+		</div>
+		<div id="syno_hddusb#id#" data-syno-id="syno_hddusb" data-syno-name="Syno Volume USB"
+			data-syno-display="#syno_hddusb_display#" data-syno-value="#syno_hddusb#"
+			data-syno-collect="#syno_hddusb_collect#" data-syno-icon="#syno_hddusb_icon#"
+			data-syno-percent="#syno_hddusb_free_percent#" data-syno-low="#syno_hddusb_free_percent_colorlow#"
+			data-syno-high="#syno_hddusb_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddusb_free_percent_id#"
+			data-syno-tendance="#syno_hddusb_free_percent_tendance#" data-syno-date-value="#syno_hddusb_value#"
+			data-syno-history='{"min":"#syno_hddusb_free_percent_minHistory#","avg":"#syno_hddusb_free_percent_averageHistory#","max":"#syno_hddusb_free_percent_maxHistory#"}'>
+		</div>
+		<div id="syno_hddesata#id#" data-syno-id="syno_hddesata" data-syno-name="Syno Volume eSATA"
+			data-syno-display="#syno_hddesata_display#" data-syno-value="#syno_hddesata#"
+			data-syno-collect="#syno_hddesata_collect#" data-syno-icon="#syno_hddesata_icon#"
+			data-syno-percent="#syno_hddesata_free_percent#" data-syno-low="#syno_hddesata_free_percent_colorlow#"
+			data-syno-high="#syno_hddesata_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddesata_free_percent_id#"
+			data-syno-tendance="#syno_hddesata_free_percent_tendance#" data-syno-date-value="#syno_hddesata_value#"
+			data-syno-history='{"min":"#syno_hddesata_free_percent_minHistory#","avg":"#syno_hddesata_free_percent_averageHistory#","max":"#syno_hddesata_free_percent_maxHistory#"}'>
+		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
-			<span title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span
+				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
 			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso1_display#;"
-		     data-perso-id="perso1"
-		     data-perso-value="#perso1#"
-		     data-perso-name="#perso1_name#"
-		     data-perso-low="#perso1_colorlow#"
-		     data-perso-high="#perso1_colorhigh#"
-		     data-perso-cmd-id="#perso1_id#"
-		     data-perso-unite="#perso1_unite#"
-		     data-perso-tendance="#perso1_tendance#"
-		     data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
-			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
+			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
+			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
 			<span id="perso1_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso2_display#;"
-		     data-perso-id="perso2"
-		     data-perso-value="#perso2#"
-		     data-perso-name="#perso2_name#"
-		     data-perso-low="#perso2_colorlow#"
-		     data-perso-high="#perso2_colorhigh#"
-		     data-perso-cmd-id="#perso2_id#"
-		     data-perso-unite="#perso2_unite#"
-		     data-perso-tendance="#perso2_tendance#"
-		     data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
-			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
+			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
+			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
 			<span id="perso2_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso3_display#;"
-		     data-perso-id="perso3"
-		     data-perso-value="#perso3#"
-		     data-perso-name="#perso3_name#"
-		     data-perso-low="#perso3_colorlow#"
-		     data-perso-high="#perso3_colorhigh#"
-		     data-perso-cmd-id="#perso3_id#"
-		     data-perso-unite="#perso3_unite#"
-		     data-perso-tendance="#perso3_tendance#"
-		     data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
-			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
+			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
+			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
 			<span id="perso3_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso4_display#;"
-		     data-perso-id="perso4"
-		     data-perso-value="#perso4#"
-		     data-perso-name="#perso4_name#"
-		     data-perso-low="#perso4_colorlow#"
-		     data-perso-high="#perso4_colorhigh#"
-		     data-perso-cmd-id="#perso4_id#"
-		     data-perso-unite="#perso4_unite#"
-		     data-perso-tendance="#perso4_tendance#"
-		     data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
-			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
+			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
+			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
 			<span id="perso4_unite#id#"></span>
 		</div>
 	</div>
 	#divGraphInfo#
 	<script>
-	(() => {
-		'use strict'
-		
-		// Get reference to this specific widget container
-		const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
-		if (!widgetRoot) return
-		
-		// ========================================
-		// === UTILITY FUNCTIONS ===
-		// ========================================
-		
-		/**
-		 * Safely parse JSON from data attribute
-		 * @param {string} jsonString - JSON string to parse
-		 * @param {object} fallback - Fallback value if parsing fails
-		 * @returns {object} Parsed object or fallback
-		 */
-		const safeJSONParse = (jsonString, fallback = {min: '-', avg: '-', max: '-'}) => {
-			if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
-			try {
-				return JSON.parse(jsonString)
-			} catch (e) {
-				console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
-				return fallback
+		(() => {
+			'use strict'
+
+			// Get reference to this specific widget container
+			const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Safely parse JSON from data attribute
+			 * @param {string} jsonString - JSON string to parse
+			 * @param {object} fallback - Fallback value if parsing fails
+			 * @returns {object} Parsed object or fallback
+			 */
+			const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
+				if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+				try {
+					return JSON.parse(jsonString)
+				} catch (e) {
+					console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
+					return fallback
+				}
 			}
-		}
-		
-		/**
-		 * Calculate color style based on thresholds
-		 * @param {number} val - Current value
-		 * @param {number} low - Low threshold
-		 * @param {number} high - High threshold
-		 * @param {boolean} reversed - If true, higher values are better (green)
-		 * @returns {string} Color style string
-		 */
-		const getColorStyle = (val, low, high, reversed = false) => {
-			if (reversed) {
-				// Reversed thresholds: higher percentage = better (green)
-				if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-			} else {
-				// Normal thresholds: lower = green, higher = red
-				if (val < low) return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+
+			/**
+			 * Calculate color style based on thresholds
+			 * @param {number} val - Current value
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Color style string
+			 */
+			const getColorStyle = (val, low, high, reversed = false) => {
+				if (reversed) {
+					// Reversed thresholds: higher percentage = better (green)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal thresholds: lower = green, higher = red
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
 			}
-			return ''
-		}
-		
-		/**
-		 * Build HTML for threshold-based value with color
-		 * @param {string} value - Value to display
-		 * @param {string} lowThreshold - Low threshold value
-		 * @param {string} highThreshold - High threshold value
-		 * @param {string} label - Label for tooltip
-		 * @param {string} cmdId - Command ID
-		 * @param {object} history - History stats {min, avg, max}
-		 * @param {string} tendance - Trend indicator
-		 * @param {boolean} reversed - If true, higher values are better
-		 * @returns {string} HTML string
-		 */
-		const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-			if (value === '') return '<span></span>'
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, reversed)
-			
-			return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
-		}
-		
-		/**
-		 * Build HTML for percentage-based value with color and unit
-		 * @param {string} value - Value to display
-		 * @param {string} lowThreshold - Low threshold value
-		 * @param {string} highThreshold - High threshold value
-		 * @param {string} label - Label for tooltip
-		 * @param {string} cmdId - Command ID
-		 * @param {object} history - History stats {min, avg, max}
-		 * @param {string} tendance - Trend indicator
-		 * @param {string} prefix - Prefix text (e.g., "#memory# (")
-		 * @param {string} unit - Unit (e.g., "%")
-		 * @param {boolean} reversed - If true, higher values are better
-		 * @returns {string} HTML string
-		 */
-		const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-			if (value === '') return prefix ? '<span></span>' : ''
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-			const color = getColorStyle(val, low, high, reversed)
-			
-			const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-			const unitSpan = `<span>${unit}${tendance}</span>`
-			
-			return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
-		}
-		
-		// ========================================
-		// === ICON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize SSH connection status icon
-		 */
-		const initIconSSH = () => {
-			try {
-				const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
-				if (!iconSSH) return
-				
-				if ('#cnx_ssh#' === 'OK') {
-					iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
-				} else if ('#cnx_ssh#' === 'KO') {
-					iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for threshold-based value with color
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
+				if (value === '') return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
+			}
+
+			/**
+			 * Build HTML for percentage-based value with color and unit
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
+			 * @param {string} unit - Unit (e.g., "%")
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
+				if (value === '') return prefix ? '<span></span>' : ''
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+
+				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
+				const unitSpan = `<span>${unit}${tendance}</span>`
+
+				return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
+			}
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconSSH:', e)
 				}
-			} catch (e) {
-				console.error('[Monitoring] Error in initIconSSH:', e)
 			}
-		}
-		
-		/**
-		 * Initialize Cron status icon
-		 */
-		const initIconCron = () => {
-			try {
-				const iconCron = widgetRoot.querySelector('#iconCron#id#')
-				if (!iconCron) return
-				
-				const isOn = '#cron_status#' === '1'
-				const isCustom = '#cron_status_custom#' === '1'
-				const display = '#cron_status_display#'
-				
-				const icon = isOn ? 'play-circle' : 'pause-circle'
-				const label = isOn ? 'ON' : 'OFF'
-				const customLabel = isCustom ? 'Custom' : 'Default'
-				const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-			
-				iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
-			} catch (e) {
-				console.error('[Monitoring] Error in initIconCron:', e)
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? 'Custom' : 'Default'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconCron:', e)
+				}
 			}
-		}
-		
-		// ========================================
-		// === BUTTON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize Reboot button with confirmation dialog
-		 */
-		const initRebootButton = () => {
-			try {
-				const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-				rebootBtn?.addEventListener('click', () => {
-					jeeDialog.confirm({
-					title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
-					message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
-						buttons: {
-							confirm: { label: 'Redémarrer', className: 'warning' },
-							cancel: { label: 'Annuler', className: 'info' }
-						},
-						callback: (result) => {
-							if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-						}
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with confirmation dialog
+			 */
+			const initRebootButton = () => {
+				try {
+					const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+					rebootBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
+							message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Redémarrer', className: 'warning' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+							}
+						})
 					})
-				})
-			} catch (e) {
-				console.error('[Monitoring] Error in initRebootButton:', e)
+				} catch (e) {
+					console.error('[Monitoring] Error in initRebootButton:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Poweroff button with confirmation dialog
-		 */
-		const initPoweroffButton = () => {
-			try {
-				const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
-				poweroffBtn?.addEventListener('click', () => {
-					jeeDialog.confirm({
-					title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
-					message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
-						buttons: {
-							confirm: { label: 'Eteindre', className: 'danger' },
-							cancel: { label: 'Annuler', className: 'info' }
-						},
-						callback: (result) => {
-							if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
-						}
+
+			/**
+			 * Initialize Poweroff button with confirmation dialog
+			 */
+			const initPoweroffButton = () => {
+				try {
+					const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
+					poweroffBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
+							message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Eteindre', className: 'danger' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+							}
+						})
 					})
-				})
-			} catch (e) {
-				console.error('[Monitoring] Error in initPoweroffButton:', e)
-			}
-		}
-		
-		/**
-		 * Initialize Refresh button
-		 */
-		const initRefreshButton = () => {
-			try {
-				const refreshBtn = widgetRoot.querySelector('.refresh')
-				if (!refreshBtn) return
-				
-				if ('#refresh_id#' !== '') {
-					refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-				} else {
-					refreshBtn.remove()
+				} catch (e) {
+					console.error('[Monitoring] Error in initPoweroffButton:', e)
 				}
-			} catch (e) {
-				console.error('[Monitoring] Error in initRefreshButton:', e)
 			}
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - Simple ===
-		// ========================================
-		
-		/**
-		 * Initialize Uptime display
-		 */
-		const initUptime = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-				if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
-			} catch (e) {
-				console.error('[Monitoring] Error in initUptime:', e)
+
+			/**
+			 * Initialize Refresh button
+			 */
+			const initRefreshButton = () => {
+				try {
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
+
+					if ('#refresh_id#' !== '') {
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						refreshBtn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initRefreshButton:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Network Infos display
-		 */
-		const initNetworkInfos = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-				if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-			} catch (e) {
-				console.error('[Monitoring] Error in initNetworkInfos:', e)
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initUptime:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Network Traffic display
-		 */
-		const initNetwork = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const networkEl = widgetRoot.querySelector('#network#id#')
-				if (networkEl) {
-					const history = {min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#'}
-					networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetworkInfos:', e)
 				}
-			} catch (e) {
-				console.error('[Monitoring] Error in initNetwork:', e)
 			}
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - With Thresholds ===
-		// ========================================
-		
-		/**
-		 * Initialize Load Average displays (1mn, 5mn, 15mn)
-		 */
-		const initLoadAverage = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				// Load avg 1mn
-				const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
-				if (loadAvg1mn) {
-					const html = buildThresholdHTML(
-						'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
-						'Charge Système (1min)', '#load_avg_1mn_id#',
-						{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-						'#load_avg_1mn_tendance#'
-					)
-					loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+
+			/**
+			 * Initialize Network Traffic display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (networkEl) {
+						const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
+						networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetwork:', e)
 				}
-				
-				// Load avg 5mn
-				const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-				if (loadAvg5mn) {
-					const html = buildThresholdHTML(
-						'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
-						'Charge Système (5min)', '#load_avg_5mn_id#',
-						{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-						'#load_avg_5mn_tendance#'
-					)
-					loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With Thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+							'Charge Système (1min)', '#load_avg_1mn_id#',
+							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+							'#load_avg_1mn_tendance#'
+						)
+						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+							'Charge Système (5min)', '#load_avg_5mn_id#',
+							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+							'#load_avg_5mn_tendance#'
+						)
+						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+							'Charge Système (15min)', '#load_avg_15mn_id#',
+							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+							'#load_avg_15mn_tendance#'
+						)
+						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initLoadAverage:', e)
 				}
-				
-				// Load avg 15mn
-				const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-				if (loadAvg15mn) {
-					const html = buildThresholdHTML(
-						'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
-						'Charge Système (15min)', '#load_avg_15mn_id#',
-						{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-						'#load_avg_15mn_tendance#'
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						memoryEl.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					memoryEl.innerHTML = buildPercentageHTML(
+						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+						'#memory_available_percent_tendance#', '#memory# (', '%', true
 					)
-					loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+				} catch (e) {
+					console.error('[Monitoring] Error in initMemory:', e)
 				}
-			} catch (e) {
-				console.error('[Monitoring] Error in initLoadAverage:', e)
 			}
-		}
-		
-		/**
-		 * Initialize Memory display with percentage
-		 */
-		const initMemory = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
-				if (!memoryEl) return
-				
-				const value = '#memory_available_percent#'
-				if (value === '') {
-					memoryEl.innerHTML = '<span>#memory#</span>'
-					return
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						swapEl.innerHTML = '<span></span>'
+						return
+					}
+
+					swapEl.innerHTML = buildPercentageHTML(
+						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+						'#swap_free_percent_tendance#', '#swap# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initSwap:', e)
 				}
-				
-				memoryEl.innerHTML = buildPercentageHTML(
-					value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
-					'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
-					{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-					'#memory_available_percent_tendance#', '#memory# (', '%', true
-				)
-			} catch (e) {
-				console.error('[Monitoring] Error in initMemory:', e)
 			}
-		}
-		
-		/**
-		 * Initialize Swap display with percentage
-		 */
-		const initSwap = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
-				if (!swapEl) return
-				
-				const value = '#swap_free_percent#'
-				if (value === '') {
-					swapEl.innerHTML = '<span></span>'
-					return
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						hddEl.innerHTML = '<span></span>'
+						return
+					}
+
+					hddEl.innerHTML = buildPercentageHTML(
+						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initHDD:', e)
 				}
-				
-				swapEl.innerHTML = buildPercentageHTML(
-					value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
-					'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
-					{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-					'#swap_free_percent_tendance#', '#swap# (', '%', true
-				)
-			} catch (e) {
-				console.error('[Monitoring] Error in initSwap:', e)
 			}
-		}
-		
-		/**
-		 * Initialize HDD display with percentage
-		 */
-		const initHDD = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const hddEl = widgetRoot.querySelector('#hdd#id#')
-				if (!hddEl) return
-				
-				const value = '#hdd_free_percent#'
-				if (value === '') {
-					hddEl.innerHTML = '<span></span>'
-					return
+
+			/**
+			 * Initialize Synology volume display using data attributes
+			 * @param {HTMLElement} synoContainer - The container div with data-syno-* attributes
+			 */
+			const initSynoVolume = (synoContainer) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = synoContainer.dataset
+					if (dataset.synoDisplay !== 'block') return
+
+					const synoId = dataset.synoId
+					const container = widgetRoot.querySelector(`#${synoId}#id#`)
+					if (!container) return
+
+					container.className = 'tooltips'
+					container.style.display = dataset.synoDisplay
+					container.innerHTML = `<span title="${dataset.synoName} (% Libre)<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span> <span id="${synoId}_free_percent#id#"></span>`
+
+					const percentEl = widgetRoot.querySelector(`#${synoId}_free_percent#id#`)
+					if (!percentEl) return
+
+					const value = dataset.synoPercent
+					if (value === '') {
+						percentEl.innerHTML = '<span></span>'
+						return
+					}
+
+					const history = safeJSONParse(dataset.synoHistory)
+					percentEl.innerHTML = buildPercentageHTML(
+						value, dataset.synoLow, dataset.synoHigh,
+						`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
+						history,
+						dataset.synoTendance, `${dataset.synoValue} (`, '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 				}
-				
-				hddEl.innerHTML = buildPercentageHTML(
-					value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
-					'Espace Disque (% Libre)', '#hdd_free_percent_id#',
-					{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-					'#hdd_free_percent_tendance#', '#hdd# (', '%', true
-				)
-			} catch (e) {
-				console.error('[Monitoring] Error in initHDD:', e)
 			}
-		}
-		
-		/**
-		 * Initialize Synology volume display using data attributes
-		 * @param {HTMLElement} synoContainer - The container div with data-syno-* attributes
-		 */
-		const initSynoVolume = (synoContainer) => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const dataset = synoContainer.dataset
-				if (dataset.synoDisplay !== 'block') return
-				
-				const synoId = dataset.synoId
-				const container = widgetRoot.querySelector(`#${synoId}#id#`)
-				if (!container) return
-				
-				container.className = 'tooltips'
-				container.style.display = dataset.synoDisplay
-				container.innerHTML = `<span title="${dataset.synoName} (% Libre)<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span> <span id="${synoId}_free_percent#id#"></span>`
-				
-				const percentEl = widgetRoot.querySelector(`#${synoId}_free_percent#id#`)
-				if (!percentEl) return
-				
-				const value = dataset.synoPercent
-				if (value === '') {
-					percentEl.innerHTML = '<span></span>'
-					return
+
+			/**
+			 * Initialize CPU display with optional temperature
+			 */
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					if (!cpuEl) return
+
+					if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+						if (!tempEl) return
+
+						const temp = parseFloat('#cpu_temp#')
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+						const color = getColorStyle(temp, low, high, false)
+
+						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initCPU:', e)
 				}
-				
-				const history = safeJSONParse(dataset.synoHistory)
-				percentEl.innerHTML = buildPercentageHTML(
-					value, dataset.synoLow, dataset.synoHigh,
-					`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
-					history,
-					dataset.synoTendance, `${dataset.synoValue} (`, '%', true
-				)
-			} catch (e) {
-				console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 			}
-		}
-		
-		/**
-		 * Initialize CPU display with optional temperature
-		 */
-		const initCPU = () => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const cpuEl = widgetRoot.querySelector('#cpu#id#')
-				if (!cpuEl) return
-				
-				if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
-					cpuEl.innerHTML = '<span>#cpu# </span>'
-					
-					const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
-					if (!tempEl) return
-					
-					const temp = parseFloat('#cpu_temp#')
-					const low = parseFloat('#cpu_temp_colorlow#')
-					const high = parseFloat('#cpu_temp_colorhigh#')
-					const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
-					const color = getColorStyle(temp, low, high, false)
-					
-					tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
-				} else {
-					cpuEl.innerHTML = '<span>#cpu#</span>'
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const history = safeJSONParse(dataset.persoHistory)
+					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+					const color = getColorStyle(val, low, high, false)
+
+					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
 				}
-			} catch (e) {
-				console.error('[Monitoring] Error in initCPU:', e)
 			}
-		}
-		
-		/**
-		 * Initialize custom command display (perso1-4) using data attributes
-		 * @param {HTMLElement} container - The container div with data-perso-* attributes
-		 */
-		const initPerso = (container) => {
-			try {
-				if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-				
-				const dataset = container.dataset
-				const persoId = dataset.persoId
-				const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
-				if (!el) return
-				
-				const value = dataset.persoValue
-				if (value === '') {
-					el.innerHTML = '<span></span>'
-					return
-				}
-				
-				const val = parseFloat(value)
-				const low = parseFloat(dataset.persoLow)
-				const high = parseFloat(dataset.persoHigh)
-				const history = safeJSONParse(dataset.persoHistory)
-				const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-				const color = getColorStyle(val, low, high, false)
-				
-				el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
-			} catch (e) {
-				console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+
+				// Button handlers
+				initRebootButton()
+				initPoweroffButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// Synology volumes - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+
+				// CPU with temperature
+				initCPU()
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
 			}
-		}
-		
-		// ========================================
-		// === INITIALIZATION ===
-		// ========================================
-		
-		// Only initialize if template is properly instantiated
-		if ('#uid#') {
-			// Icon handlers
-			initIconSSH()
-			initIconCron()
-			
-			// Button handlers
-			initRebootButton()
-			initPoweroffButton()
-			initRefreshButton()
-			
-			// Simple value displays
-			initUptime()
-			initNetworkInfos()
-			initNetwork()
-			
-			// Value displays with thresholds
-			initLoadAverage()
-			initMemory()
-			initSwap()
-			initHDD()
-			
-			// Synology volumes - generic initialization using data attributes
-			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-			
-			// CPU with temperature
-			initCPU()
-			
-			// Custom commands - generic initialization using data attributes
-			widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
-		}
-	})()
+		})()
 	</script>
-</div>
+</div>
\ No newline at end of file

From 6cd67144f9c6cc805350e1c0c234f3eea678042e Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:34:06 +0100
Subject: [PATCH 03/24] Update info.json

---
 plugin_info/info.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin_info/info.json b/plugin_info/info.json
index cea69b69..f68d7c2d 100644
--- a/plugin_info/info.json
+++ b/plugin_info/info.json
@@ -1,7 +1,7 @@
 {
 	"id": "Monitoring",
 	"name": "Monitoring",
-	"pluginVersion": "3.4.1",
+	"pluginVersion": "3.4.2",
 	"description": {
 		"fr_FR": "Plugin permettant le monitoring des équipements locaux et distants (via SSH). Le plugin affichera les informations systèmes d'équipements sous Linux ou Synology (Distribution, CPU, Mémoire, Disques, Swap).",
 		"en_US": "Plugin to monitor local and remote equipments (through SSH). The plugin will display system informations from Linux or Synology (Distribution, CPU, Memory, Disks, Swap).",

From 32de8bc2b3796509127ae1b042b3d2a5a8ba30f4 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:47:55 +0100
Subject: [PATCH 04/24] update templates

---
 core/template/dashboard/AsusWRT.html    | 31 +++++++++------
 core/template/dashboard/Monitoring.html | 51 +++++++++++++++----------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index 331847a0..5c9d25a4 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -1,4 +1,7 @@
-<div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="width: #width#;height: #height#;#style#;">
+<div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#"
+	data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
+	data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
+	style="width: #width#;height: #height#;#style#;">
 	<style>
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
 			font-size: 12px !important;
@@ -78,13 +81,15 @@
 			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
 			<span id="iconCron#id#" class="cmd monitor-btn"></span>
 			<span id="iconCheckFirmware#id#" class="cmd monitor-btn"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
 				<i class="cmd monitor-btn fas fa-redo"></i>
 			</span>
 		</div>
 		<div class="widget-name monitor-name-center">
 			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
-			<a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
+			<a href="#eqLink#" class="reportModeHidden">#name_display# <span
+					class="object_name">#object_name#</span></a>
 		</div>
 		<div class="monitor-name-right">
 			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
@@ -169,28 +174,32 @@
 			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
 			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
 			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
-			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
 			<span id="perso1_unite#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
 			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
 			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
 			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
-			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
 			<span id="perso2_unite#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
 			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
 			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
 			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
-			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
 			<span id="perso3_unite#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
 			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
 			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
 			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
-			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>" style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
 			<span id="perso4_unite#id#"></span>
 		</div>
 	</div>
@@ -266,8 +275,9 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
-				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
 			}
 
 			/**
@@ -292,11 +302,10 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-				const unitSpan = `<span>${unit}${tendance}</span>`
-
-				return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
+				const unitSpan = `<span>${unit}${tendanceStr}</span>`
 			}
 
 			// ========================================
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 5f003c41..15541314 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -1,4 +1,7 @@
-<div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="width: #width#;height: #height#;#style#;">
+<div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#"
+	data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
+	data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
+	style="width: #width#;height: #height#;#style#;">
 	<style>
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
 			font-size: 12px !important;
@@ -77,16 +80,19 @@
 		<div class="monitor-name-left">
 			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
 			<span id="iconCron#id#" class="cmd monitor-btn"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
 				<i class="cmd monitor-btn fas fa-redo"></i>
 			</span>
-			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
 				<i class="cmd monitor-btn fas fa-power-off"></i>
 			</span>
 		</div>
 		<div class="widget-name monitor-name-center">
 			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
-			<a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
+			<a href="#eqLink#" class="reportModeHidden">#name_display# <span
+					class="object_name">#object_name#</span></a>
 		</div>
 		<div class="monitor-name-right">
 			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
@@ -296,8 +302,9 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
-				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendance}</span>`
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
 			}
 
 			/**
@@ -322,11 +329,10 @@
 				const high = parseFloat(highThreshold)
 				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
 				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-				const unitSpan = `<span>${unit}${tendance}</span>`
-
-				return prefix ? `${prefix}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
+				const unitSpan = `<span>${unit}${tendanceStr}</span>`
 			}
 
 			// ========================================
@@ -637,29 +643,34 @@
 					if (dataset.synoDisplay !== 'block') return
 
 					const synoId = dataset.synoId
+					if (!synoId || synoId.startsWith('#')) return  // Skip if synoId is a placeholder
+
 					const container = widgetRoot.querySelector(`#${synoId}#id#`)
 					if (!container) return
 
 					container.className = 'tooltips'
-					container.style.display = dataset.synoDisplay
-					container.innerHTML = `<span title="${dataset.synoName} (% Libre)<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span> <span id="${synoId}_free_percent#id#"></span>`
+					container.style.display = 'block'
 
-					const percentEl = widgetRoot.querySelector(`#${synoId}_free_percent#id#`)
-					if (!percentEl) return
+					// Build the HTML structure
+					const iconHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>`
+					const percentEl = document.createElement('span')
+					percentEl.id = `${synoId}_percent#id#`
 
 					const value = dataset.synoPercent
 					if (value === '') {
 						percentEl.innerHTML = '<span></span>'
-						return
+					} else {
+						const history = safeJSONParse(dataset.synoHistory)
+						percentEl.innerHTML = buildPercentageHTML(
+							value, dataset.synoLow, dataset.synoHigh,
+							`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
+							history,
+							dataset.synoTendance, `${dataset.synoValue} (`, '%', true
+						)
 					}
 
-					const history = safeJSONParse(dataset.synoHistory)
-					percentEl.innerHTML = buildPercentageHTML(
-						value, dataset.synoLow, dataset.synoHigh,
-						`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
-						history,
-						dataset.synoTendance, `${dataset.synoValue} (`, '%', true
-					)
+					container.innerHTML = iconHTML
+					container.appendChild(percentEl)
 				} catch (e) {
 					console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 				}

From 0956ed01e8748bdc9fe89f454f570dad41a64edb Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:53:50 +0100
Subject: [PATCH 05/24] update templates

---
 core/template/dashboard/AsusWRT.html    |  9 ++++--
 core/template/dashboard/Monitoring.html | 39 ++++++++++++-------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index 5c9d25a4..66e263df 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -268,7 +268,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-				if (value === '') return '<span></span>'
+				if (value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -295,7 +295,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-				if (value === '') return prefix ? '<span></span>' : ''
+				if (value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -304,8 +304,13 @@
 				const color = getColorStyle(val, low, high, reversed)
 				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
+				// Filter placeholder from prefix
+				const prefixStr = (prefix && !prefix.startsWith('#')) ? prefix : ''
+
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
 				const unitSpan = `<span>${unit}${tendanceStr}</span>`
+
+				return prefixStr ? `${prefixStr}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
 			}
 
 			// ========================================
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 15541314..4135a30f 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -295,7 +295,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-				if (value === '') return '<span></span>'
+				if (value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -322,7 +322,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-				if (value === '') return prefix ? '<span></span>' : ''
+				if (value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -331,8 +331,13 @@
 				const color = getColorStyle(val, low, high, reversed)
 				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
+				// Filter placeholder from prefix
+				const prefixStr = (prefix && !prefix.startsWith('#')) ? prefix : ''
+
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
 				const unitSpan = `<span>${unit}${tendanceStr}</span>`
+
+				return prefixStr ? `${prefixStr}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
 			}
 
 			// ========================================
@@ -645,32 +650,24 @@
 					const synoId = dataset.synoId
 					if (!synoId || synoId.startsWith('#')) return  // Skip if synoId is a placeholder
 
+					const value = dataset.synoPercent
+					if (!value || value === '' || value.startsWith('#')) return  // Skip if no valid value
+
 					const container = widgetRoot.querySelector(`#${synoId}#id#`)
 					if (!container) return
 
 					container.className = 'tooltips'
 					container.style.display = 'block'
 
-					// Build the HTML structure
-					const iconHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>`
-					const percentEl = document.createElement('span')
-					percentEl.id = `${synoId}_percent#id#`
-
-					const value = dataset.synoPercent
-					if (value === '') {
-						percentEl.innerHTML = '<span></span>'
-					} else {
-						const history = safeJSONParse(dataset.synoHistory)
-						percentEl.innerHTML = buildPercentageHTML(
-							value, dataset.synoLow, dataset.synoHigh,
-							`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
-							history,
-							dataset.synoTendance, `${dataset.synoValue} (`, '%', true
-						)
-					}
+					const history = safeJSONParse(dataset.synoHistory)
+					const percentHTML = buildPercentageHTML(
+						value, dataset.synoLow, dataset.synoHigh,
+						`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
+						history,
+						dataset.synoTendance, `${dataset.synoValue} (`, '%', true
+					)
 
-					container.innerHTML = iconHTML
-					container.appendChild(percentEl)
+					container.innerHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>${percentHTML}`
 				} catch (e) {
 					console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 				}

From f1dd5596b5954d5ee90ff61f7bec20535e40c147 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:08:16 +0100
Subject: [PATCH 06/24] update templates

---
 core/template/dashboard/AsusWRT.html    |  4 ++--
 core/template/dashboard/Monitoring.html | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index 66e263df..f568b638 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -268,7 +268,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-				if (value === '' || value.startsWith('#')) return '<span></span>'
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -295,7 +295,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-				if (value === '' || value.startsWith('#')) return '<span></span>'
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 4135a30f..ec671a40 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -151,7 +151,7 @@
 				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#" data-syno-id="syno_hddv2" data-syno-name="Syno Volume 2"
+		<div id="syno_hddv2#id#" style="display:none;" data-syno-id="syno_hddv2" data-syno-name="Syno Volume 2"
 			data-syno-display="#syno_hddv2_display#" data-syno-value="#syno_hddv2#"
 			data-syno-collect="#syno_hddv2_collect#" data-syno-icon="#syno_hddv2_icon#"
 			data-syno-percent="#syno_hddv2_free_percent#" data-syno-low="#syno_hddv2_free_percent_colorlow#"
@@ -159,7 +159,7 @@
 			data-syno-tendance="#syno_hddv2_free_percent_tendance#" data-syno-date-value="#syno_hddv2_value#"
 			data-syno-history='{"min":"#syno_hddv2_free_percent_minHistory#","avg":"#syno_hddv2_free_percent_averageHistory#","max":"#syno_hddv2_free_percent_maxHistory#"}'>
 		</div>
-		<div id="syno_hddv3#id#" data-syno-id="syno_hddv3" data-syno-name="Syno Volume 3"
+		<div id="syno_hddv3#id#" style="display:none;" data-syno-id="syno_hddv3" data-syno-name="Syno Volume 3"
 			data-syno-display="#syno_hddv3_display#" data-syno-value="#syno_hddv3#"
 			data-syno-collect="#syno_hddv3_collect#" data-syno-icon="#syno_hddv3_icon#"
 			data-syno-percent="#syno_hddv3_free_percent#" data-syno-low="#syno_hddv3_free_percent_colorlow#"
@@ -167,7 +167,7 @@
 			data-syno-tendance="#syno_hddv3_free_percent_tendance#" data-syno-date-value="#syno_hddv3_value#"
 			data-syno-history='{"min":"#syno_hddv3_free_percent_minHistory#","avg":"#syno_hddv3_free_percent_averageHistory#","max":"#syno_hddv3_free_percent_maxHistory#"}'>
 		</div>
-		<div id="syno_hddv4#id#" data-syno-id="syno_hddv4" data-syno-name="Syno Volume 4"
+		<div id="syno_hddv4#id#" style="display:none;" data-syno-id="syno_hddv4" data-syno-name="Syno Volume 4"
 			data-syno-display="#syno_hddv4_display#" data-syno-value="#syno_hddv4#"
 			data-syno-collect="#syno_hddv4_collect#" data-syno-icon="#syno_hddv4_icon#"
 			data-syno-percent="#syno_hddv4_free_percent#" data-syno-low="#syno_hddv4_free_percent_colorlow#"
@@ -175,7 +175,7 @@
 			data-syno-tendance="#syno_hddv4_free_percent_tendance#" data-syno-date-value="#syno_hddv4_value#"
 			data-syno-history='{"min":"#syno_hddv4_free_percent_minHistory#","avg":"#syno_hddv4_free_percent_averageHistory#","max":"#syno_hddv4_free_percent_maxHistory#"}'>
 		</div>
-		<div id="syno_hddusb#id#" data-syno-id="syno_hddusb" data-syno-name="Syno Volume USB"
+		<div id="syno_hddusb#id#" style="display:none;" data-syno-id="syno_hddusb" data-syno-name="Syno Volume USB"
 			data-syno-display="#syno_hddusb_display#" data-syno-value="#syno_hddusb#"
 			data-syno-collect="#syno_hddusb_collect#" data-syno-icon="#syno_hddusb_icon#"
 			data-syno-percent="#syno_hddusb_free_percent#" data-syno-low="#syno_hddusb_free_percent_colorlow#"
@@ -183,7 +183,7 @@
 			data-syno-tendance="#syno_hddusb_free_percent_tendance#" data-syno-date-value="#syno_hddusb_value#"
 			data-syno-history='{"min":"#syno_hddusb_free_percent_minHistory#","avg":"#syno_hddusb_free_percent_averageHistory#","max":"#syno_hddusb_free_percent_maxHistory#"}'>
 		</div>
-		<div id="syno_hddesata#id#" data-syno-id="syno_hddesata" data-syno-name="Syno Volume eSATA"
+		<div id="syno_hddesata#id#" style="display:none;" data-syno-id="syno_hddesata" data-syno-name="Syno Volume eSATA"
 			data-syno-display="#syno_hddesata_display#" data-syno-value="#syno_hddesata#"
 			data-syno-collect="#syno_hddesata_collect#" data-syno-icon="#syno_hddesata_icon#"
 			data-syno-percent="#syno_hddesata_free_percent#" data-syno-low="#syno_hddesata_free_percent_colorlow#"
@@ -295,7 +295,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-				if (value === '' || value.startsWith('#')) return '<span></span>'
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -322,7 +322,7 @@
 			 * @returns {string} HTML string
 			 */
 			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-				if (value === '' || value.startsWith('#')) return '<span></span>'
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
 
 				const val = parseFloat(value)
 				const low = parseFloat(lowThreshold)
@@ -645,7 +645,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const dataset = synoContainer.dataset
-					if (dataset.synoDisplay !== 'block') return
+					// Skip if display is not 'block' or is a placeholder
+					if (!dataset.synoDisplay || dataset.synoDisplay.startsWith('#') || dataset.synoDisplay !== 'block') return
 
 					const synoId = dataset.synoId
 					if (!synoId || synoId.startsWith('#')) return  // Skip if synoId is a placeholder
@@ -659,7 +660,9 @@
 					container.className = 'tooltips'
 					container.style.display = 'block'
 
+					// Build the HTML
 					const history = safeJSONParse(dataset.synoHistory)
+					const iconHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>`
 					const percentHTML = buildPercentageHTML(
 						value, dataset.synoLow, dataset.synoHigh,
 						`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
@@ -667,7 +670,7 @@
 						dataset.synoTendance, `${dataset.synoValue} (`, '%', true
 					)
 
-					container.innerHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>${percentHTML}`
+					container.innerHTML = `${iconHTML}${percentHTML}`
 				} catch (e) {
 					console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
 				}

From fd577402ebb84885aa4b6f9d231bde62bf7c7093 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:19:24 +0100
Subject: [PATCH 07/24] update templates

---
 core/template/dashboard/AsusWRT.html    | 9 +++++----
 core/template/dashboard/Monitoring.html | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index f568b638..da435c5c 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -304,13 +304,14 @@
 				const color = getColorStyle(val, low, high, reversed)
 				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
-				// Filter placeholder from prefix
-				const prefixStr = (prefix && !prefix.startsWith('#')) ? prefix : ''
-
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
 				const unitSpan = `<span>${unit}${tendanceStr}</span>`
 
-				return prefixStr ? `${prefixStr}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
+				// Only add prefix if it exists and is not a placeholder
+				if (prefix && !prefix.startsWith('#')) {
+					return `<span>${prefix}${valueSpan}${unitSpan})</span>`
+				}
+				return `${valueSpan}${unitSpan}`
 			}
 
 			// ========================================
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index ec671a40..7a7029c4 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -331,13 +331,14 @@
 				const color = getColorStyle(val, low, high, reversed)
 				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
 
-				// Filter placeholder from prefix
-				const prefixStr = (prefix && !prefix.startsWith('#')) ? prefix : ''
-
 				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
 				const unitSpan = `<span>${unit}${tendanceStr}</span>`
 
-				return prefixStr ? `${prefixStr}${valueSpan}${unitSpan})` : `${valueSpan}${unitSpan}`
+				// Only add prefix if it exists and is not a placeholder
+				if (prefix && !prefix.startsWith('#')) {
+					return `<span>${prefix}${valueSpan}${unitSpan})</span>`
+				}
+				return `${valueSpan}${unitSpan}`
 			}
 
 			// ========================================

From c3b6a01d4996040b7e9307724792497dd6643262 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:24:49 +0100
Subject: [PATCH 08/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 111 ++++++++++--------------
 1 file changed, 44 insertions(+), 67 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 7a7029c4..04c6ffa4 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -151,45 +151,30 @@
 				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#" style="display:none;" data-syno-id="syno_hddv2" data-syno-name="Syno Volume 2"
-			data-syno-display="#syno_hddv2_display#" data-syno-value="#syno_hddv2#"
-			data-syno-collect="#syno_hddv2_collect#" data-syno-icon="#syno_hddv2_icon#"
-			data-syno-percent="#syno_hddv2_free_percent#" data-syno-low="#syno_hddv2_free_percent_colorlow#"
-			data-syno-high="#syno_hddv2_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv2_free_percent_id#"
-			data-syno-tendance="#syno_hddv2_free_percent_tendance#" data-syno-date-value="#syno_hddv2_value#"
-			data-syno-history='{"min":"#syno_hddv2_free_percent_minHistory#","avg":"#syno_hddv2_free_percent_averageHistory#","max":"#syno_hddv2_free_percent_maxHistory#"}'>
+		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;">
+			<span title="Syno Volume 2<br><i>Date de valeur : #syno_hddv2_value#<br>Date de collecte : #syno_hddv2_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
+			<span id="syno_hddv2_percent#id#"></span>
 		</div>
-		<div id="syno_hddv3#id#" style="display:none;" data-syno-id="syno_hddv3" data-syno-name="Syno Volume 3"
-			data-syno-display="#syno_hddv3_display#" data-syno-value="#syno_hddv3#"
-			data-syno-collect="#syno_hddv3_collect#" data-syno-icon="#syno_hddv3_icon#"
-			data-syno-percent="#syno_hddv3_free_percent#" data-syno-low="#syno_hddv3_free_percent_colorlow#"
-			data-syno-high="#syno_hddv3_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv3_free_percent_id#"
-			data-syno-tendance="#syno_hddv3_free_percent_tendance#" data-syno-date-value="#syno_hddv3_value#"
-			data-syno-history='{"min":"#syno_hddv3_free_percent_minHistory#","avg":"#syno_hddv3_free_percent_averageHistory#","max":"#syno_hddv3_free_percent_maxHistory#"}'>
+		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;">
+			<span title="Syno Volume 3<br><i>Date de valeur : #syno_hddv3_value#<br>Date de collecte : #syno_hddv3_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
+			<span id="syno_hddv3_percent#id#"></span>
 		</div>
-		<div id="syno_hddv4#id#" style="display:none;" data-syno-id="syno_hddv4" data-syno-name="Syno Volume 4"
-			data-syno-display="#syno_hddv4_display#" data-syno-value="#syno_hddv4#"
-			data-syno-collect="#syno_hddv4_collect#" data-syno-icon="#syno_hddv4_icon#"
-			data-syno-percent="#syno_hddv4_free_percent#" data-syno-low="#syno_hddv4_free_percent_colorlow#"
-			data-syno-high="#syno_hddv4_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddv4_free_percent_id#"
-			data-syno-tendance="#syno_hddv4_free_percent_tendance#" data-syno-date-value="#syno_hddv4_value#"
-			data-syno-history='{"min":"#syno_hddv4_free_percent_minHistory#","avg":"#syno_hddv4_free_percent_averageHistory#","max":"#syno_hddv4_free_percent_maxHistory#"}'>
+		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;">
+			<span title="Syno Volume 4<br><i>Date de valeur : #syno_hddv4_value#<br>Date de collecte : #syno_hddv4_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
+			<span id="syno_hddv4_percent#id#"></span>
 		</div>
-		<div id="syno_hddusb#id#" style="display:none;" data-syno-id="syno_hddusb" data-syno-name="Syno Volume USB"
-			data-syno-display="#syno_hddusb_display#" data-syno-value="#syno_hddusb#"
-			data-syno-collect="#syno_hddusb_collect#" data-syno-icon="#syno_hddusb_icon#"
-			data-syno-percent="#syno_hddusb_free_percent#" data-syno-low="#syno_hddusb_free_percent_colorlow#"
-			data-syno-high="#syno_hddusb_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddusb_free_percent_id#"
-			data-syno-tendance="#syno_hddusb_free_percent_tendance#" data-syno-date-value="#syno_hddusb_value#"
-			data-syno-history='{"min":"#syno_hddusb_free_percent_minHistory#","avg":"#syno_hddusb_free_percent_averageHistory#","max":"#syno_hddusb_free_percent_maxHistory#"}'>
+		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;">
+			<span title="Syno Volume USB<br><i>Date de valeur : #syno_hddusb_value#<br>Date de collecte : #syno_hddusb_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
+			<span id="syno_hddusb_percent#id#"></span>
 		</div>
-		<div id="syno_hddesata#id#" style="display:none;" data-syno-id="syno_hddesata" data-syno-name="Syno Volume eSATA"
-			data-syno-display="#syno_hddesata_display#" data-syno-value="#syno_hddesata#"
-			data-syno-collect="#syno_hddesata_collect#" data-syno-icon="#syno_hddesata_icon#"
-			data-syno-percent="#syno_hddesata_free_percent#" data-syno-low="#syno_hddesata_free_percent_colorlow#"
-			data-syno-high="#syno_hddesata_free_percent_colorhigh#" data-syno-cmd-id="#syno_hddesata_free_percent_id#"
-			data-syno-tendance="#syno_hddesata_free_percent_tendance#" data-syno-date-value="#syno_hddesata_value#"
-			data-syno-history='{"min":"#syno_hddesata_free_percent_minHistory#","avg":"#syno_hddesata_free_percent_averageHistory#","max":"#syno_hddesata_free_percent_maxHistory#"}'>
+		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;">
+			<span title="Syno Volume eSATA<br><i>Date de valeur : #syno_hddesata_value#<br>Date de collecte : #syno_hddesata_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
+			<span id="syno_hddesata_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
 			<span
@@ -638,42 +623,20 @@
 			}
 
 			/**
-			 * Initialize Synology volume display using data attributes
-			 * @param {HTMLElement} synoContainer - The container div with data-syno-* attributes
+			 * Initialize Synology volume display with percentage
 			 */
-			const initSynoVolume = (synoContainer) => {
+			const initSynoVolume = (volumeId, value, low, high, label, cmdId, tendance, prefix, historyMin, historyAvg, historyMax) => {
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+					if (!value || value === '' || value.startsWith('#')) return
 
-					const dataset = synoContainer.dataset
-					// Skip if display is not 'block' or is a placeholder
-					if (!dataset.synoDisplay || dataset.synoDisplay.startsWith('#') || dataset.synoDisplay !== 'block') return
+					const percentEl = widgetRoot.querySelector(`#${volumeId}_percent#id#`)
+					if (!percentEl) return
 
-					const synoId = dataset.synoId
-					if (!synoId || synoId.startsWith('#')) return  // Skip if synoId is a placeholder
-
-					const value = dataset.synoPercent
-					if (!value || value === '' || value.startsWith('#')) return  // Skip if no valid value
-
-					const container = widgetRoot.querySelector(`#${synoId}#id#`)
-					if (!container) return
-
-					container.className = 'tooltips'
-					container.style.display = 'block'
-
-					// Build the HTML
-					const history = safeJSONParse(dataset.synoHistory)
-					const iconHTML = `<span title="${dataset.synoName}<br><i>Date de valeur : ${dataset.synoDateValue}<br>Date de collecte : ${dataset.synoCollect}</i>" style="width:15px;max-width:15px;max-height:15px;">${dataset.synoIcon}</span>`
-					const percentHTML = buildPercentageHTML(
-						value, dataset.synoLow, dataset.synoHigh,
-						`${dataset.synoName} (% Libre)`, dataset.synoCmdId,
-						history,
-						dataset.synoTendance, `${dataset.synoValue} (`, '%', true
-					)
-
-					container.innerHTML = `${iconHTML}${percentHTML}`
+					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
+					percentEl.innerHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
 				} catch (e) {
-					console.error('[Monitoring] Error in initSynoVolume for', synoContainer.dataset?.synoId || 'unknown', ':', e)
+					console.error('[Monitoring] Error in initSynoVolume for', volumeId, ':', e)
 				}
 			}
 
@@ -766,8 +729,22 @@
 				initSwap()
 				initHDD()
 
-				// Synology volumes - generic initialization using data attributes
-				widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+				// Synology volumes
+				initSynoVolume('syno_hddv2', '#syno_hddv2_free_percent#', '#syno_hddv2_free_percent_colorlow#', '#syno_hddv2_free_percent_colorhigh#', 
+					'Syno Volume 2 (% Libre)', '#syno_hddv2_free_percent_id#', '#syno_hddv2_free_percent_tendance#', '#syno_hddv2# (', 
+					'#syno_hddv2_free_percent_minHistory#', '#syno_hddv2_free_percent_averageHistory#', '#syno_hddv2_free_percent_maxHistory#')
+				initSynoVolume('syno_hddv3', '#syno_hddv3_free_percent#', '#syno_hddv3_free_percent_colorlow#', '#syno_hddv3_free_percent_colorhigh#', 
+					'Syno Volume 3 (% Libre)', '#syno_hddv3_free_percent_id#', '#syno_hddv3_free_percent_tendance#', '#syno_hddv3# (', 
+					'#syno_hddv3_free_percent_minHistory#', '#syno_hddv3_free_percent_averageHistory#', '#syno_hddv3_free_percent_maxHistory#')
+				initSynoVolume('syno_hddv4', '#syno_hddv4_free_percent#', '#syno_hddv4_free_percent_colorlow#', '#syno_hddv4_free_percent_colorhigh#', 
+					'Syno Volume 4 (% Libre)', '#syno_hddv4_free_percent_id#', '#syno_hddv4_free_percent_tendance#', '#syno_hddv4# (', 
+					'#syno_hddv4_free_percent_minHistory#', '#syno_hddv4_free_percent_averageHistory#', '#syno_hddv4_free_percent_maxHistory#')
+				initSynoVolume('syno_hddusb', '#syno_hddusb_free_percent#', '#syno_hddusb_free_percent_colorlow#', '#syno_hddusb_free_percent_colorhigh#', 
+					'Syno Volume USB (% Libre)', '#syno_hddusb_free_percent_id#', '#syno_hddusb_free_percent_tendance#', '#syno_hddusb# (', 
+					'#syno_hddusb_free_percent_minHistory#', '#syno_hddusb_free_percent_averageHistory#', '#syno_hddusb_free_percent_maxHistory#')
+				initSynoVolume('syno_hddesata', '#syno_hddesata_free_percent#', '#syno_hddesata_free_percent_colorlow#', '#syno_hddesata_free_percent_colorhigh#', 
+					'Syno Volume eSATA (% Libre)', '#syno_hddesata_free_percent_id#', '#syno_hddesata_free_percent_tendance#', '#syno_hddesata# (', 
+					'#syno_hddesata_free_percent_minHistory#', '#syno_hddesata_free_percent_averageHistory#', '#syno_hddesata_free_percent_maxHistory#')
 
 				// CPU with temperature
 				initCPU()

From dcd55838c359950af84f5051d67060e8be02ee71 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:35:45 +0100
Subject: [PATCH 09/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 156 ++++++++++++++++--------
 1 file changed, 104 insertions(+), 52 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 04c6ffa4..9d74c2b5 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -151,31 +151,86 @@
 				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;">
-			<span title="Syno Volume 2<br><i>Date de valeur : #syno_hddv2_value#<br>Date de collecte : #syno_hddv2_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
-			<span id="syno_hddv2_percent#id#"></span>
-		</div>
-		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;">
-			<span title="Syno Volume 3<br><i>Date de valeur : #syno_hddv3_value#<br>Date de collecte : #syno_hddv3_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
-			<span id="syno_hddv3_percent#id#"></span>
-		</div>
-		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;">
-			<span title="Syno Volume 4<br><i>Date de valeur : #syno_hddv4_value#<br>Date de collecte : #syno_hddv4_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
-			<span id="syno_hddv4_percent#id#"></span>
-		</div>
-		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;">
-			<span title="Syno Volume USB<br><i>Date de valeur : #syno_hddusb_value#<br>Date de collecte : #syno_hddusb_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
-			<span id="syno_hddusb_percent#id#"></span>
-		</div>
-		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;">
-			<span title="Syno Volume eSATA<br><i>Date de valeur : #syno_hddesata_value#<br>Date de collecte : #syno_hddesata_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
-			<span id="syno_hddesata_percent#id#"></span>
-		</div>
+		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;"
+			data-syno-id="syno_hddv2"
+			data-syno-icon="#syno_hddv2_icon#"
+			data-syno-title="Syno Volume 2"
+			data-syno-value="#syno_hddv2_free_percent#"
+			data-syno-colorlow="#syno_hddv2_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv2_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 2 (% Libre)"
+			data-syno-cmdid="#syno_hddv2_free_percent_id#"
+			data-syno-tendance="#syno_hddv2_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv2# ("
+			data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv2_value#"
+			data-syno-collectdate="#syno_hddv2_collect#"></div>
+		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;"
+			data-syno-id="syno_hddv3"
+			data-syno-icon="#syno_hddv3_icon#"
+			data-syno-title="Syno Volume 3"
+			data-syno-value="#syno_hddv3_free_percent#"
+			data-syno-colorlow="#syno_hddv3_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv3_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 3 (% Libre)"
+			data-syno-cmdid="#syno_hddv3_free_percent_id#"
+			data-syno-tendance="#syno_hddv3_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv3# ("
+			data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv3_value#"
+			data-syno-collectdate="#syno_hddv3_collect#"></div>
+		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;"
+			data-syno-id="syno_hddv4"
+			data-syno-icon="#syno_hddv4_icon#"
+			data-syno-title="Syno Volume 4"
+			data-syno-value="#syno_hddv4_free_percent#"
+			data-syno-colorlow="#syno_hddv4_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv4_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 4 (% Libre)"
+			data-syno-cmdid="#syno_hddv4_free_percent_id#"
+			data-syno-tendance="#syno_hddv4_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv4# ("
+			data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv4_value#"
+			data-syno-collectdate="#syno_hddv4_collect#"></div>
+		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;"
+			data-syno-id="syno_hddusb"
+			data-syno-icon="#syno_hddusb_icon#"
+			data-syno-title="Syno Volume USB"
+			data-syno-value="#syno_hddusb_free_percent#"
+			data-syno-colorlow="#syno_hddusb_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddusb_free_percent_colorhigh#"
+			data-syno-label="Syno Volume USB (% Libre)"
+			data-syno-cmdid="#syno_hddusb_free_percent_id#"
+			data-syno-tendance="#syno_hddusb_free_percent_tendance#"
+			data-syno-prefix="#syno_hddusb# ("
+			data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddusb_value#"
+			data-syno-collectdate="#syno_hddusb_collect#"></div>
+		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
+			data-syno-id="syno_hddesata"
+			data-syno-icon="#syno_hddesata_icon#"
+			data-syno-title="Syno Volume eSATA"
+			data-syno-value="#syno_hddesata_free_percent#"
+			data-syno-colorlow="#syno_hddesata_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddesata_free_percent_colorhigh#"
+			data-syno-label="Syno Volume eSATA (% Libre)"
+			data-syno-cmdid="#syno_hddesata_free_percent_id#"
+			data-syno-tendance="#syno_hddesata_free_percent_tendance#"
+			data-syno-prefix="#syno_hddesata# ("
+			data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddesata_value#"
+			data-syno-collectdate="#syno_hddesata_collect#"></div>
 		<div class="tooltips" style="display: #cpu_display#;">
 			<span
 				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
@@ -244,6 +299,8 @@
 				}
 			}
 
+
+
 			/**
 			 * Calculate color style based on thresholds
 			 * @param {number} val - Current value
@@ -623,20 +680,30 @@
 			}
 
 			/**
-			 * Initialize Synology volume display with percentage
+			 * Initialize Synology volume display with icon and percentage
 			 */
-			const initSynoVolume = (volumeId, value, low, high, label, cmdId, tendance, prefix, historyMin, historyAvg, historyMax) => {
+			const initSynoVolume = (volumeEl) => {
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-					if (!value || value === '' || value.startsWith('#')) return
 
-					const percentEl = widgetRoot.querySelector(`#${volumeId}_percent#id#`)
-					if (!percentEl) return
+					const { synoIcon: icon, synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
+						synoLabel: label, synoCmdid: cmdId, synoTendance: tendance, synoPrefix: prefix,
+						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
+						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
+					
+					// Si l'icône est un placeholder, ne pas afficher ce volume
+					if (!icon || icon === '' || icon.startsWith('#')) return
+					
+					// Si la valeur est un placeholder, ne pas afficher ce volume
+					if (!value || value === '' || value.startsWith('#')) return
 
 					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
-					percentEl.innerHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
+					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
+					
+					const tooltip = `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`
+					volumeEl.innerHTML = `<span title="${tooltip}" style="width:15px;max-width:15px;max-height:15px;">${icon}</span>${percentageHTML}`
 				} catch (e) {
-					console.error('[Monitoring] Error in initSynoVolume for', volumeId, ':', e)
+					console.error('[Monitoring] Error in initSynoVolume:', e)
 				}
 			}
 
@@ -730,26 +797,11 @@
 				initHDD()
 
 				// Synology volumes
-				initSynoVolume('syno_hddv2', '#syno_hddv2_free_percent#', '#syno_hddv2_free_percent_colorlow#', '#syno_hddv2_free_percent_colorhigh#', 
-					'Syno Volume 2 (% Libre)', '#syno_hddv2_free_percent_id#', '#syno_hddv2_free_percent_tendance#', '#syno_hddv2# (', 
-					'#syno_hddv2_free_percent_minHistory#', '#syno_hddv2_free_percent_averageHistory#', '#syno_hddv2_free_percent_maxHistory#')
-				initSynoVolume('syno_hddv3', '#syno_hddv3_free_percent#', '#syno_hddv3_free_percent_colorlow#', '#syno_hddv3_free_percent_colorhigh#', 
-					'Syno Volume 3 (% Libre)', '#syno_hddv3_free_percent_id#', '#syno_hddv3_free_percent_tendance#', '#syno_hddv3# (', 
-					'#syno_hddv3_free_percent_minHistory#', '#syno_hddv3_free_percent_averageHistory#', '#syno_hddv3_free_percent_maxHistory#')
-				initSynoVolume('syno_hddv4', '#syno_hddv4_free_percent#', '#syno_hddv4_free_percent_colorlow#', '#syno_hddv4_free_percent_colorhigh#', 
-					'Syno Volume 4 (% Libre)', '#syno_hddv4_free_percent_id#', '#syno_hddv4_free_percent_tendance#', '#syno_hddv4# (', 
-					'#syno_hddv4_free_percent_minHistory#', '#syno_hddv4_free_percent_averageHistory#', '#syno_hddv4_free_percent_maxHistory#')
-				initSynoVolume('syno_hddusb', '#syno_hddusb_free_percent#', '#syno_hddusb_free_percent_colorlow#', '#syno_hddusb_free_percent_colorhigh#', 
-					'Syno Volume USB (% Libre)', '#syno_hddusb_free_percent_id#', '#syno_hddusb_free_percent_tendance#', '#syno_hddusb# (', 
-					'#syno_hddusb_free_percent_minHistory#', '#syno_hddusb_free_percent_averageHistory#', '#syno_hddusb_free_percent_maxHistory#')
-				initSynoVolume('syno_hddesata', '#syno_hddesata_free_percent#', '#syno_hddesata_free_percent_colorlow#', '#syno_hddesata_free_percent_colorhigh#', 
-					'Syno Volume eSATA (% Libre)', '#syno_hddesata_free_percent_id#', '#syno_hddesata_free_percent_tendance#', '#syno_hddesata# (', 
-					'#syno_hddesata_free_percent_minHistory#', '#syno_hddesata_free_percent_averageHistory#', '#syno_hddesata_free_percent_maxHistory#')
-
-				// CPU with temperature
-				initCPU()
-
-				// Custom commands - generic initialization using data attributes
+			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+			// CPU with temperature
+			initCPU()
+
+			// Custom commands - generic initialization using data attributes
 				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
 			}
 		})()

From db3399d33e608ce678e10cf673df887c0a8f822b Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:39:33 +0100
Subject: [PATCH 10/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 9d74c2b5..bf1fc6e8 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -700,8 +700,15 @@
 					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
 					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
 					
-					const tooltip = `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`
-					volumeEl.innerHTML = `<span title="${tooltip}" style="width:15px;max-width:15px;max-height:15px;">${icon}</span>${percentageHTML}`
+				// Créer les éléments via DOM pour éviter les problèmes d'échappement
+				const iconSpan = document.createElement('span')
+				iconSpan.style.cssText = 'width:15px;max-width:15px;max-height:15px;'
+				iconSpan.innerHTML = icon
+				iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
+				
+				volumeEl.innerHTML = ''
+				volumeEl.appendChild(iconSpan)
+				volumeEl.insertAdjacentHTML('beforeend', percentageHTML)
 				} catch (e) {
 					console.error('[Monitoring] Error in initSynoVolume:', e)
 				}

From 7237205842e223064adb99d8c51f08201a863bd5 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:46:14 +0100
Subject: [PATCH 11/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 66 ++++++++++++++-----------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index bf1fc6e8..530be478 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -153,7 +153,6 @@
 		</div>
 		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;"
 			data-syno-id="syno_hddv2"
-			data-syno-icon="#syno_hddv2_icon#"
 			data-syno-title="Syno Volume 2"
 			data-syno-value="#syno_hddv2_free_percent#"
 			data-syno-colorlow="#syno_hddv2_free_percent_colorlow#"
@@ -166,10 +165,12 @@
 			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
 			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#"
 			data-syno-valuedate="#syno_hddv2_value#"
-			data-syno-collectdate="#syno_hddv2_collect#"></div>
+			data-syno-collectdate="#syno_hddv2_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
 		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;"
 			data-syno-id="syno_hddv3"
-			data-syno-icon="#syno_hddv3_icon#"
 			data-syno-title="Syno Volume 3"
 			data-syno-value="#syno_hddv3_free_percent#"
 			data-syno-colorlow="#syno_hddv3_free_percent_colorlow#"
@@ -182,10 +183,12 @@
 			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
 			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#"
 			data-syno-valuedate="#syno_hddv3_value#"
-			data-syno-collectdate="#syno_hddv3_collect#"></div>
+			data-syno-collectdate="#syno_hddv3_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
 		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;"
 			data-syno-id="syno_hddv4"
-			data-syno-icon="#syno_hddv4_icon#"
 			data-syno-title="Syno Volume 4"
 			data-syno-value="#syno_hddv4_free_percent#"
 			data-syno-colorlow="#syno_hddv4_free_percent_colorlow#"
@@ -198,10 +201,12 @@
 			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
 			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#"
 			data-syno-valuedate="#syno_hddv4_value#"
-			data-syno-collectdate="#syno_hddv4_collect#"></div>
+			data-syno-collectdate="#syno_hddv4_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
 		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;"
 			data-syno-id="syno_hddusb"
-			data-syno-icon="#syno_hddusb_icon#"
 			data-syno-title="Syno Volume USB"
 			data-syno-value="#syno_hddusb_free_percent#"
 			data-syno-colorlow="#syno_hddusb_free_percent_colorlow#"
@@ -214,10 +219,12 @@
 			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
 			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#"
 			data-syno-valuedate="#syno_hddusb_value#"
-			data-syno-collectdate="#syno_hddusb_collect#"></div>
+			data-syno-collectdate="#syno_hddusb_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
 		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
 			data-syno-id="syno_hddesata"
-			data-syno-icon="#syno_hddesata_icon#"
 			data-syno-title="Syno Volume eSATA"
 			data-syno-value="#syno_hddesata_free_percent#"
 			data-syno-colorlow="#syno_hddesata_free_percent_colorlow#"
@@ -230,7 +237,10 @@
 			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
 			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#"
 			data-syno-valuedate="#syno_hddesata_value#"
-			data-syno-collectdate="#syno_hddesata_collect#"></div>
+			data-syno-collectdate="#syno_hddesata_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
 			<span
 				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
@@ -686,37 +696,37 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const { synoIcon: icon, synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
+					const { synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
 						synoLabel: label, synoCmdid: cmdId, synoTendance: tendance, synoPrefix: prefix,
 						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
 						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
 					
-					// Si l'icône est un placeholder, ne pas afficher ce volume
-					if (!icon || icon === '' || icon.startsWith('#')) return
-					
 					// Si la valeur est un placeholder, ne pas afficher ce volume
 					if (!value || value === '' || value.startsWith('#')) return
 
+					// Récupérer l'icône depuis le premier span
+					const iconSpan = volumeEl.querySelector('span:first-child')
+					if (!iconSpan) return
+					
+					const icon = iconSpan.innerHTML.trim()
+					// Si l'icône est un placeholder, ne pas afficher ce volume
+					if (!icon || icon === '' || icon.startsWith('#')) return
+
 					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
 					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
 					
-				// Créer les éléments via DOM pour éviter les problèmes d'échappement
-				const iconSpan = document.createElement('span')
-				iconSpan.style.cssText = 'width:15px;max-width:15px;max-height:15px;'
-				iconSpan.innerHTML = icon
-				iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
-				
-				volumeEl.innerHTML = ''
-				volumeEl.appendChild(iconSpan)
-				volumeEl.insertAdjacentHTML('beforeend', percentageHTML)
+					// Ajouter le tooltip à l'icône
+					iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
+					
+					// Ajouter le pourcentage dans le deuxième span
+					const percentSpan = volumeEl.querySelector('.syno-percent')
+					if (percentSpan) {
+						percentSpan.innerHTML = percentageHTML
+					}
 				} catch (e) {
-					console.error('[Monitoring] Error in initSynoVolume:', e)
+					console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
 				}
 			}
-
-			/**
-			 * Initialize CPU display with optional temperature
-			 */
 			const initCPU = () => {
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return

From 9f1c77aec527b9af8664540cd6ca6052e9e760dc Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:56:14 +0100
Subject: [PATCH 12/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 530be478..21caf75e 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -702,16 +702,21 @@
 						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
 					
 					// Si la valeur est un placeholder, ne pas afficher ce volume
-					if (!value || value === '' || value.startsWith('#')) return
-
-					// Récupérer l'icône depuis le premier span
-					const iconSpan = volumeEl.querySelector('span:first-child')
-					if (!iconSpan) return
-					
-					const icon = iconSpan.innerHTML.trim()
-					// Si l'icône est un placeholder, ne pas afficher ce volume
-					if (!icon || icon === '' || icon.startsWith('#')) return
+				if (!value || value === '' || value.startsWith('#')) {
+					volumeEl.style.display = 'none'
+					return
+				}
 
+				// Récupérer l'icône depuis le premier span
+				const iconSpan = volumeEl.querySelector('span:first-child')
+				if (!iconSpan) return
+				
+				const icon = iconSpan.innerHTML.trim()
+				// Si l'icône est un placeholder, ne pas afficher ce volume
+				if (!icon || icon === '' || icon.startsWith('#')) {
+					volumeEl.style.display = 'none'
+					return
+				}
 					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
 					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
 					

From 3bc33ba8d4c6dba479b937c3df1aa19fd2755c8a Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 00:04:36 +0100
Subject: [PATCH 13/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 34 ++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 21caf75e..47818e02 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -701,26 +701,26 @@
 						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
 						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
 					
-					// Si la valeur est un placeholder, ne pas afficher ce volume
-				if (!value || value === '' || value.startsWith('#')) {
-					volumeEl.style.display = 'none'
-					return
-				}
+					// Vérifier d'abord la valeur (pas d'opération DOM si invalide)
+					if (!value || value === '' || value.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
 
-				// Récupérer l'icône depuis le premier span
-				const iconSpan = volumeEl.querySelector('span:first-child')
-				if (!iconSpan) return
-				
-				const icon = iconSpan.innerHTML.trim()
-				// Si l'icône est un placeholder, ne pas afficher ce volume
-				if (!icon || icon === '' || icon.startsWith('#')) {
-					volumeEl.style.display = 'none'
-					return
-				}
+					// Récupérer l'icône uniquement si value est valide
+					const iconSpan = volumeEl.querySelector('span:first-child')
+					const icon = iconSpan?.innerHTML.trim()
+					
+					// Vérifier l'icône
+					if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
+
+					// Construire le contenu (tout est valide)
 					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
 					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
-					
-					// Ajouter le tooltip à l'icône
+				
 					iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
 					
 					// Ajouter le pourcentage dans le deuxième span

From fd704262e85023d4c744d70a133db03b9fceb5d8 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 08:20:41 +0100
Subject: [PATCH 14/24] use specific template for Synology

---
 core/class/Monitoring.class.php         |   4 +-
 core/template/dashboard/Monitoring.html | 133 ----
 core/template/dashboard/Synology.html   | 831 ++++++++++++++++++++++++
 3 files changed, 834 insertions(+), 134 deletions(-)
 create mode 100644 core/template/dashboard/Synology.html

diff --git a/core/class/Monitoring.class.php b/core/class/Monitoring.class.php
index 23ff2898..ddd10f75 100644
--- a/core/class/Monitoring.class.php
+++ b/core/class/Monitoring.class.php
@@ -2327,9 +2327,11 @@ public function toHtml($_version = 'dashboard') {
 			$replace['#multi_network_cards#'] = template_replace($replace, $multi_network_html);
 		}
 
-		// Use a specific template for AsusWRT and default for others
+		// Use specific templates for AsusWRT, Synology, and default for others
 		if ($this->getConfiguration('asuswrt') == '1') {
 			$template = 'AsusWRT';
+		} elseif ($this->getConfiguration('synology') == '1') {
+			$template = 'Synology';
 		} else {
 			$template = 'Monitoring';
 		}
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 47818e02..23b3ee0f 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -151,96 +151,6 @@
 				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;"
-			data-syno-id="syno_hddv2"
-			data-syno-title="Syno Volume 2"
-			data-syno-value="#syno_hddv2_free_percent#"
-			data-syno-colorlow="#syno_hddv2_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv2_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 2 (% Libre)"
-			data-syno-cmdid="#syno_hddv2_free_percent_id#"
-			data-syno-tendance="#syno_hddv2_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv2# ("
-			data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv2_value#"
-			data-syno-collectdate="#syno_hddv2_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;"
-			data-syno-id="syno_hddv3"
-			data-syno-title="Syno Volume 3"
-			data-syno-value="#syno_hddv3_free_percent#"
-			data-syno-colorlow="#syno_hddv3_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv3_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 3 (% Libre)"
-			data-syno-cmdid="#syno_hddv3_free_percent_id#"
-			data-syno-tendance="#syno_hddv3_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv3# ("
-			data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv3_value#"
-			data-syno-collectdate="#syno_hddv3_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;"
-			data-syno-id="syno_hddv4"
-			data-syno-title="Syno Volume 4"
-			data-syno-value="#syno_hddv4_free_percent#"
-			data-syno-colorlow="#syno_hddv4_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv4_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 4 (% Libre)"
-			data-syno-cmdid="#syno_hddv4_free_percent_id#"
-			data-syno-tendance="#syno_hddv4_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv4# ("
-			data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv4_value#"
-			data-syno-collectdate="#syno_hddv4_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;"
-			data-syno-id="syno_hddusb"
-			data-syno-title="Syno Volume USB"
-			data-syno-value="#syno_hddusb_free_percent#"
-			data-syno-colorlow="#syno_hddusb_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddusb_free_percent_colorhigh#"
-			data-syno-label="Syno Volume USB (% Libre)"
-			data-syno-cmdid="#syno_hddusb_free_percent_id#"
-			data-syno-tendance="#syno_hddusb_free_percent_tendance#"
-			data-syno-prefix="#syno_hddusb# ("
-			data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddusb_value#"
-			data-syno-collectdate="#syno_hddusb_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
-			data-syno-id="syno_hddesata"
-			data-syno-title="Syno Volume eSATA"
-			data-syno-value="#syno_hddesata_free_percent#"
-			data-syno-colorlow="#syno_hddesata_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddesata_free_percent_colorhigh#"
-			data-syno-label="Syno Volume eSATA (% Libre)"
-			data-syno-cmdid="#syno_hddesata_free_percent_id#"
-			data-syno-tendance="#syno_hddesata_free_percent_tendance#"
-			data-syno-prefix="#syno_hddesata# ("
-			data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddesata_value#"
-			data-syno-collectdate="#syno_hddesata_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
 			<span
 				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
@@ -689,49 +599,6 @@
 				}
 			}
 
-			/**
-			 * Initialize Synology volume display with icon and percentage
-			 */
-			const initSynoVolume = (volumeEl) => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const { synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
-						synoLabel: label, synoCmdid: cmdId, synoTendance: tendance, synoPrefix: prefix,
-						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
-						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
-					
-					// Vérifier d'abord la valeur (pas d'opération DOM si invalide)
-					if (!value || value === '' || value.startsWith('#')) {
-						volumeEl.style.display = 'none'
-						return
-					}
-
-					// Récupérer l'icône uniquement si value est valide
-					const iconSpan = volumeEl.querySelector('span:first-child')
-					const icon = iconSpan?.innerHTML.trim()
-					
-					// Vérifier l'icône
-					if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
-						volumeEl.style.display = 'none'
-						return
-					}
-
-					// Construire le contenu (tout est valide)
-					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
-					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
-				
-					iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
-					
-					// Ajouter le pourcentage dans le deuxième span
-					const percentSpan = volumeEl.querySelector('.syno-percent')
-					if (percentSpan) {
-						percentSpan.innerHTML = percentageHTML
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
-				}
-			}
 			const initCPU = () => {
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
diff --git a/core/template/dashboard/Synology.html b/core/template/dashboard/Synology.html
new file mode 100644
index 00000000..4952fed7
--- /dev/null
+++ b/core/template/dashboard/Synology.html
@@ -0,0 +1,831 @@
+<div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#"
+	data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
+	data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
+	style="width: #width#;height: #height#;#style#;">
+	<style>
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
+			font-size: 12px !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
+			display: none !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-flex {
+			display: flex;
+			justify-content: space-between;
+			padding-left: 5px !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left {
+			display: flex;
+			flex: 0 1 auto;
+			float: left;
+			justify-content: flex-start;
+			align-items: center;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
+			padding-right: 3px;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name {
+			overflow: auto;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center {
+			display: flex;
+			flex: 1 1 auto;
+			justify-content: center;
+			text-align: center;
+			padding-left: 5px;
+			padding-right: 5px;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
+			overflow: hidden !important;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right {
+			display: flex;
+			flex: 0 1 auto;
+			float: right;
+			justify-content: flex-end;
+			align-items: center;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right .cmd.refresh {
+			margin-top: unset !important;
+			padding-right: 5px;
+			color: inherit !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
+			display: block;
+			text-align: left;
+			padding-left: 5px;
+			overflow: auto;
+			white-space: nowrap;
+			width: 100%;
+			height: calc(100% - 24px);
+			box-sizing: border-box;
+		}
+	</style>
+	<div class="widget-name monitor-name-flex">
+		<div class="monitor-name-left">
+			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
+			<span id="iconCron#id#" class="cmd monitor-btn"></span>
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+				<i class="cmd monitor-btn fas fa-redo"></i>
+			</span>
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+				<i class="cmd monitor-btn fas fa-power-off"></i>
+			</span>
+		</div>
+		<div class="widget-name monitor-name-center">
+			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
+			<a href="#eqLink#" class="reportModeHidden">#name_display# <span
+					class="object_name">#object_name#</span></a>
+		</div>
+		<div class="monitor-name-right">
+			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
+				<i class="fas fa-sync"></i>
+			</span>
+		</div>
+	</div>
+	<div class="monitor-cmds">
+		<div class="tooltips" style="display: #distri_name_display#;">
+			<span
+				title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span>#distri_name#</span>
+		</div>
+		<div class="tooltips" style="display: #uptime_display#;">
+			<span
+				title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span id="uptime#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #load_avg_display#;">
+			<span
+				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #memory_display#;">
+			<span
+				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span id="memory_available_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #swap_display#;">
+			<span
+				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span id="swap_free_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_infos_display#;">
+			<span
+				title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span id="network_infos#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_display#;">
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span id="network#id#"></span>
+		</div>
+		<!-- Cartes réseau supplémentaires -->
+		#multi_network_cards#
+		<div class="tooltips" style="display: #hdd_display#;">
+			<span
+				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span id="hdd#id#"></span>
+		</div>
+		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;"
+			data-syno-id="syno_hddv2"
+			data-syno-title="Syno Volume 2"
+			data-syno-value="#syno_hddv2_free_percent#"
+			data-syno-colorlow="#syno_hddv2_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv2_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 2 (% Libre)"
+			data-syno-cmdid="#syno_hddv2_free_percent_id#"
+			data-syno-tendance="#syno_hddv2_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv2# ("
+			data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv2_value#"
+			data-syno-collectdate="#syno_hddv2_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;"
+			data-syno-id="syno_hddv3"
+			data-syno-title="Syno Volume 3"
+			data-syno-value="#syno_hddv3_free_percent#"
+			data-syno-colorlow="#syno_hddv3_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv3_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 3 (% Libre)"
+			data-syno-cmdid="#syno_hddv3_free_percent_id#"
+			data-syno-tendance="#syno_hddv3_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv3# ("
+			data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv3_value#"
+			data-syno-collectdate="#syno_hddv3_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;"
+			data-syno-id="syno_hddv4"
+			data-syno-title="Syno Volume 4"
+			data-syno-value="#syno_hddv4_free_percent#"
+			data-syno-colorlow="#syno_hddv4_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddv4_free_percent_colorhigh#"
+			data-syno-label="Syno Volume 4 (% Libre)"
+			data-syno-cmdid="#syno_hddv4_free_percent_id#"
+			data-syno-tendance="#syno_hddv4_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv4# ("
+			data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddv4_value#"
+			data-syno-collectdate="#syno_hddv4_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;"
+			data-syno-id="syno_hddusb"
+			data-syno-title="Syno Volume USB"
+			data-syno-value="#syno_hddusb_free_percent#"
+			data-syno-colorlow="#syno_hddusb_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddusb_free_percent_colorhigh#"
+			data-syno-label="Syno Volume USB (% Libre)"
+			data-syno-cmdid="#syno_hddusb_free_percent_id#"
+			data-syno-tendance="#syno_hddusb_free_percent_tendance#"
+			data-syno-prefix="#syno_hddusb# ("
+			data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddusb_value#"
+			data-syno-collectdate="#syno_hddusb_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
+			data-syno-id="syno_hddesata"
+			data-syno-title="Syno Volume eSATA"
+			data-syno-value="#syno_hddesata_free_percent#"
+			data-syno-colorlow="#syno_hddesata_free_percent_colorlow#"
+			data-syno-colorhigh="#syno_hddesata_free_percent_colorhigh#"
+			data-syno-label="Syno Volume eSATA (% Libre)"
+			data-syno-cmdid="#syno_hddesata_free_percent_id#"
+			data-syno-tendance="#syno_hddesata_free_percent_tendance#"
+			data-syno-prefix="#syno_hddesata# ("
+			data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#"
+			data-syno-valuedate="#syno_hddesata_value#"
+			data-syno-collectdate="#syno_hddesata_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div class="tooltips" style="display: #cpu_display#;">
+			<span
+				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
+			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
+			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+			<span id="perso1_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
+			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
+			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+			<span id="perso2_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
+			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
+			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+			<span id="perso3_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
+			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
+			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+			<span id="perso4_unite#id#"></span>
+		</div>
+	</div>
+	#divGraphInfo#
+	<script>
+		(() => {
+			'use strict'
+
+			// Get reference to this specific widget container
+			const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Safely parse JSON from data attribute
+			 * @param {string} jsonString - JSON string to parse
+			 * @param {object} fallback - Fallback value if parsing fails
+			 * @returns {object} Parsed object or fallback
+			 */
+			const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
+				if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+				try {
+					return JSON.parse(jsonString)
+				} catch (e) {
+					console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
+					return fallback
+				}
+			}
+
+
+
+			/**
+			 * Calculate color style based on thresholds
+			 * @param {number} val - Current value
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Color style string
+			 */
+			const getColorStyle = (val, low, high, reversed = false) => {
+				if (reversed) {
+					// Reversed thresholds: higher percentage = better (green)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal thresholds: lower = green, higher = red
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
+			}
+
+			/**
+			 * Build HTML for threshold-based value with color
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
+			}
+
+			/**
+			 * Build HTML for percentage-based value with color and unit
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
+			 * @param {string} unit - Unit (e.g., "%")
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
+				const unitSpan = `<span>${unit}${tendanceStr}</span>`
+
+				// Only add prefix if it exists and is not a placeholder
+				if (prefix && !prefix.startsWith('#')) {
+					return `<span>${prefix}${valueSpan}${unitSpan})</span>`
+				}
+				return `${valueSpan}${unitSpan}`
+			}
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconSSH:', e)
+				}
+			}
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? 'Custom' : 'Default'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconCron:', e)
+				}
+			}
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with confirmation dialog
+			 */
+			const initRebootButton = () => {
+				try {
+					const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+					rebootBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
+							message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Redémarrer', className: 'warning' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+							}
+						})
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initRebootButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Poweroff button with confirmation dialog
+			 */
+			const initPoweroffButton = () => {
+				try {
+					const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
+					poweroffBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
+							message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Eteindre', className: 'danger' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+							}
+						})
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initPoweroffButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Refresh button
+			 */
+			const initRefreshButton = () => {
+				try {
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
+
+					if ('#refresh_id#' !== '') {
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						refreshBtn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initRefreshButton:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initUptime:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetworkInfos:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network Traffic display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (networkEl) {
+						const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
+						networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetwork:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With Thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+							'Charge Système (1min)', '#load_avg_1mn_id#',
+							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+							'#load_avg_1mn_tendance#'
+						)
+						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+							'Charge Système (5min)', '#load_avg_5mn_id#',
+							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+							'#load_avg_5mn_tendance#'
+						)
+						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html = buildThresholdHTML(
+							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+							'Charge Système (15min)', '#load_avg_15mn_id#',
+							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+							'#load_avg_15mn_tendance#'
+						)
+						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initLoadAverage:', e)
+				}
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						memoryEl.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					memoryEl.innerHTML = buildPercentageHTML(
+						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+						'#memory_available_percent_tendance#', '#memory# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initMemory:', e)
+				}
+			}
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						swapEl.innerHTML = '<span></span>'
+						return
+					}
+
+					swapEl.innerHTML = buildPercentageHTML(
+						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+						'#swap_free_percent_tendance#', '#swap# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initSwap:', e)
+				}
+			}
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						hddEl.innerHTML = '<span></span>'
+						return
+					}
+
+					hddEl.innerHTML = buildPercentageHTML(
+						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initHDD:', e)
+				}
+			}
+
+			/**
+			 * Initialize Synology volume display with icon and percentage
+			 */
+			const initSynoVolume = (volumeEl) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const { synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
+						synoLabel: label, synoCmdid: cmdId, synoTendance: tendance, synoPrefix: prefix,
+						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
+						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
+					
+					// Vérifier d'abord la valeur (pas d'opération DOM si invalide)
+					if (!value || value === '' || value.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
+
+					// Récupérer l'icône uniquement si value est valide
+					const iconSpan = volumeEl.querySelector('span:first-child')
+					const icon = iconSpan?.innerHTML.trim()
+					
+					// Vérifier l'icône
+					if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
+
+					// Construire le contenu (tout est valide)
+					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
+					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
+				
+					iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
+					
+					// Ajouter le pourcentage dans le deuxième span
+					const percentSpan = volumeEl.querySelector('.syno-percent')
+					if (percentSpan) {
+						percentSpan.innerHTML = percentageHTML
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
+				}
+			}
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					if (!cpuEl) return
+
+					if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+						if (!tempEl) return
+
+						const temp = parseFloat('#cpu_temp#')
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+						const color = getColorStyle(temp, low, high, false)
+
+						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const history = safeJSONParse(dataset.persoHistory)
+					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+					const color = getColorStyle(val, low, high, false)
+
+					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+
+				// Button handlers
+				initRebootButton()
+				initPoweroffButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// Synology volumes
+			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+			// CPU with temperature
+			initCPU()
+
+			// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
+	</script>
+</div>

From 4896dcbf326b339504f9fa7eb62d36febf0dd8c3 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 08:22:33 +0100
Subject: [PATCH 15/24] Update Monitoring.html

---
 core/template/dashboard/Monitoring.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 23b3ee0f..de680525 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -685,12 +685,10 @@
 				initSwap()
 				initHDD()
 
-				// Synology volumes
-			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-			// CPU with temperature
-			initCPU()
+				// CPU with temperature
+				initCPU()
 
-			// Custom commands - generic initialization using data attributes
+				// Custom commands - generic initialization using data attributes
 				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
 			}
 		})()

From 1b7d16dcf13f54da47f3ea29316b21620bc50369 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 08:42:25 +0100
Subject: [PATCH 16/24] update templates

---
 core/template/dashboard/Monitoring.html |    2 +-
 core/template/dashboard/Synology.html   | 1632 +++++++++++------------
 2 files changed, 803 insertions(+), 831 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index de680525..ecc06866 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -298,7 +298,7 @@
 
 				// Only add prefix if it exists and is not a placeholder
 				if (prefix && !prefix.startsWith('#')) {
-					return `<span>${prefix}${valueSpan}${unitSpan})</span>`
+					return `${prefix}${valueSpan}${unitSpan})`
 				}
 				return `${valueSpan}${unitSpan}`
 			}
diff --git a/core/template/dashboard/Synology.html b/core/template/dashboard/Synology.html
index 4952fed7..43a3c70a 100644
--- a/core/template/dashboard/Synology.html
+++ b/core/template/dashboard/Synology.html
@@ -1,831 +1,803 @@
 <div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#"
-	data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
-	data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
-	style="width: #width#;height: #height#;#style#;">
-	<style>
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
-			font-size: 12px !important;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
-			display: none !important;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-flex {
-			display: flex;
-			justify-content: space-between;
-			padding-left: 5px !important;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left {
-			display: flex;
-			flex: 0 1 auto;
-			float: left;
-			justify-content: flex-start;
-			align-items: center;
-			box-sizing: border-box;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
-			padding-right: 3px;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name {
-			overflow: auto;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center {
-			display: flex;
-			flex: 1 1 auto;
-			justify-content: center;
-			text-align: center;
-			padding-left: 5px;
-			padding-right: 5px;
-			box-sizing: border-box;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
-			overflow: hidden !important;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right {
-			display: flex;
-			flex: 0 1 auto;
-			float: right;
-			justify-content: flex-end;
-			align-items: center;
-			box-sizing: border-box;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right .cmd.refresh {
-			margin-top: unset !important;
-			padding-right: 5px;
-			color: inherit !important;
-		}
-
-		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
-			display: block;
-			text-align: left;
-			padding-left: 5px;
-			overflow: auto;
-			white-space: nowrap;
-			width: 100%;
-			height: calc(100% - 24px);
-			box-sizing: border-box;
-		}
-	</style>
-	<div class="widget-name monitor-name-flex">
-		<div class="monitor-name-left">
-			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
-			<span id="iconCron#id#" class="cmd monitor-btn"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
-				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
-				<i class="cmd monitor-btn fas fa-redo"></i>
-			</span>
-			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
-				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
-				<i class="cmd monitor-btn fas fa-power-off"></i>
-			</span>
-		</div>
-		<div class="widget-name monitor-name-center">
-			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
-			<a href="#eqLink#" class="reportModeHidden">#name_display# <span
-					class="object_name">#object_name#</span></a>
-		</div>
-		<div class="monitor-name-right">
-			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
-				<i class="fas fa-sync"></i>
-			</span>
-		</div>
-	</div>
-	<div class="monitor-cmds">
-		<div class="tooltips" style="display: #distri_name_display#;">
-			<span
-				title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
-			<span>#distri_name#</span>
-		</div>
-		<div class="tooltips" style="display: #uptime_display#;">
-			<span
-				title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
-			<span id="uptime#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #load_avg_display#;">
-			<span
-				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
-			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #memory_display#;">
-			<span
-				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
-			<span id="memory_available_percent#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #swap_display#;">
-			<span
-				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
-			<span id="swap_free_percent#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #network_infos_display#;">
-			<span
-				title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
-			<span id="network_infos#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #network_display#;">
-			<span
-				title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
-			<span id="network#id#"></span>
-		</div>
-		<!-- Cartes réseau supplémentaires -->
-		#multi_network_cards#
-		<div class="tooltips" style="display: #hdd_display#;">
-			<span
-				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
-			<span id="hdd#id#"></span>
-		</div>
-		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;"
-			data-syno-id="syno_hddv2"
-			data-syno-title="Syno Volume 2"
-			data-syno-value="#syno_hddv2_free_percent#"
-			data-syno-colorlow="#syno_hddv2_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv2_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 2 (% Libre)"
-			data-syno-cmdid="#syno_hddv2_free_percent_id#"
-			data-syno-tendance="#syno_hddv2_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv2# ("
-			data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv2_value#"
-			data-syno-collectdate="#syno_hddv2_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;"
-			data-syno-id="syno_hddv3"
-			data-syno-title="Syno Volume 3"
-			data-syno-value="#syno_hddv3_free_percent#"
-			data-syno-colorlow="#syno_hddv3_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv3_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 3 (% Libre)"
-			data-syno-cmdid="#syno_hddv3_free_percent_id#"
-			data-syno-tendance="#syno_hddv3_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv3# ("
-			data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv3_value#"
-			data-syno-collectdate="#syno_hddv3_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;"
-			data-syno-id="syno_hddv4"
-			data-syno-title="Syno Volume 4"
-			data-syno-value="#syno_hddv4_free_percent#"
-			data-syno-colorlow="#syno_hddv4_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddv4_free_percent_colorhigh#"
-			data-syno-label="Syno Volume 4 (% Libre)"
-			data-syno-cmdid="#syno_hddv4_free_percent_id#"
-			data-syno-tendance="#syno_hddv4_free_percent_tendance#"
-			data-syno-prefix="#syno_hddv4# ("
-			data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddv4_value#"
-			data-syno-collectdate="#syno_hddv4_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;"
-			data-syno-id="syno_hddusb"
-			data-syno-title="Syno Volume USB"
-			data-syno-value="#syno_hddusb_free_percent#"
-			data-syno-colorlow="#syno_hddusb_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddusb_free_percent_colorhigh#"
-			data-syno-label="Syno Volume USB (% Libre)"
-			data-syno-cmdid="#syno_hddusb_free_percent_id#"
-			data-syno-tendance="#syno_hddusb_free_percent_tendance#"
-			data-syno-prefix="#syno_hddusb# ("
-			data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddusb_value#"
-			data-syno-collectdate="#syno_hddusb_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
-			data-syno-id="syno_hddesata"
-			data-syno-title="Syno Volume eSATA"
-			data-syno-value="#syno_hddesata_free_percent#"
-			data-syno-colorlow="#syno_hddesata_free_percent_colorlow#"
-			data-syno-colorhigh="#syno_hddesata_free_percent_colorhigh#"
-			data-syno-label="Syno Volume eSATA (% Libre)"
-			data-syno-cmdid="#syno_hddesata_free_percent_id#"
-			data-syno-tendance="#syno_hddesata_free_percent_tendance#"
-			data-syno-prefix="#syno_hddesata# ("
-			data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
-			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
-			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#"
-			data-syno-valuedate="#syno_hddesata_value#"
-			data-syno-collectdate="#syno_hddesata_collect#">
-			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
-			<span class="syno-percent"></span>
-		</div>
-		<div class="tooltips" style="display: #cpu_display#;">
-			<span
-				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
-			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
-			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
-			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
-			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
-			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
-			<span id="perso1_unite#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
-			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
-			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
-			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
-			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
-			<span id="perso2_unite#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
-			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
-			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
-			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
-			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
-			<span id="perso3_unite#id#"></span>
-		</div>
-		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
-			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
-			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
-			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
-			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
-				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
-			<span id="perso4_unite#id#"></span>
-		</div>
-	</div>
-	#divGraphInfo#
-	<script>
-		(() => {
-			'use strict'
-
-			// Get reference to this specific widget container
-			const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
-			if (!widgetRoot) return
-
-			// ========================================
-			// === UTILITY FUNCTIONS ===
-			// ========================================
-
-			/**
-			 * Safely parse JSON from data attribute
-			 * @param {string} jsonString - JSON string to parse
-			 * @param {object} fallback - Fallback value if parsing fails
-			 * @returns {object} Parsed object or fallback
-			 */
-			const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
-				if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
-				try {
-					return JSON.parse(jsonString)
-				} catch (e) {
-					console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
-					return fallback
-				}
-			}
-
-
-
-			/**
-			 * Calculate color style based on thresholds
-			 * @param {number} val - Current value
-			 * @param {number} low - Low threshold
-			 * @param {number} high - High threshold
-			 * @param {boolean} reversed - If true, higher values are better (green)
-			 * @returns {string} Color style string
-			 */
-			const getColorStyle = (val, low, high, reversed = false) => {
-				if (reversed) {
-					// Reversed thresholds: higher percentage = better (green)
-					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-				} else {
-					// Normal thresholds: lower = green, higher = red
-					if (val < low) return ' style="color: var(--al-success-color) !important;"'
-					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
-				}
-				return ''
-			}
-
-			/**
-			 * Build HTML for threshold-based value with color
-			 * @param {string} value - Value to display
-			 * @param {string} lowThreshold - Low threshold value
-			 * @param {string} highThreshold - High threshold value
-			 * @param {string} label - Label for tooltip
-			 * @param {string} cmdId - Command ID
-			 * @param {object} history - History stats {min, avg, max}
-			 * @param {string} tendance - Trend indicator
-			 * @param {boolean} reversed - If true, higher values are better
-			 * @returns {string} HTML string
-			 */
-			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
-
-				const val = parseFloat(value)
-				const low = parseFloat(lowThreshold)
-				const high = parseFloat(highThreshold)
-				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-				const color = getColorStyle(val, low, high, reversed)
-				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
-
-				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
-			}
-
-			/**
-			 * Build HTML for percentage-based value with color and unit
-			 * @param {string} value - Value to display
-			 * @param {string} lowThreshold - Low threshold value
-			 * @param {string} highThreshold - High threshold value
-			 * @param {string} label - Label for tooltip
-			 * @param {string} cmdId - Command ID
-			 * @param {object} history - History stats {min, avg, max}
-			 * @param {string} tendance - Trend indicator
-			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
-			 * @param {string} unit - Unit (e.g., "%")
-			 * @param {boolean} reversed - If true, higher values are better
-			 * @returns {string} HTML string
-			 */
-			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
-
-				const val = parseFloat(value)
-				const low = parseFloat(lowThreshold)
-				const high = parseFloat(highThreshold)
-				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-				const color = getColorStyle(val, low, high, reversed)
-				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
-
-				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-				const unitSpan = `<span>${unit}${tendanceStr}</span>`
-
-				// Only add prefix if it exists and is not a placeholder
-				if (prefix && !prefix.startsWith('#')) {
-					return `<span>${prefix}${valueSpan}${unitSpan})</span>`
-				}
-				return `${valueSpan}${unitSpan}`
-			}
-
-			// ========================================
-			// === ICON HANDLERS ===
-			// ========================================
-
-			/**
-			 * Initialize SSH connection status icon
-			 */
-			const initIconSSH = () => {
-				try {
-					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
-					if (!iconSSH) return
-
-					if ('#cnx_ssh#' === 'OK') {
-						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
-					} else if ('#cnx_ssh#' === 'KO') {
-						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initIconSSH:', e)
-				}
-			}
-
-			/**
-			 * Initialize Cron status icon
-			 */
-			const initIconCron = () => {
-				try {
-					const iconCron = widgetRoot.querySelector('#iconCron#id#')
-					if (!iconCron) return
-
-					const isOn = '#cron_status#' === '1'
-					const isCustom = '#cron_status_custom#' === '1'
-					const display = '#cron_status_display#'
-
-					const icon = isOn ? 'play-circle' : 'pause-circle'
-					const label = isOn ? 'ON' : 'OFF'
-					const customLabel = isCustom ? 'Custom' : 'Default'
-					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-
-					iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
-				} catch (e) {
-					console.error('[Monitoring] Error in initIconCron:', e)
-				}
-			}
-
-			// ========================================
-			// === BUTTON HANDLERS ===
-			// ========================================
-
-			/**
-			 * Initialize Reboot button with confirmation dialog
-			 */
-			const initRebootButton = () => {
-				try {
-					const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-					rebootBtn?.addEventListener('click', () => {
-						jeeDialog.confirm({
-							title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
-							message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
-							buttons: {
-								confirm: { label: 'Redémarrer', className: 'warning' },
-								cancel: { label: 'Annuler', className: 'info' }
-							},
-							callback: (result) => {
-								if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-							}
-						})
-					})
-				} catch (e) {
-					console.error('[Monitoring] Error in initRebootButton:', e)
-				}
-			}
-
-			/**
-			 * Initialize Poweroff button with confirmation dialog
-			 */
-			const initPoweroffButton = () => {
-				try {
-					const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
-					poweroffBtn?.addEventListener('click', () => {
-						jeeDialog.confirm({
-							title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
-							message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
-							buttons: {
-								confirm: { label: 'Eteindre', className: 'danger' },
-								cancel: { label: 'Annuler', className: 'info' }
-							},
-							callback: (result) => {
-								if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
-							}
-						})
-					})
-				} catch (e) {
-					console.error('[Monitoring] Error in initPoweroffButton:', e)
-				}
-			}
-
-			/**
-			 * Initialize Refresh button
-			 */
-			const initRefreshButton = () => {
-				try {
-					const refreshBtn = widgetRoot.querySelector('.refresh')
-					if (!refreshBtn) return
-
-					if ('#refresh_id#' !== '') {
-						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-					} else {
-						refreshBtn.remove()
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initRefreshButton:', e)
-				}
-			}
-
-			// ========================================
-			// === VALUE DISPLAYS - Simple ===
-			// ========================================
-
-			/**
-			 * Initialize Uptime display
-			 */
-			const initUptime = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
-				} catch (e) {
-					console.error('[Monitoring] Error in initUptime:', e)
-				}
-			}
-
-			/**
-			 * Initialize Network Infos display
-			 */
-			const initNetworkInfos = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-				} catch (e) {
-					console.error('[Monitoring] Error in initNetworkInfos:', e)
-				}
-			}
-
-			/**
-			 * Initialize Network Traffic display
-			 */
-			const initNetwork = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const networkEl = widgetRoot.querySelector('#network#id#')
-					if (networkEl) {
-						const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
-						networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initNetwork:', e)
-				}
-			}
-
-			// ========================================
-			// === VALUE DISPLAYS - With Thresholds ===
-			// ========================================
-
-			/**
-			 * Initialize Load Average displays (1mn, 5mn, 15mn)
-			 */
-			const initLoadAverage = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					// Load avg 1mn
-					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
-					if (loadAvg1mn) {
-						const html = buildThresholdHTML(
-							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
-							'Charge Système (1min)', '#load_avg_1mn_id#',
-							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-							'#load_avg_1mn_tendance#'
-						)
-						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
-					}
-
-					// Load avg 5mn
-					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-					if (loadAvg5mn) {
-						const html = buildThresholdHTML(
-							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
-							'Charge Système (5min)', '#load_avg_5mn_id#',
-							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-							'#load_avg_5mn_tendance#'
-						)
-						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
-					}
-
-					// Load avg 15mn
-					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-					if (loadAvg15mn) {
-						const html = buildThresholdHTML(
-							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
-							'Charge Système (15min)', '#load_avg_15mn_id#',
-							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-							'#load_avg_15mn_tendance#'
-						)
-						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initLoadAverage:', e)
-				}
-			}
-
-			/**
-			 * Initialize Memory display with percentage
-			 */
-			const initMemory = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
-					if (!memoryEl) return
-
-					const value = '#memory_available_percent#'
-					if (value === '') {
-						memoryEl.innerHTML = '<span>#memory#</span>'
-						return
-					}
-
-					memoryEl.innerHTML = buildPercentageHTML(
-						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
-						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
-						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-						'#memory_available_percent_tendance#', '#memory# (', '%', true
-					)
-				} catch (e) {
-					console.error('[Monitoring] Error in initMemory:', e)
-				}
-			}
-
-			/**
-			 * Initialize Swap display with percentage
-			 */
-			const initSwap = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
-					if (!swapEl) return
-
-					const value = '#swap_free_percent#'
-					if (value === '') {
-						swapEl.innerHTML = '<span></span>'
-						return
-					}
-
-					swapEl.innerHTML = buildPercentageHTML(
-						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
-						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
-						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-						'#swap_free_percent_tendance#', '#swap# (', '%', true
-					)
-				} catch (e) {
-					console.error('[Monitoring] Error in initSwap:', e)
-				}
-			}
-
-			/**
-			 * Initialize HDD display with percentage
-			 */
-			const initHDD = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const hddEl = widgetRoot.querySelector('#hdd#id#')
-					if (!hddEl) return
-
-					const value = '#hdd_free_percent#'
-					if (value === '') {
-						hddEl.innerHTML = '<span></span>'
-						return
-					}
-
-					hddEl.innerHTML = buildPercentageHTML(
-						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
-						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
-						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
-					)
-				} catch (e) {
-					console.error('[Monitoring] Error in initHDD:', e)
-				}
-			}
-
-			/**
-			 * Initialize Synology volume display with icon and percentage
-			 */
-			const initSynoVolume = (volumeEl) => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const { synoValue: value, synoTitle, synoColorlow: low, synoColorhigh: high, 
-						synoLabel: label, synoCmdid: cmdId, synoTendance: tendance, synoPrefix: prefix,
-						synoHistoryMin: historyMin, synoHistoryAvg: historyAvg, synoHistoryMax: historyMax,
-						synoValuedate: valueDate, synoCollectdate: collectDate } = volumeEl.dataset
-					
-					// Vérifier d'abord la valeur (pas d'opération DOM si invalide)
-					if (!value || value === '' || value.startsWith('#')) {
-						volumeEl.style.display = 'none'
-						return
-					}
-
-					// Récupérer l'icône uniquement si value est valide
-					const iconSpan = volumeEl.querySelector('span:first-child')
-					const icon = iconSpan?.innerHTML.trim()
-					
-					// Vérifier l'icône
-					if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
-						volumeEl.style.display = 'none'
-						return
-					}
-
-					// Construire le contenu (tout est valide)
-					const history = { min: historyMin || '-', avg: historyAvg || '-', max: historyMax || '-' }
-					const percentageHTML = buildPercentageHTML(value, low, high, label, cmdId, history, tendance, prefix, '%', true)
-				
-					iconSpan.setAttribute('title', `${synoTitle}<br><i>Date de valeur : ${valueDate}<br>Date de collecte : ${collectDate}</i>`)
-					
-					// Ajouter le pourcentage dans le deuxième span
-					const percentSpan = volumeEl.querySelector('.syno-percent')
-					if (percentSpan) {
-						percentSpan.innerHTML = percentageHTML
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
-				}
-			}
-			const initCPU = () => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const cpuEl = widgetRoot.querySelector('#cpu#id#')
-					if (!cpuEl) return
-
-					if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
-						cpuEl.innerHTML = '<span>#cpu# </span>'
-
-						const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
-						if (!tempEl) return
-
-						const temp = parseFloat('#cpu_temp#')
-						const low = parseFloat('#cpu_temp_colorlow#')
-						const high = parseFloat('#cpu_temp_colorhigh#')
-						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
-						const color = getColorStyle(temp, low, high, false)
-
-						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
-					} else {
-						cpuEl.innerHTML = '<span>#cpu#</span>'
-					}
-				} catch (e) {
-					console.error('[Monitoring] Error in initCPU:', e)
-				}
-			}
-
-			/**
-			 * Initialize custom command display (perso1-4) using data attributes
-			 * @param {HTMLElement} container - The container div with data-perso-* attributes
-			 */
-			const initPerso = (container) => {
-				try {
-					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-					const dataset = container.dataset
-					const persoId = dataset.persoId
-					const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
-					if (!el) return
-
-					const value = dataset.persoValue
-					if (value === '') {
-						el.innerHTML = '<span></span>'
-						return
-					}
-
-					const val = parseFloat(value)
-					const low = parseFloat(dataset.persoLow)
-					const high = parseFloat(dataset.persoHigh)
-					const history = safeJSONParse(dataset.persoHistory)
-					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-					const color = getColorStyle(val, low, high, false)
-
-					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
-				} catch (e) {
-					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
-				}
-			}
-
-			// ========================================
-			// === INITIALIZATION ===
-			// ========================================
-
-			// Only initialize if template is properly instantiated
-			if ('#uid#') {
-				// Icon handlers
-				initIconSSH()
-				initIconCron()
-
-				// Button handlers
-				initRebootButton()
-				initPoweroffButton()
-				initRefreshButton()
-
-				// Simple value displays
-				initUptime()
-				initNetworkInfos()
-				initNetwork()
-
-				// Value displays with thresholds
-				initLoadAverage()
-				initMemory()
-				initSwap()
-				initHDD()
-
-				// Synology volumes
-			widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-			// CPU with temperature
-			initCPU()
-
-			// Custom commands - generic initialization using data attributes
-				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
-			}
-		})()
-	</script>
-</div>
+    data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
+    data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
+    style="width: #width#;height: #height#;#style#;">
+    <style>
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
+            font-size: 12px !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
+            display: none !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-flex {
+            display: flex;
+            justify-content: space-between;
+            padding-left: 5px !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left {
+            display: flex;
+            flex: 0 1 auto;
+            float: left;
+            justify-content: flex-start;
+            align-items: center;
+            box-sizing: border-box;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
+            padding-right: 3px;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name {
+            overflow: auto;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center {
+            display: flex;
+            flex: 1 1 auto;
+            justify-content: center;
+            text-align: center;
+            padding-left: 5px;
+            padding-right: 5px;
+            box-sizing: border-box;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
+            overflow: hidden !important;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right {
+            display: flex;
+            flex: 0 1 auto;
+            float: right;
+            justify-content: flex-end;
+            align-items: center;
+            box-sizing: border-box;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right .cmd.refresh {
+            margin-top: unset !important;
+            padding-right: 5px;
+            color: inherit !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
+            display: block;
+            text-align: left;
+            padding-left: 5px;
+            overflow: auto;
+            white-space: nowrap;
+            width: 100%;
+            height: calc(100% - 24px);
+            box-sizing: border-box;
+        }
+    </style>
+    <div class="widget-name monitor-name-flex">
+        <div class="monitor-name-left">
+            <span id="iconSSH#id#" class="cmd monitor-btn"></span>
+            <span id="iconCron#id#" class="cmd monitor-btn"></span>
+            <span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+                data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+                <i class="cmd monitor-btn fas fa-redo"></i>
+            </span>
+            <span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+                data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+                <i class="cmd monitor-btn fas fa-power-off"></i>
+            </span>
+        </div>
+        <div class="widget-name monitor-name-center">
+            <span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
+            <a href="#eqLink#" class="reportModeHidden">#name_display# <span
+                    class="object_name">#object_name#</span></a>
+        </div>
+        <div class="monitor-name-right">
+            <span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
+                <i class="fas fa-sync"></i>
+            </span>
+        </div>
+    </div>
+    <div class="monitor-cmds">
+        <div class="tooltips" style="display: #distri_name_display#;">
+            <span
+                title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+            <span>#distri_name#</span>
+        </div>
+        <div class="tooltips" style="display: #uptime_display#;">
+            <span
+                title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+            <span id="uptime#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #load_avg_display#;">
+            <span
+                title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+            <span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #memory_display#;">
+            <span
+                title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+            <span id="memory_available_percent#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #swap_display#;">
+            <span
+                title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+            <span id="swap_free_percent#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #network_infos_display#;">
+            <span
+                title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+            <span id="network_infos#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #network_display#;">
+            <span
+                title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+            <span id="network#id#"></span>
+        </div>
+        <!-- Cartes réseau supplémentaires -->
+        #multi_network_cards#
+        <div class="tooltips" style="display: #hdd_display#;">
+            <span
+                title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+            <span id="hdd#id#"></span>
+        </div>
+        <div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;" data-syno-id="syno_hddv2"
+            data-syno-title="Syno Volume 2" data-syno-value="#syno_hddv2_free_percent#"
+            data-syno-color-low="#syno_hddv2_free_percent_colorlow#"
+            data-syno-color-high="#syno_hddv2_free_percent_colorhigh#" data-syno-label="Syno Volume 2 (% Libre)"
+            data-syno-cmd-id="#syno_hddv2_free_percent_id#" data-syno-tendance="#syno_hddv2_free_percent_tendance#"
+            data-syno-prefix="#syno_hddv2# (" data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
+            data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
+            data-syno-history-max="#syno_hddv2_free_percent_maxHistory#" data-syno-value-date="#syno_hddv2_value#"
+            data-syno-collect-date="#syno_hddv2_collect#">
+            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
+            <span class="syno-percent"></span>
+        </div>
+        <div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;" data-syno-id="syno_hddv3"
+            data-syno-title="Syno Volume 3" data-syno-value="#syno_hddv3_free_percent#"
+            data-syno-color-low="#syno_hddv3_free_percent_colorlow#"
+            data-syno-color-high="#syno_hddv3_free_percent_colorhigh#" data-syno-label="Syno Volume 3 (% Libre)"
+            data-syno-cmd-id="#syno_hddv3_free_percent_id#" data-syno-tendance="#syno_hddv3_free_percent_tendance#"
+            data-syno-prefix="#syno_hddv3# (" data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
+            data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
+            data-syno-history-max="#syno_hddv3_free_percent_maxHistory#" data-syno-value-date="#syno_hddv3_value#"
+            data-syno-collect-date="#syno_hddv3_collect#">
+            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
+            <span class="syno-percent"></span>
+        </div>
+        <div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;" data-syno-id="syno_hddv4"
+            data-syno-title="Syno Volume 4" data-syno-value="#syno_hddv4_free_percent#"
+            data-syno-color-low="#syno_hddv4_free_percent_colorlow#"
+            data-syno-color-high="#syno_hddv4_free_percent_colorhigh#" data-syno-label="Syno Volume 4 (% Libre)"
+            data-syno-cmd-id="#syno_hddv4_free_percent_id#" data-syno-tendance="#syno_hddv4_free_percent_tendance#"
+            data-syno-prefix="#syno_hddv4# (" data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
+            data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
+            data-syno-history-max="#syno_hddv4_free_percent_maxHistory#" data-syno-value-date="#syno_hddv4_value#"
+            data-syno-collect-date="#syno_hddv4_collect#">
+            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
+            <span class="syno-percent"></span>
+        </div>
+        <div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;" data-syno-id="syno_hddusb"
+            data-syno-title="Syno Volume USB" data-syno-value="#syno_hddusb_free_percent#"
+            data-syno-color-low="#syno_hddusb_free_percent_colorlow#"
+            data-syno-color-high="#syno_hddusb_free_percent_colorhigh#" data-syno-label="Syno Volume USB (% Libre)"
+            data-syno-cmd-id="#syno_hddusb_free_percent_id#" data-syno-tendance="#syno_hddusb_free_percent_tendance#"
+            data-syno-prefix="#syno_hddusb# (" data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
+            data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
+            data-syno-history-max="#syno_hddusb_free_percent_maxHistory#" data-syno-value-date="#syno_hddusb_value#"
+            data-syno-collect-date="#syno_hddusb_collect#">
+            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
+            <span class="syno-percent"></span>
+        </div>
+        <div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
+            data-syno-id="syno_hddesata" data-syno-title="Syno Volume eSATA"
+            data-syno-value="#syno_hddesata_free_percent#" data-syno-color-low="#syno_hddesata_free_percent_colorlow#"
+            data-syno-color-high="#syno_hddesata_free_percent_colorhigh#" data-syno-label="Syno Volume eSATA (% Libre)"
+            data-syno-cmd-id="#syno_hddesata_free_percent_id#"
+            data-syno-tendance="#syno_hddesata_free_percent_tendance#" data-syno-prefix="#syno_hddesata# ("
+            data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
+            data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
+            data-syno-history-max="#syno_hddesata_free_percent_maxHistory#" data-syno-value-date="#syno_hddesata_value#"
+            data-syno-collect-date="#syno_hddesata_collect#">
+            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
+            <span class="syno-percent"></span>
+        </div>
+        <div class="tooltips" style="display: #cpu_display#;">
+            <span
+                title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+            <span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+            data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+            data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
+            data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
+            <span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+            <span id="perso1_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+            data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+            data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
+            data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
+            <span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+            <span id="perso2_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+            data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+            data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
+            data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
+            <span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+            <span id="perso3_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+            data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+            data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
+            data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
+            <span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
+                style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+            <span id="perso4_unite#id#"></span>
+        </div>
+    </div>
+    #divGraphInfo#
+    <script>
+        (() => {
+            'use strict'
+
+            // Get reference to this specific widget container
+            const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+            if (!widgetRoot) return
+
+            // ========================================
+            // === UTILITY FUNCTIONS ===
+            // ========================================
+
+            /**
+             * Safely parse JSON from data attribute
+             * @param {string} jsonString - JSON string to parse
+             * @param {object} fallback - Fallback value if parsing fails
+             * @returns {object} Parsed object or fallback
+             */
+            const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
+                if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+                try {
+                    return JSON.parse(jsonString)
+                } catch (e) {
+                    console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
+                    return fallback
+                }
+            }
+
+
+
+            /**
+             * Calculate color style based on thresholds
+             * @param {number} val - Current value
+             * @param {number} low - Low threshold
+             * @param {number} high - High threshold
+             * @param {boolean} reversed - If true, higher values are better (green)
+             * @returns {string} Color style string
+             */
+            const getColorStyle = (val, low, high, reversed = false) => {
+                if (reversed) {
+                    // Reversed thresholds: higher percentage = better (green)
+                    if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+                    if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+                } else {
+                    // Normal thresholds: lower = green, higher = red
+                    if (val < low) return ' style="color: var(--al-success-color) !important;"'
+                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+                    if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+                }
+                return ''
+            }
+
+            /**
+             * Build HTML for threshold-based value with color
+             * @param {string} value - Value to display
+             * @param {string} lowThreshold - Low threshold value
+             * @param {string} highThreshold - High threshold value
+             * @param {string} label - Label for tooltip
+             * @param {string} cmdId - Command ID
+             * @param {object} history - History stats {min, avg, max}
+             * @param {string} tendance - Trend indicator
+             * @param {boolean} reversed - If true, higher values are better
+             * @returns {string} HTML string
+             */
+            const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
+                if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+                const val = parseFloat(value)
+                const low = parseFloat(lowThreshold)
+                const high = parseFloat(highThreshold)
+                const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+                const color = getColorStyle(val, low, high, reversed)
+                const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+                return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
+            }
+
+            /**
+             * Build HTML for percentage-based value with color and unit
+             * @param {string} value - Value to display
+             * @param {string} lowThreshold - Low threshold value
+             * @param {string} highThreshold - High threshold value
+             * @param {string} label - Label for tooltip
+             * @param {string} cmdId - Command ID
+             * @param {object} history - History stats {min, avg, max}
+             * @param {string} tendance - Trend indicator
+             * @param {string} prefix - Prefix text (e.g., "#memory# (")
+             * @param {string} unit - Unit (e.g., "%")
+             * @param {boolean} reversed - If true, higher values are better
+             * @returns {string} HTML string
+             */
+            const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
+                if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+                const val = parseFloat(value)
+                const low = parseFloat(lowThreshold)
+                const high = parseFloat(highThreshold)
+                const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+                const color = getColorStyle(val, low, high, reversed)
+                const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+                const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
+                const unitSpan = `<span>${unit}${tendanceStr}</span>`
+
+                // Only add prefix if it exists and is not a placeholder
+                if (prefix && !prefix.startsWith('#')) {
+                    return `${prefix}${valueSpan}${unitSpan})`
+                }
+                return `${valueSpan}${unitSpan}`
+            }
+
+            // ========================================
+            // === ICON HANDLERS ===
+            // ========================================
+
+            /**
+             * Initialize SSH connection status icon
+             */
+            const initIconSSH = () => {
+                try {
+                    const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+                    if (!iconSSH) return
+
+                    if ('#cnx_ssh#' === 'OK') {
+                        iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+                    } else if ('#cnx_ssh#' === 'KO') {
+                        iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initIconSSH:', e)
+                }
+            }
+
+            /**
+             * Initialize Cron status icon
+             */
+            const initIconCron = () => {
+                try {
+                    const iconCron = widgetRoot.querySelector('#iconCron#id#')
+                    if (!iconCron) return
+
+                    const isOn = '#cron_status#' === '1'
+                    const isCustom = '#cron_status_custom#' === '1'
+                    const display = '#cron_status_display#'
+
+                    const icon = isOn ? 'play-circle' : 'pause-circle'
+                    const label = isOn ? 'ON' : 'OFF'
+                    const customLabel = isCustom ? 'Custom' : 'Default'
+                    const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+                    iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+                } catch (e) {
+                    console.error('[Monitoring] Error in initIconCron:', e)
+                }
+            }
+
+            // ========================================
+            // === BUTTON HANDLERS ===
+            // ========================================
+
+            /**
+             * Initialize Reboot button with confirmation dialog
+             */
+            const initRebootButton = () => {
+                try {
+                    const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+                    rebootBtn?.addEventListener('click', () => {
+                        jeeDialog.confirm({
+                            title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
+                            message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
+                            buttons: {
+                                confirm: { label: 'Redémarrer', className: 'warning' },
+                                cancel: { label: 'Annuler', className: 'info' }
+                            },
+                            callback: (result) => {
+                                if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+                            }
+                        })
+                    })
+                } catch (e) {
+                    console.error('[Monitoring] Error in initRebootButton:', e)
+                }
+            }
+
+            /**
+             * Initialize Poweroff button with confirmation dialog
+             */
+            const initPoweroffButton = () => {
+                try {
+                    const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
+                    poweroffBtn?.addEventListener('click', () => {
+                        jeeDialog.confirm({
+                            title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
+                            message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
+                            buttons: {
+                                confirm: { label: 'Eteindre', className: 'danger' },
+                                cancel: { label: 'Annuler', className: 'info' }
+                            },
+                            callback: (result) => {
+                                if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+                            }
+                        })
+                    })
+                } catch (e) {
+                    console.error('[Monitoring] Error in initPoweroffButton:', e)
+                }
+            }
+
+            /**
+             * Initialize Refresh button
+             */
+            const initRefreshButton = () => {
+                try {
+                    const refreshBtn = widgetRoot.querySelector('.refresh')
+                    if (!refreshBtn) return
+
+                    if ('#refresh_id#' !== '') {
+                        refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+                    } else {
+                        refreshBtn.remove()
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initRefreshButton:', e)
+                }
+            }
+
+            // ========================================
+            // === VALUE DISPLAYS - Simple ===
+            // ========================================
+
+            /**
+             * Initialize Uptime display
+             */
+            const initUptime = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+                    if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+                } catch (e) {
+                    console.error('[Monitoring] Error in initUptime:', e)
+                }
+            }
+
+            /**
+             * Initialize Network Infos display
+             */
+            const initNetworkInfos = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+                    if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+                } catch (e) {
+                    console.error('[Monitoring] Error in initNetworkInfos:', e)
+                }
+            }
+
+            /**
+             * Initialize Network Traffic display
+             */
+            const initNetwork = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const networkEl = widgetRoot.querySelector('#network#id#')
+                    if (networkEl) {
+                        const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
+                        networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initNetwork:', e)
+                }
+            }
+
+            // ========================================
+            // === VALUE DISPLAYS - With Thresholds ===
+            // ========================================
+
+            /**
+             * Initialize Load Average displays (1mn, 5mn, 15mn)
+             */
+            const initLoadAverage = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    // Load avg 1mn
+                    const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+                    if (loadAvg1mn) {
+                        const html = buildThresholdHTML(
+                            '#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+                            'Charge Système (1min)', '#load_avg_1mn_id#',
+                            { min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+                            '#load_avg_1mn_tendance#'
+                        )
+                        loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+                    }
+
+                    // Load avg 5mn
+                    const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+                    if (loadAvg5mn) {
+                        const html = buildThresholdHTML(
+                            '#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+                            'Charge Système (5min)', '#load_avg_5mn_id#',
+                            { min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+                            '#load_avg_5mn_tendance#'
+                        )
+                        loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+                    }
+
+                    // Load avg 15mn
+                    const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+                    if (loadAvg15mn) {
+                        const html = buildThresholdHTML(
+                            '#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+                            'Charge Système (15min)', '#load_avg_15mn_id#',
+                            { min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+                            '#load_avg_15mn_tendance#'
+                        )
+                        loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initLoadAverage:', e)
+                }
+            }
+
+            /**
+             * Initialize Memory display with percentage
+             */
+            const initMemory = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+                    if (!memoryEl) return
+
+                    const value = '#memory_available_percent#'
+                    if (value === '') {
+                        memoryEl.innerHTML = '<span>#memory#</span>'
+                        return
+                    }
+
+                    memoryEl.innerHTML = buildPercentageHTML(
+                        value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+                        'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+                        { min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+                        '#memory_available_percent_tendance#', '#memory# (', '%', true
+                    )
+                } catch (e) {
+                    console.error('[Monitoring] Error in initMemory:', e)
+                }
+            }
+
+            /**
+             * Initialize Swap display with percentage
+             */
+            const initSwap = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+                    if (!swapEl) return
+
+                    const value = '#swap_free_percent#'
+                    if (value === '') {
+                        swapEl.innerHTML = '<span></span>'
+                        return
+                    }
+
+                    swapEl.innerHTML = buildPercentageHTML(
+                        value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+                        'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+                        { min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+                        '#swap_free_percent_tendance#', '#swap# (', '%', true
+                    )
+                } catch (e) {
+                    console.error('[Monitoring] Error in initSwap:', e)
+                }
+            }
+
+            /**
+             * Initialize HDD display with percentage
+             */
+            const initHDD = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const hddEl = widgetRoot.querySelector('#hdd#id#')
+                    if (!hddEl) return
+
+                    const value = '#hdd_free_percent#'
+                    if (value === '') {
+                        hddEl.innerHTML = '<span></span>'
+                        return
+                    }
+
+                    hddEl.innerHTML = buildPercentageHTML(
+                        value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+                        'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+                        { min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+                        '#hdd_free_percent_tendance#', '#hdd# (', '%', true
+                    )
+                } catch (e) {
+                    console.error('[Monitoring] Error in initHDD:', e)
+                }
+            }
+
+            /**
+             * Initialize Synology volume display with icon and percentage
+             */
+            const initSynoVolume = (volumeEl) => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const dataset = volumeEl.dataset
+
+                    // Vérifier d'abord la valeur (pas d'opération DOM si invalide)
+                    if (!dataset.synoValue || dataset.synoValue === '' || dataset.synoValue.startsWith('#')) {
+                        volumeEl.style.display = 'none'
+                        return
+                    }
+
+                    // Récupérer l'icône uniquement si value est valide
+                    const iconSpan = volumeEl.querySelector('span:first-child')
+                    const icon = iconSpan?.innerHTML.trim()
+
+                    // Vérifier l'icône
+                    if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
+                        volumeEl.style.display = 'none'
+                        return
+                    }
+
+                    // Construire le contenu (tout est valide)
+                    const history = { min: dataset.synoHistoryMin || '-', avg: dataset.synoHistoryAvg || '-', max: dataset.synoHistoryMax || '-' }
+                    const percentageHTML = buildPercentageHTML(
+                        dataset.synoValue, dataset.synoColorLow, dataset.synoColorHigh,
+                        dataset.synoLabel, dataset.synoCmdId, history, dataset.synoTendance,
+                        dataset.synoPrefix, '%', true
+                    )
+
+                    iconSpan.setAttribute('title', `${dataset.synoTitle}<br><i>Date de valeur : ${dataset.synoValueDate}<br>Date de collecte : ${dataset.synoCollectDate}</i>`)
+
+                    // Ajouter le pourcentage dans le deuxième span
+                    const percentSpan = volumeEl.querySelector('.syno-percent')
+                    if (percentSpan) {
+                        percentSpan.innerHTML = percentageHTML
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
+                }
+            }
+            const initCPU = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const cpuEl = widgetRoot.querySelector('#cpu#id#')
+                    if (!cpuEl) return
+
+                    if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+                        cpuEl.innerHTML = '<span>#cpu# </span>'
+
+                        const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+                        if (!tempEl) return
+
+                        const temp = parseFloat('#cpu_temp#')
+                        const low = parseFloat('#cpu_temp_colorlow#')
+                        const high = parseFloat('#cpu_temp_colorhigh#')
+                        const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+                        const color = getColorStyle(temp, low, high, false)
+
+                        tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+                    } else {
+                        cpuEl.innerHTML = '<span>#cpu#</span>'
+                    }
+                } catch (e) {
+                    console.error('[Monitoring] Error in initCPU:', e)
+                }
+            }
+
+            /**
+             * Initialize custom command display (perso1-4) using data attributes
+             * @param {HTMLElement} container - The container div with data-perso-* attributes
+             */
+            const initPerso = (container) => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const dataset = container.dataset
+                    const persoId = dataset.persoId
+                    const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+                    if (!el) return
+
+                    const value = dataset.persoValue
+                    if (value === '') {
+                        el.innerHTML = '<span></span>'
+                        return
+                    }
+
+                    const val = parseFloat(value)
+                    const low = parseFloat(dataset.persoLow)
+                    const high = parseFloat(dataset.persoHigh)
+                    const history = safeJSONParse(dataset.persoHistory)
+                    const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+                    const color = getColorStyle(val, low, high, false)
+
+                    el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+                } catch (e) {
+                    console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+                }
+            }
+
+            // ========================================
+            // === INITIALIZATION ===
+            // ========================================
+
+            // Only initialize if template is properly instantiated
+            if ('#uid#') {
+                // Icon handlers
+                initIconSSH()
+                initIconCron()
+
+                // Button handlers
+                initRebootButton()
+                initPoweroffButton()
+                initRefreshButton()
+
+                // Simple value displays
+                initUptime()
+                initNetworkInfos()
+                initNetwork()
+
+                // Value displays with thresholds
+                initLoadAverage()
+                initMemory()
+                initSwap()
+                initHDD()
+
+                // Synology volumes
+                widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+                // CPU with temperature
+                initCPU()
+
+                // Custom commands - generic initialization using data attributes
+                widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+            }
+        })()
+    </script>
+</div>
\ No newline at end of file

From 7f443beb7f7c7270d0c8fc9d1fcba7f8228e62cb Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 09:38:14 +0100
Subject: [PATCH 17/24] Update mobile templates

---
 core/template/mobile/AsusWRT.html    | 953 ++++++++++++++------------
 core/template/mobile/Monitoring.html | 954 +++++++++++++--------------
 core/template/mobile/Synology.html   | 687 +++++++++++++++++++
 3 files changed, 1664 insertions(+), 930 deletions(-)
 create mode 100644 core/template/mobile/Synology.html

diff --git a/core/template/mobile/AsusWRT.html b/core/template/mobile/AsusWRT.html
index 1a89e011..7c87de37 100644
--- a/core/template/mobile/AsusWRT.html
+++ b/core/template/mobile/AsusWRT.html
@@ -1,4 +1,6 @@
-<div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#" data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="#style#">
+<div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#"
+	data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#"
+	data-tags="#tags#" style="#style#">
 	<style>
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-flex {
 			display: flex;
@@ -13,6 +15,7 @@
 			justify-content: flex-start;
 			align-items: center;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left span:not(:empty) {
 			padding-right: 5px;
 		}
@@ -24,6 +27,7 @@
 			text-align: center;
 			overflow: hidden;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center span {
 			justify-content: center;
 			overflow: hidden;
@@ -37,7 +41,7 @@
 			padding-left: 6px;
 			padding-right: 6px;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right {
 			display: flex;
 			flex: 0 1 auto;
@@ -46,6 +50,7 @@
 			align-items: center;
 			padding-left: 5px;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right .refresh {
 			position: relative;
 		}
@@ -72,7 +77,8 @@
 			<span class="cmd" id="iconSSH#id#"></span>
 			<span class="cmd" id="iconCron#id#"></span>
 			<span class="cmd" id="iconCheckFirmware#id#"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
 				<i class="fas fa-redo"></i>
 			</span>
 		</span>
@@ -89,497 +95,570 @@
 	</span>
 	<div class="monitor-cmds">
 		<div class="tooltips" style="display: #distri_name_display#;">
-			<span title="Distribution AsusWRT || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#" style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span
+				title="Distribution AsusWRT || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
 			<span>#distri_name#</span>
 		</div>
 		<div class="tooltips" style="display: #uptime_display#;">
-			<span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#" style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
 			<span id="uptime#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #load_avg_display#;">
-			<span title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#" style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span
+				title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
 			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #memory_display#;">
-			<span title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#" style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span
+				title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
 			<span id="memory_available_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #swap_display#;">
-			<span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#" style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
 			<span id="swap_free_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_infos_display#;">
-			<span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#" style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
 			<span id="network_infos#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_display#;">
-			<span title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#" style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
 			<span id="network#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_clients_display#;">
-			<span title="Infos Clients || Date de valeur : #asus_clients_value# || Date de collecte : #asus_clients_collect#" style="width:15px;max-width:15px;max-height:15px;">#asus_clients_icon#</span>
+			<span title="Infos Clients || Date valeur : #asus_clients_value# || Date collecte : #asus_clients_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_clients_icon#</span>
 			<span id="asus_clients#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_wan0_ip_display#;">
-			<span title="Infos Internet (WAN) || Date valeur : #asus_wan0_ip_value# || Date collecte : #asus_wan0_ip_collect#" style="width:15px;max-width:15px;max-height:15px;">#asus_wan0_ip_icon#</span>
+			<span
+				title="Infos Internet (WAN) || Date valeur : #asus_wan0_ip_value# || Date collecte : #asus_wan0_ip_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_wan0_ip_icon#</span>
 			<span id="asus_wan0_ip#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #asus_wifi_temp_display#;">
-			<span title="Infos Températures WiFi || Date valeur : #asus_wifi_temp_value# || Date collecte : #asus_wifi_temp_collect#" style="width:15px;max-width:15px;max-height:15px;">#asus_wifi_temp_icon#</span>
+			<span
+				title="Infos Températures WiFi || Date valeur : #asus_wifi_temp_value# || Date collecte : #asus_wifi_temp_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#asus_wifi_temp_icon#</span>
 			<span id="asus_wifi_temp#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #hdd_display#;">
-			<span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#" style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #cpu_display#;">
-			<span title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#" style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span
+				title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
 			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso1_display#;"
-		     data-perso-id="perso1"
-		     data-perso-value="#perso1#"
-		     data-perso-name="#perso1_name#"
-		     data-perso-date-value="#perso1_value#"
-		     data-perso-collect="#perso1_collect#"
-		     data-perso-icon="#perso1_icon#"
-		     data-perso-low="#perso1_colorlow#"
-		     data-perso-high="#perso1_colorhigh#"
-		     data-perso-unite="#perso1_unite#">
-			<span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-date-value="#perso1_value#" data-perso-collect="#perso1_collect#"
+			data-perso-icon="#perso1_icon#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-unite="#perso1_unite#">
+			<span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
 			<span id="perso1_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso2_display#;"
-		     data-perso-id="perso2"
-		     data-perso-value="#perso2#"
-		     data-perso-name="#perso2_name#"
-		     data-perso-date-value="#perso2_value#"
-		     data-perso-collect="#perso2_collect#"
-		     data-perso-icon="#perso2_icon#"
-		     data-perso-low="#perso2_colorlow#"
-		     data-perso-high="#perso2_colorhigh#"
-		     data-perso-unite="#perso2_unite#">
-			<span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-date-value="#perso2_value#" data-perso-collect="#perso2_collect#"
+			data-perso-icon="#perso2_icon#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-unite="#perso2_unite#">
+			<span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
 			<span id="perso2_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso3_display#;"
-		     data-perso-id="perso3"
-		     data-perso-value="#perso3#"
-		     data-perso-name="#perso3_name#"
-		     data-perso-date-value="#perso3_value#"
-		     data-perso-collect="#perso3_collect#"
-		     data-perso-icon="#perso3_icon#"
-		     data-perso-low="#perso3_colorlow#"
-		     data-perso-high="#perso3_colorhigh#"
-		     data-perso-unite="#perso3_unite#">
-			<span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-date-value="#perso3_value#" data-perso-collect="#perso3_collect#"
+			data-perso-icon="#perso3_icon#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-unite="#perso3_unite#">
+			<span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
 			<span id="perso3_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso4_display#;"
-		     data-perso-id="perso4"
-		     data-perso-value="#perso4#"
-		     data-perso-name="#perso4_name#"
-		     data-perso-date-value="#perso4_value#"
-		     data-perso-collect="#perso4_collect#"
-		     data-perso-icon="#perso4_icon#"
-		     data-perso-low="#perso4_colorlow#"
-		     data-perso-high="#perso4_colorhigh#"
-		     data-perso-unite="#perso4_unite#">
-			<span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-date-value="#perso4_value#" data-perso-collect="#perso4_collect#"
+			data-perso-icon="#perso4_icon#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-unite="#perso4_unite#">
+			<span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
 			<span id="perso4_unite#id#"></span>
 		</div>
 	</div>
 	<script>
-	(() => {
-		'use strict'
-		
-		// ========================================
-		// === UTILITY FUNCTIONS ===
-		// ========================================
-		
-		/**
-		 * Get color style based on value and thresholds (mobile optimized)
-		 * @param {number} val - Numeric value to evaluate
-		 * @param {number} low - Low threshold
-		 * @param {number} high - High threshold
-		 * @param {boolean} reversed - If true, higher values are better (green)
-		 * @returns {string} Inline style string for color
-		 */
-		const getColorStyle = (val, low, high, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (reversed) {
-				// Reversed: higher is better (e.g., % free)
-				if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-			} else {
-				// Normal: lower is better (e.g., temperature, load)
-				if (val < low) return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+		(() => {
+			'use strict'
+
+			const widgetRoot = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Get color style based on value and thresholds (mobile optimized)
+			 * @param {number} val - Numeric value to evaluate
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Inline style string for color
+			 */
+			const getColorStyle = (val, low, high, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (reversed) {
+					// Reversed: higher is better (e.g., % free)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal: lower is better (e.g., temperature, load)
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
 			}
-			return ''
-		}
-		
-		/**
-		 * Build HTML for threshold-based value with color (mobile version - no history)
-		 */
-		const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (value === '') return '<span></span>'
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const color = getColorStyle(val, low, high, reversed)
-			
-			return prefix + '<span class="state"' + color + '>' + value + '</span>'
-		}
-		
-		/**
-		 * Build HTML for percentage-based value with color and unit (mobile version)
-		 */
-		const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (value === '') return prefix ? '<span></span>' : ''
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const color = getColorStyle(val, low, high, reversed)
-			
-			const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
-			const unitSpan = '<span>' + unit + '</span>'
-			
-			return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
-		}
-		
-		// ========================================
-		// === ICON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize SSH connection status icon
-		 */
-		const initIconSSH = () => {
-			const el = document.getElementById('iconSSH#id#')
-			if (!el) return
-			
-			if ('#cnx_ssh#' === 'OK') {
-				el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
-			} else if ('#cnx_ssh#' === 'KO') {
-				el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for threshold-based value with color (mobile version - no history)
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				return prefix + '<span class="state"' + color + '>' + value + '</span>'
 			}
-		}
-		
-		/**
-		 * Initialize Cron status icon
-		 */
-		const initIconCron = () => {
-			const el = document.getElementById('iconCron#id#')
-			if (!el) return
-			
-			const isOn = '#cron_status#' === '1'
-			const isCustom = '#cron_status_custom#' === '1'
-			const display = '#cron_status_display#'
-			
-			const icon = isOn ? 'play-circle' : 'pause-circle'
-			const label = isOn ? 'ON' : 'OFF'
-			const customLabel = isCustom ? ' (Custom)' : ' (Default)'
-			const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-			
-			el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
-		}
-		
-		/**
-		 * Initialize AsusWRT Firmware Check icon (AsusWRT-specific)
-		 */
-		const initIconCheckFirmware = () => {
-			const el = document.getElementById('iconCheckFirmware#id#')
-			if (!el) return
-			
-			if ('#asus_fw_check#' === '1') {
-				el.innerHTML = '<i title="Check du Firmware :: 1" class="fas fa-bell" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
-			} else if ('#asus_fw_check#' === '0') {
-				el.innerHTML = '<i title="Check du Firmware :: 0" class="fas fa-bell-slash" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for percentage-based value with color and unit (mobile version)
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return prefix ? '<span></span>' : ''
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
+				const unitSpan = '<span>' + unit + '</span>'
+
+				return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
 			}
-		}
-		
-		// ========================================
-		// === BUTTON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize Reboot button with native confirm (mobile optimized)
-		 */
-		const initRebootButton = () => {
-			const btn = document.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-			if (!btn) return
-			
-			btn.addEventListener('click', () => {
-				if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
-					jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconSSH#id#')
+					if (!el) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconSSH:', e)
 				}
-			})
-		}
-		
-		/**
-		 * Initialize Refresh button
-		 */
-		const initRefreshButton = () => {
-			const btn = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
-			if (!btn) return
-			
-			if ('#refresh_id#' !== '') {
-				btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-			} else {
-				btn.remove()
 			}
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - Simple ===
-		// ========================================
-		
-		/**
-		 * Initialize Uptime display
-		 */
-		const initUptime = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('uptime#id#')
-			if (el) el.innerHTML = '<span>#uptime#</span>'
-		}
-		
-		/**
-		 * Initialize Network Infos display
-		 */
-		const initNetworkInfos = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('network_infos#id#')
-			if (el) el.innerHTML = '<span>#network_infos#</span>'
-		}
-		
-		/**
-		 * Initialize Network Traffic display
-		 */
-		const initNetwork = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('network#id#')
-			if (el) el.innerHTML = '<span>#network#</span>'
-		}
-		
-		/**
-		 * Initialize AsusWRT Clients display (AsusWRT-specific)
-		 */
-		const initAsusClients = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('asus_clients#id#')
-			if (el) el.innerHTML = '<span>#asus_clients#</span>'
-		}
-		
-		/**
-		 * Initialize AsusWRT WAN IP display (AsusWRT-specific)
-		 */
-		const initAsusWanIP = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('asus_wan0_ip#id#')
-			if (el) el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
-		}
-		
-		/**
-		 * Initialize AsusWRT WiFi Temperature display (AsusWRT-specific)
-		 */
-		const initAsusWiFiTemp = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('asus_wifi_temp#id#')
-			if (el) el.innerHTML = '<span>#asus_wifi_temp#</span>'
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - With Thresholds ===
-		// ========================================
-		
-		/**
-		 * Initialize Load Average displays (1mn, 5mn, 15mn)
-		 */
-		const initLoadAverage = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			// Load avg 1mn
-			const loadAvg1mn = document.getElementById('load_avg_1mn#id#')
-			if (loadAvg1mn) {
-				const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-				loadAvg1mn.innerHTML = html
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconCron#id#')
+					if (!el) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconCron:', e)
+				}
 			}
-			
-			// Load avg 5mn
-			const loadAvg5mn = document.getElementById('load_avg_5mn#id#')
-			if (loadAvg5mn) {
-				const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-				loadAvg5mn.innerHTML = html
+
+			/**
+			 * Initialize Check Firmware icon (AsusWRT specific)
+			 */
+			const initIconCheckFirmware = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconCheckFirmware#id#')
+					if (!el) return
+
+					if ('#asus_fw_check#' === '1') {
+						el.innerHTML = '<i title="Check du Firmware :: 1" class="fas fa-bell" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
+					} else if ('#asus_fw_check#' === '0') {
+						el.innerHTML = '<i title="Check du Firmware :: 0" class="fas fa-bell-slash" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initIconCheckFirmware:', e)
+				}
 			}
-			
-			// Load avg 15mn
-			const loadAvg15mn = document.getElementById('load_avg_15mn#id#')
-			if (loadAvg15mn) {
-				const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-				loadAvg15mn.innerHTML = html
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with native confirm (mobile optimized)
+			 */
+			const initRebootButton = () => {
+				try {
+					const btn = widgetRoot.querySelector('.reboot')
+					if (!btn) return
+
+					btn.addEventListener('click', () => {
+						if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
+							jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+						}
+					})
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initRebootButton:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Memory display with percentage
-		 */
-		const initMemory = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('memory_available_percent#id#')
-			if (!el) return
-			
-			const value = '#memory_available_percent#'
-			if (value === '') {
-				el.innerHTML = '<span>#memory#</span>'
-				return
+
+			/**
+			 * Initialize Refresh button (mobile version)
+			 */
+			const initRefreshButton = () => {
+				try {
+					const btn = widgetRoot.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
+					if (!btn) return
+
+					if ('#refresh_id#' !== '') {
+						btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						btn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initRefreshButton:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
-		}
-		
-		/**
-		 * Initialize Swap display with percentage
-		 */
-		const initSwap = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('swap_free_percent#id#')
-			if (!el) return
-			
-			const value = '#swap_free_percent#'
-			if (value === '') {
-				el.innerHTML = '<span>#swap#</span>'
-				return
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#uptime#id#')
+					if (!el) return
+					el.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initUptime:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
-		}
-		
-		/**
-		 * Initialize HDD display with percentage
-		 */
-		const initHDD = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('hdd#id#')
-			if (!el) return
-			
-			const value = '#hdd_free_percent#'
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#network_infos#id#')
+					if (!el) return
+					el.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
-		}
-		
-		/**
-		 * Initialize CPU display with optional temperature
-		 */
-		const initCPU = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const cpuEl = document.getElementById('cpu#id#')
-			const tempEl = document.getElementById('cpu_temp#id#')
-			if (!cpuEl || !tempEl) return
-			
-			const temp = '#cpu_temp#'
-			if (temp !== '' && '#cpu_temp_display#' === 'block') {
-				cpuEl.innerHTML = '<span>#cpu# </span>'
-				
-				const tempVal = parseFloat(temp)
-				const low = parseFloat('#cpu_temp_colorlow#')
-				const high = parseFloat('#cpu_temp_colorhigh#')
-				const color = getColorStyle(tempVal, low, high, false)
-				
-				tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
-			} else {
-				cpuEl.innerHTML = '<span>#cpu#</span>'
+
+			/**
+			 * Initialize Network display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#network#id#')
+					if (!el) return
+					el.innerHTML = '<span>#network#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize custom command display (perso1-4) using data attributes (mobile version)
-		 * @param {HTMLElement} container - The container div with data-perso-* attributes
-		 */
-		const initPerso = (container) => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const dataset = container.dataset
-			const persoId = dataset.persoId
-			const el = document.getElementById(persoId + '_unite#id#')
-			if (!el) return
-			
-			const value = dataset.persoValue
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Asus Clients display (AsusWRT specific)
+			 */
+			const initAsusClients = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_clients#id#')
+					if (!el) return
+					el.innerHTML = '<span>#asus_clients#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
+				}
 			}
-			
-			const val = parseFloat(value)
-			const low = parseFloat(dataset.persoLow)
-			const high = parseFloat(dataset.persoHigh)
-			const color = getColorStyle(val, low, high, false)
-			
-			if (color) {
-				el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
-			} else {
-				el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+
+			/**
+			 * Initialize Asus WAN IP display (AsusWRT specific)
+			 */
+			const initAsusWanIP = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
+					if (!el) return
+					el.innerHTML = '<span>#asus_wan0_ip#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusWanIP:', e)
+				}
 			}
-		}
-		
-		// ========================================
-		// === INITIALIZATION ===
-		// ========================================
-		
-		// Only initialize if template is properly instantiated
-		if ('#uid#') {
-			// Icon handlers
-			initIconSSH()
-			initIconCron()
-			initIconCheckFirmware()
-			
-			// Button handlers
-			initRebootButton()
-			initRefreshButton()
-			
-			// Simple value displays
-			initUptime()
-			initNetworkInfos()
-			initNetwork()
-			
-			// AsusWRT-specific displays
-			initAsusClients()
-			initAsusWanIP()
-			initAsusWiFiTemp()
-			
-			// Value displays with thresholds
-			initLoadAverage()
-			initMemory()
-			initSwap()
-			initHDD()
-			
-			// CPU with temperature
-			initCPU()
-			
-			// Custom commands - generic initialization using data attributes
-			document.querySelectorAll('[data-perso-id]').forEach(initPerso)
-		}
-	})()
+
+			/**
+			 * Initialize Asus WiFi Temperature display (AsusWRT specific)
+			 */
+			const initAsusWiFiTemp = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
+					if (!el) return
+					el.innerHTML = '<span>#asus_wifi_temp#</span>'
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initAsusWiFiTemp:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+						loadAvg1mn.innerHTML = html
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+						loadAvg5mn.innerHTML = html
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+						loadAvg15mn.innerHTML = html
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
+				}
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!el) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						el.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initMemory:', e)
+				}
+			}
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!el) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						el.innerHTML = '<span>#swap#</span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initSwap:', e)
+				}
+			}
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#hdd#id#')
+					if (!el) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initHDD:', e)
+				}
+			}
+
+			/**
+			 * Initialize CPU display with temperature
+			 */
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+					if (!cpuEl || !tempEl) return
+
+					const temp = '#cpu_temp#'
+					if (temp !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempVal = parseFloat(temp)
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const color = getColorStyle(tempVal, low, high, false)
+
+						tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes (mobile version)
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const color = getColorStyle(val, low, high, false)
+
+					if (color) {
+						el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					} else {
+						el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring AsusWRT] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+				initIconCheckFirmware()
+
+				// Button handlers
+				initRebootButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+				initAsusClients()
+				initAsusWanIP()
+				initAsusWiFiTemp()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// CPU with temperature
+				initCPU()
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
 	</script>
-	#divGraphInfo#
-</div>
+</div>
\ No newline at end of file
diff --git a/core/template/mobile/Monitoring.html b/core/template/mobile/Monitoring.html
index edff6266..0787ed63 100644
--- a/core/template/mobile/Monitoring.html
+++ b/core/template/mobile/Monitoring.html
@@ -1,4 +1,6 @@
-<div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#" data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="#style#">
+<div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#"
+	data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#"
+	data-tags="#tags#" style="#style#">
 	<style>
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-flex {
 			display: flex;
@@ -13,6 +15,7 @@
 			justify-content: flex-start;
 			align-items: center;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left span:not(:empty) {
 			padding-right: 5px;
 		}
@@ -24,6 +27,7 @@
 			text-align: center;
 			overflow: hidden;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center span {
 			justify-content: center;
 			overflow: hidden;
@@ -37,7 +41,7 @@
 			padding-left: 6px;
 			padding-right: 6px;
 		}
-		
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right {
 			display: flex;
 			flex: 0 1 auto;
@@ -46,6 +50,7 @@
 			align-items: center;
 			padding-left: 5px;
 		}
+
 		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right .refresh {
 			position: relative;
 		}
@@ -71,10 +76,12 @@
 		<span class="monitor-name-left">
 			<span class="cmd" id="iconSSH#id#"></span>
 			<span class="cmd" id="iconCron#id#"></span>
-			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
 				<i class="fas fa-redo"></i>
 			</span>
-			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action" data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
 				<i class="fas fa-power-off"></i>
 			</span>
 		</span>
@@ -91,546 +98,507 @@
 	</span>
 	<div class="monitor-cmds">
 		<div class="tooltips" style="display: #distri_name_display#;">
-			<span title="Distribution Linux || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#" style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span
+				title="Distribution Linux || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
 			<span>#distri_name#</span>
 		</div>
 		<div class="tooltips" style="display: #uptime_display#;">
-			<span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#" style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
 			<span id="uptime#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #load_avg_display#;">
-			<span title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#" style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span
+				title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
 			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #memory_display#;">
-			<span title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#" style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span
+				title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
 			<span id="memory_available_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #swap_display#;">
-			<span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#" style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
 			<span id="swap_free_percent#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_infos_display#;">
-			<span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#" style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
 			<span id="network_infos#id#"></span>
 		</div>
 		<div class="tooltips" style="display: #network_display#;">
-			<span title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#" style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
 			<span id="network#id#"></span>
 		</div>
 		<!-- Cartes réseau supplémentaires -->
 		#multi_network_cards#
 		<div class="tooltips" style="display: #hdd_display#;">
-			<span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#" style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
 			<span id="hdd#id#"></span>
 		</div>
-		<div id="syno_hddv2#id#"
-		     data-syno-id="syno_hddv2"
-		     data-syno-name="Syno Volume 2"
-		     data-syno-display="#syno_hddv2_display#"
-		     data-syno-value="#syno_hddv2#"
-		     data-syno-date-value="#syno_hddv2_value#"
-		     data-syno-collect="#syno_hddv2_collect#"
-		     data-syno-icon="#syno_hddv2_icon#"
-		     data-syno-percent="#syno_hddv2_free_percent#"
-		     data-syno-low="#syno_hddv2_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv2_free_percent_colorhigh#"></div>
-		<div id="syno_hddv3#id#"
-		     data-syno-id="syno_hddv3"
-		     data-syno-name="Syno Volume 3"
-		     data-syno-display="#syno_hddv3_display#"
-		     data-syno-value="#syno_hddv3#"
-		     data-syno-date-value="#syno_hddv3_value#"
-		     data-syno-collect="#syno_hddv3_collect#"
-		     data-syno-icon="#syno_hddv3_icon#"
-		     data-syno-percent="#syno_hddv3_free_percent#"
-		     data-syno-low="#syno_hddv3_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv3_free_percent_colorhigh#"></div>
-		<div id="syno_hddv4#id#"
-		     data-syno-id="syno_hddv4"
-		     data-syno-name="Syno Volume 4"
-		     data-syno-display="#syno_hddv4_display#"
-		     data-syno-value="#syno_hddv4#"
-		     data-syno-date-value="#syno_hddv4_value#"
-		     data-syno-collect="#syno_hddv4_collect#"
-		     data-syno-icon="#syno_hddv4_icon#"
-		     data-syno-percent="#syno_hddv4_free_percent#"
-		     data-syno-low="#syno_hddv4_free_percent_colorlow#"
-		     data-syno-high="#syno_hddv4_free_percent_colorhigh#"></div>
-		<div id="syno_hddusb#id#"
-		     data-syno-id="syno_hddusb"
-		     data-syno-name="Syno Volume USB"
-		     data-syno-display="#syno_hddusb_display#"
-		     data-syno-value="#syno_hddusb#"
-		     data-syno-date-value="#syno_hddusb_value#"
-		     data-syno-collect="#syno_hddusb_collect#"
-		     data-syno-icon="#syno_hddusb_icon#"
-		     data-syno-percent="#syno_hddusb_free_percent#"
-		     data-syno-low="#syno_hddusb_free_percent_colorlow#"
-		     data-syno-high="#syno_hddusb_free_percent_colorhigh#"></div>
-		<div id="syno_hddesata#id#"
-		     data-syno-id="syno_hddesata"
-		     data-syno-name="Syno Volume eSATA"
-		     data-syno-display="#syno_hddesata_display#"
-		     data-syno-value="#syno_hddesata#"
-		     data-syno-date-value="#syno_hddesata_value#"
-		     data-syno-collect="#syno_hddesata_collect#"
-		     data-syno-icon="#syno_hddesata_icon#"
-		     data-syno-percent="#syno_hddesata_free_percent#"
-		     data-syno-low="#syno_hddesata_free_percent_colorlow#"
-		     data-syno-high="#syno_hddesata_free_percent_colorhigh#"></div>
 		<div class="tooltips" style="display: #cpu_display#;">
-			<span title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#" style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span
+				title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
 			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso1_display#;"
-		     data-perso-id="perso1"
-		     data-perso-value="#perso1#"
-		     data-perso-name="#perso1_name#"
-		     data-perso-date-value="#perso1_value#"
-		     data-perso-collect="#perso1_collect#"
-		     data-perso-icon="#perso1_icon#"
-		     data-perso-low="#perso1_colorlow#"
-		     data-perso-high="#perso1_colorhigh#"
-		     data-perso-unite="#perso1_unite#">
-			<span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-date-value="#perso1_value#" data-perso-collect="#perso1_collect#"
+			data-perso-icon="#perso1_icon#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-unite="#perso1_unite#">
+			<span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
 			<span id="perso1_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso2_display#;"
-		     data-perso-id="perso2"
-		     data-perso-value="#perso2#"
-		     data-perso-name="#perso2_name#"
-		     data-perso-date-value="#perso2_value#"
-		     data-perso-collect="#perso2_collect#"
-		     data-perso-icon="#perso2_icon#"
-		     data-perso-low="#perso2_colorlow#"
-		     data-perso-high="#perso2_colorhigh#"
-		     data-perso-unite="#perso2_unite#">
-			<span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-date-value="#perso2_value#" data-perso-collect="#perso2_collect#"
+			data-perso-icon="#perso2_icon#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-unite="#perso2_unite#">
+			<span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
 			<span id="perso2_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso3_display#;"
-		     data-perso-id="perso3"
-		     data-perso-value="#perso3#"
-		     data-perso-name="#perso3_name#"
-		     data-perso-date-value="#perso3_value#"
-		     data-perso-collect="#perso3_collect#"
-		     data-perso-icon="#perso3_icon#"
-		     data-perso-low="#perso3_colorlow#"
-		     data-perso-high="#perso3_colorhigh#"
-		     data-perso-unite="#perso3_unite#">
-			<span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-date-value="#perso3_value#" data-perso-collect="#perso3_collect#"
+			data-perso-icon="#perso3_icon#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-unite="#perso3_unite#">
+			<span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
 			<span id="perso3_unite#id#"></span>
 		</div>
-		<div class="tooltips" style="display: #perso4_display#;"
-		     data-perso-id="perso4"
-		     data-perso-value="#perso4#"
-		     data-perso-name="#perso4_name#"
-		     data-perso-date-value="#perso4_value#"
-		     data-perso-collect="#perso4_collect#"
-		     data-perso-icon="#perso4_icon#"
-		     data-perso-low="#perso4_colorlow#"
-		     data-perso-high="#perso4_colorhigh#"
-		     data-perso-unite="#perso4_unite#">
-			<span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#" style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-date-value="#perso4_value#" data-perso-collect="#perso4_collect#"
+			data-perso-icon="#perso4_icon#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-unite="#perso4_unite#">
+			<span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
 			<span id="perso4_unite#id#"></span>
 		</div>
 	</div>
 	<script>
-	(() => {
-		'use strict'
-		
-		// ========================================
-		// === UTILITY FUNCTIONS ===
-		// ========================================
-		
-		/**
-		 * Get color style based on value and thresholds (mobile optimized)
-		 * @param {number} val - Numeric value to evaluate
-		 * @param {number} low - Low threshold
-		 * @param {number} high - High threshold
-		 * @param {boolean} reversed - If true, higher values are better (green)
-		 * @returns {string} Inline style string for color
-		 */
-		const getColorStyle = (val, low, high, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (reversed) {
-				// Reversed: higher is better (e.g., % free)
-				if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-			} else {
-				// Normal: lower is better (e.g., temperature, load)
-				if (val < low) return ' style="color: var(--al-success-color) !important;"'
-				if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-				if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+		(() => {
+			'use strict'
+
+			const widgetRoot = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Get color style based on value and thresholds (mobile optimized)
+			 * @param {number} val - Numeric value to evaluate
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Inline style string for color
+			 */
+			const getColorStyle = (val, low, high, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (reversed) {
+					// Reversed: higher is better (e.g., % free)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal: lower is better (e.g., temperature, load)
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
 			}
-			return ''
-		}
-		
-		/**
-		 * Build HTML for threshold-based value with color (mobile version - no history)
-		 */
-		const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (value === '') return '<span></span>'
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const color = getColorStyle(val, low, high, reversed)
-			
-			return prefix + '<span class="state"' + color + '>' + value + '</span>'
-		}
-		
-		/**
-		 * Build HTML for percentage-based value with color and unit (mobile version)
-		 */
-		const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
-			if (reversed === void 0) reversed = false
-			if (value === '') return prefix ? '<span></span>' : ''
-			
-			const val = parseFloat(value)
-			const low = parseFloat(lowThreshold)
-			const high = parseFloat(highThreshold)
-			const color = getColorStyle(val, low, high, reversed)
-			
-			const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
-			const unitSpan = '<span>' + unit + '</span>'
-			
-			return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
-		}
-		
-		// ========================================
-		// === ICON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize SSH connection status icon
-		 */
-		const initIconSSH = () => {
-			const el = document.getElementById('iconSSH#id#')
-			if (!el) return
-			
-			if ('#cnx_ssh#' === 'OK') {
-				el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
-			} else if ('#cnx_ssh#' === 'KO') {
-				el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+
+			/**
+			 * Build HTML for threshold-based value with color (mobile version - no history)
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				return prefix + '<span class="state"' + color + '>' + value + '</span>'
 			}
-		}
-		
-		/**
-		 * Initialize Cron status icon
-		 */
-		const initIconCron = () => {
-			const el = document.getElementById('iconCron#id#')
-			if (!el) return
-			
-			const isOn = '#cron_status#' === '1'
-			const isCustom = '#cron_status_custom#' === '1'
-			const display = '#cron_status_display#'
-			
-			const icon = isOn ? 'play-circle' : 'pause-circle'
-			const label = isOn ? 'ON' : 'OFF'
-			const customLabel = isCustom ? ' (Custom)' : ' (Default)'
-			const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-			
-			el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
-		}
-		
-		// ========================================
-		// === BUTTON HANDLERS ===
-		// ========================================
-		
-		/**
-		 * Initialize Reboot button with native confirm (mobile optimized)
-		 */
-		const initRebootButton = () => {
-			const btn = document.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-			if (!btn) return
-			
-			btn.addEventListener('click', () => {
-				if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
-					jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+
+			/**
+			 * Build HTML for percentage-based value with color and unit (mobile version)
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return prefix ? '<span></span>' : ''
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
+				const unitSpan = '<span>' + unit + '</span>'
+
+				return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
+			}
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconSSH#id#')
+					if (!el) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconSSH:', e)
 				}
-			})
-		}
-		
-		/**
-		 * Initialize Poweroff button with native confirm (mobile optimized)
-		 */
-		const initPoweroffButton = () => {
-			const btn = document.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
-			if (!btn) return
-			
-			btn.addEventListener('click', () => {
-				if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
-					jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+			}
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const el = widgetRoot.querySelector('#iconCron#id#')
+					if (!el) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconCron:', e)
 				}
-			})
-		}
-		
-		/**
-		 * Initialize Refresh button
-		 */
-		const initRefreshButton = () => {
-			const btn = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
-			if (!btn) return
-			
-			if ('#refresh_id#' !== '') {
-				btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-			} else {
-				btn.remove()
 			}
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - Simple ===
-		// ========================================
-		
-		/**
-		 * Initialize Uptime display
-		 */
-		const initUptime = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('uptime#id#')
-			if (el) el.innerHTML = '<span>#uptime#</span>'
-		}
-		
-		/**
-		 * Initialize Network Infos display
-		 */
-		const initNetworkInfos = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('network_infos#id#')
-			if (el) el.innerHTML = '<span>#network_infos#</span>'
-		}
-		
-		/**
-		 * Initialize Network Traffic display
-		 */
-		const initNetwork = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('network#id#')
-			if (el) el.innerHTML = '<span>#network#</span>'
-		}
-		
-		// ========================================
-		// === VALUE DISPLAYS - With Thresholds ===
-		// ========================================
-		
-		/**
-		 * Initialize Load Average displays (1mn, 5mn, 15mn)
-		 */
-		const initLoadAverage = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			// Load avg 1mn
-			const loadAvg1mn = document.getElementById('load_avg_1mn#id#')
-			if (loadAvg1mn) {
-				const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-				loadAvg1mn.innerHTML = html
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with native confirm (mobile optimized)
+			 */
+			const initRebootButton = () => {
+				try {
+					const btn = widgetRoot.querySelector('.reboot')
+					if (!btn) return
+
+					btn.addEventListener('click', () => {
+						if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
+							jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+						}
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initRebootButton:', e)
+				}
 			}
-			
-			// Load avg 5mn
-			const loadAvg5mn = document.getElementById('load_avg_5mn#id#')
-			if (loadAvg5mn) {
-				const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-				loadAvg5mn.innerHTML = html
+
+			/**
+			 * Initialize Poweroff button with native confirm (mobile optimized)
+			 */
+			const initPoweroffButton = () => {
+				try {
+					const btn = widgetRoot.querySelector('.poweroff')
+					if (!btn) return
+
+					btn.addEventListener('click', () => {
+						if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
+							jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+						}
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initPoweroffButton:', e)
+				}
 			}
-			
-			// Load avg 15mn
-			const loadAvg15mn = document.getElementById('load_avg_15mn#id#')
-			if (loadAvg15mn) {
-				const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-				loadAvg15mn.innerHTML = html
+
+			/**
+			 * Initialize Refresh button (mobile version)
+			 */
+			const initRefreshButton = () => {
+				try {
+					const btn = widgetRoot.querySelector('.refresh')
+					if (!btn) return
+
+					if ('#refresh_id#' !== '') {
+						btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						btn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initRefreshButton:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Memory display with percentage
-		 */
-		const initMemory = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('memory_available_percent#id#')
-			if (!el) return
-			
-			const value = '#memory_available_percent#'
-			if (value === '') {
-				el.innerHTML = '<span>#memory#</span>'
-				return
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#uptime#id#')
+					if (!el) return
+					el.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initUptime:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
-		}
-		
-		/**
-		 * Initialize Swap display with percentage
-		 */
-		const initSwap = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('swap_free_percent#id#')
-			if (!el) return
-			
-			const value = '#swap_free_percent#'
-			if (value === '') {
-				el.innerHTML = '<span>#swap#</span>'
-				return
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#network_infos#id#')
+					if (!el) return
+					el.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetworkInfos:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
-		}
-		
-		/**
-		 * Initialize HDD display with percentage
-		 */
-		const initHDD = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const el = document.getElementById('hdd#id#')
-			if (!el) return
-			
-			const value = '#hdd_free_percent#'
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Network display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#network#id#')
+					if (!el) return
+					el.innerHTML = '<span>#network#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetwork:', e)
+				}
 			}
-			
-			el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
-		}
-		
-		/**
-		 * Initialize CPU display with optional temperature
-		 */
-		const initCPU = () => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const cpuEl = document.getElementById('cpu#id#')
-			const tempEl = document.getElementById('cpu_temp#id#')
-			if (!cpuEl || !tempEl) return
-			
-			const temp = '#cpu_temp#'
-			if (temp !== '' && '#cpu_temp_display#' === 'block') {
-				cpuEl.innerHTML = '<span>#cpu# </span>'
-				
-				const tempVal = parseFloat(temp)
-				const low = parseFloat('#cpu_temp_colorlow#')
-				const high = parseFloat('#cpu_temp_colorhigh#')
-				const color = getColorStyle(tempVal, low, high, false)
-				
-				tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
-			} else {
-				cpuEl.innerHTML = '<span>#cpu#</span>'
+
+			// ========================================
+			// === VALUE DISPLAYS - With thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+						loadAvg1mn.innerHTML = html
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+						loadAvg5mn.innerHTML = html
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+						loadAvg15mn.innerHTML = html
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initLoadAverage:', e)
+				}
 			}
-		}
-		
-		/**
-		 * Initialize Synology volume display using data attributes (mobile version)
-		 * @param {HTMLElement} container - The container div with data-syno-* attributes
-		 */
-		const initSynoVolume = (container) => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			if (container.dataset.synoDisplay !== 'block') return
-			
-			const dataset = container.dataset
-			const synoId = dataset.synoId
-			
-			// Setup container
-			container.className = 'tooltips'
-			container.style.display = dataset.synoDisplay
-			
-			// Build HTML with tooltip (mobile format with ||)
-			const title = dataset.synoName + ' (% Libre) || Date valeur : ' + dataset.synoDateValue + ' || Date collecte : ' + dataset.synoCollect
-			container.innerHTML = '<span title="' + title + '" style="width:15px;max-width:15px;max-height:15px;">' + dataset.synoIcon + '</span> <span id="' + synoId + '_free_percent#id#"></span>'
-			
-			// Set percentage value with color
-			const el = document.getElementById(synoId + '_free_percent#id#')
-			if (!el) return
-			
-			const value = dataset.synoPercent
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!el) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						el.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring] Error in initMemory:', e)
+				}
 			}
-			
-			const val = parseFloat(value)
-			const low = parseFloat(dataset.synoLow)
-			const high = parseFloat(dataset.synoHigh)
-			const color = getColorStyle(val, low, high, true)
-			
-			el.innerHTML = dataset.synoValue + ' (<span class="state"' + color + '>' + value + '</span><span>%</span>)'
-		}
-		
-		/**
-		 * Initialize custom command display (perso1-4) using data attributes (mobile version)
-		 * @param {HTMLElement} container - The container div with data-perso-* attributes
-		 */
-		const initPerso = (container) => {
-			if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-			
-			const dataset = container.dataset
-			const persoId = dataset.persoId
-			const el = document.getElementById(persoId + '_unite#id#')
-			if (!el) return
-			
-			const value = dataset.persoValue
-			if (value === '') {
-				el.innerHTML = '<span></span>'
-				return
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!el) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						el.innerHTML = '<span>#swap#</span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring] Error in initSwap:', e)
+				}
 			}
-			
-			const val = parseFloat(value)
-			const low = parseFloat(dataset.persoLow)
-			const high = parseFloat(dataset.persoHigh)
-			const color = getColorStyle(val, low, high, false)
-			
-			if (color) {
-				el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
-			} else {
-				el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const el = widgetRoot.querySelector('#hdd#id#')
+					if (!el) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring] Error in initHDD:', e)
+				}
 			}
-		}
-		
-		// ========================================
-		// === INITIALIZATION ===
-		// ========================================
-		
-		// Only initialize if template is properly instantiated
-		if ('#uid#') {
-			// Icon handlers
-			initIconSSH()
-			initIconCron()
-			
-			// Button handlers
-			initRebootButton()
-			initPoweroffButton()
-			initRefreshButton()
-			
-			// Simple value displays
-			initUptime()
-			initNetworkInfos()
-			initNetwork()
-			
-			// Value displays with thresholds
-			initLoadAverage()
-			initMemory()
-			initSwap()
-			initHDD()
-			
-			// CPU with temperature
-			initCPU()
-			
-			// Synology volumes - generic initialization using data attributes
-			document.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-			
-			// Custom commands - generic initialization using data attributes
-			document.querySelectorAll('[data-perso-id]').forEach(initPerso)
-		}
-	})()
+
+			/**
+			 * Initialize CPU display with temperature
+			 */
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+					if (!cpuEl || !tempEl) return
+
+					const temp = '#cpu_temp#'
+					if (temp !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempVal = parseFloat(temp)
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const color = getColorStyle(tempVal, low, high, false)
+
+						tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes (mobile version)
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const color = getColorStyle(val, low, high, false)
+
+					if (color) {
+						el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					} else {
+						el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+
+				// Button handlers
+				initRebootButton()
+				initPoweroffButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// CPU with temperature
+				initCPU()
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
 	</script>
-</div>
+</div>
\ No newline at end of file
diff --git a/core/template/mobile/Synology.html b/core/template/mobile/Synology.html
new file mode 100644
index 00000000..d655db08
--- /dev/null
+++ b/core/template/mobile/Synology.html
@@ -0,0 +1,687 @@
+<div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#"
+    data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#"
+    data-tags="#tags#" style="#style#">
+    <style>
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-flex {
+            display: flex;
+            justify-content: space-between;
+            padding-left: 5px !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left {
+            display: flex;
+            flex: 0 1 auto;
+            float: left;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left span:not(:empty) {
+            padding-right: 5px;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center {
+            display: flex;
+            flex: 1 1 auto;
+            justify-content: center;
+            text-align: center;
+            overflow: hidden;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center span {
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center .widget-name {
+            display: flex;
+            flex: 1 1 auto;
+            padding-left: 6px;
+            padding-right: 6px;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right {
+            display: flex;
+            flex: 0 1 auto;
+            float: right;
+            justify-content: flex-end;
+            align-items: center;
+            padding-left: 5px;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right .refresh {
+            position: relative;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right i {
+            margin-top: unset !important;
+            padding-right: 5px;
+            color: inherit !important;
+        }
+
+        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
+            display: block;
+            text-align: left;
+            padding-left: 5px;
+            overflow: auto;
+            white-space: nowrap;
+            width: 100%;
+            height: calc(100% - 24px);
+            box-sizing: border-box;
+        }
+    </style>
+    <span class="monitor-name-flex">
+        <span class="monitor-name-left">
+            <span class="cmd" id="iconSSH#id#"></span>
+            <span class="cmd" id="iconCron#id#"></span>
+            <span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+                data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+                <i class="fas fa-redo"></i>
+            </span>
+            <span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+                data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+                <i class="fas fa-power-off"></i>
+            </span>
+        </span>
+        <span class="monitor-name-center">
+            <span class="widget-name">
+                <span>#name_display#</span>
+            </span>
+        </span>
+        <span class="monitor-name-right">
+            <span class="cmd refresh cursor" data-cmd_id="#refresh_id#">
+                <i class="fas fa-sync"></i>
+            </span>
+        </span>
+    </span>
+    <div class="monitor-cmds">
+        <div class="tooltips" style="display: #distri_name_display#;">
+            <span
+                title="Distribution Linux || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+            <span>#distri_name#</span>
+        </div>
+        <div class="tooltips" style="display: #uptime_display#;">
+            <span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+            <span id="uptime#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #load_avg_display#;">
+            <span
+                title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+            <span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #memory_display#;">
+            <span
+                title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+            <span id="memory_available_percent#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #swap_display#;">
+            <span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+            <span id="swap_free_percent#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #network_infos_display#;">
+            <span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+            <span id="network_infos#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #network_display#;">
+            <span
+                title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+            <span id="network#id#"></span>
+        </div>
+        <!-- Cartes réseau supplémentaires -->
+        #multi_network_cards#
+        <div class="tooltips" style="display: #hdd_display#;">
+            <span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+            <span id="hdd#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #syno_v2_display#;" data-syno-id="syno_v2" data-syno-value="#syno_v2#"
+            data-syno-value-percent="#syno_v2_free_percent#" data-syno-name="#syno_v2_name#"
+            data-syno-date-value="#syno_v2_value#" data-syno-collect="#syno_v2_collect#" data-syno-icon="#syno_v2_icon#"
+            data-syno-low="#syno_v2_free_percent_colorlow#" data-syno-high="#syno_v2_free_percent_colorhigh#">
+            <span title="#syno_v2_name# || Date valeur : #syno_v2_value# || Date collecte : #syno_v2_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#syno_v2_icon#</span>
+            <span id="syno_v2_unit#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #syno_v3_display#;" data-syno-id="syno_v3" data-syno-value="#syno_v3#"
+            data-syno-value-percent="#syno_v3_free_percent#" data-syno-name="#syno_v3_name#"
+            data-syno-date-value="#syno_v3_value#" data-syno-collect="#syno_v3_collect#" data-syno-icon="#syno_v3_icon#"
+            data-syno-low="#syno_v3_free_percent_colorlow#" data-syno-high="#syno_v3_free_percent_colorhigh#">
+            <span title="#syno_v3_name# || Date valeur : #syno_v3_value# || Date collecte : #syno_v3_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#syno_v3_icon#</span>
+            <span id="syno_v3_unit#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #syno_v4_display#;" data-syno-id="syno_v4" data-syno-value="#syno_v4#"
+            data-syno-value-percent="#syno_v4_free_percent#" data-syno-name="#syno_v4_name#"
+            data-syno-date-value="#syno_v4_value#" data-syno-collect="#syno_v4_collect#" data-syno-icon="#syno_v4_icon#"
+            data-syno-low="#syno_v4_free_percent_colorlow#" data-syno-high="#syno_v4_free_percent_colorhigh#">
+            <span title="#syno_v4_name# || Date valeur : #syno_v4_value# || Date collecte : #syno_v4_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#syno_v4_icon#</span>
+            <span id="syno_v4_unit#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #syno_usb_display#;" data-syno-id="syno_usb" data-syno-value="#syno_usb#"
+            data-syno-value-percent="#syno_usb_free_percent#" data-syno-name="#syno_usb_name#"
+            data-syno-date-value="#syno_usb_value#" data-syno-collect="#syno_usb_collect#"
+            data-syno-icon="#syno_usb_icon#" data-syno-low="#syno_usb_free_percent_colorlow#"
+            data-syno-high="#syno_usb_free_percent_colorhigh#">
+            <span title="#syno_usb_name# || Date valeur : #syno_usb_value# || Date collecte : #syno_usb_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#syno_usb_icon#</span>
+            <span id="syno_usb_unit#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #syno_esata_display#;" data-syno-id="syno_esata"
+            data-syno-value="#syno_esata#" data-syno-value-percent="#syno_esata_free_percent#"
+            data-syno-name="#syno_esata_name#" data-syno-date-value="#syno_esata_value#"
+            data-syno-collect="#syno_esata_collect#" data-syno-icon="#syno_esata_icon#"
+            data-syno-low="#syno_esata_free_percent_colorlow#" data-syno-high="#syno_esata_free_percent_colorhigh#">
+            <span title="#syno_esata_name# || Date valeur : #syno_esata_value# || Date collecte : #syno_esata_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#syno_esata_icon#</span>
+            <span id="syno_esata_unit#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #cpu_display#;">
+            <span
+                title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+            <span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+            data-perso-name="#perso1_name#" data-perso-date-value="#perso1_value#" data-perso-collect="#perso1_collect#"
+            data-perso-icon="#perso1_icon#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+            data-perso-unite="#perso1_unite#">
+            <span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+            <span id="perso1_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+            data-perso-name="#perso2_name#" data-perso-date-value="#perso2_value#" data-perso-collect="#perso2_collect#"
+            data-perso-icon="#perso2_icon#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+            data-perso-unite="#perso2_unite#">
+            <span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+            <span id="perso2_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+            data-perso-name="#perso3_name#" data-perso-date-value="#perso3_value#" data-perso-collect="#perso3_collect#"
+            data-perso-icon="#perso3_icon#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+            data-perso-unite="#perso3_unite#">
+            <span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+            <span id="perso3_unite#id#"></span>
+        </div>
+        <div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+            data-perso-name="#perso4_name#" data-perso-date-value="#perso4_value#" data-perso-collect="#perso4_collect#"
+            data-perso-icon="#perso4_icon#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+            data-perso-unite="#perso4_unite#">
+            <span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#"
+                style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+            <span id="perso4_unite#id#"></span>
+        </div>
+    </div>
+    <script>
+        (() => {
+            'use strict'
+
+            const widgetRoot = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"]')
+            if (!widgetRoot) return
+
+            // ========================================
+            // === UTILITY FUNCTIONS ===
+            // ========================================
+
+            /**
+             * Get color style based on value and thresholds (mobile optimized)
+             * @param {number} val - Numeric value to evaluate
+             * @param {number} low - Low threshold
+             * @param {number} high - High threshold
+             * @param {boolean} reversed - If true, higher values are better (green)
+             * @returns {string} Inline style string for color
+             */
+            const getColorStyle = (val, low, high, reversed) => {
+                if (reversed === void 0) reversed = false
+                if (reversed) {
+                    // Reversed: higher is better (e.g., % free)
+                    if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+                    if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+                } else {
+                    // Normal: lower is better (e.g., temperature, load)
+                    if (val < low) return ' style="color: var(--al-success-color) !important;"'
+                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+                    if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+                }
+                return ''
+            }
+
+            /**
+             * Build HTML for threshold-based value with color (mobile version - no history)
+             */
+            const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
+                if (reversed === void 0) reversed = false
+                if (value === '') return '<span></span>'
+
+                const val = parseFloat(value)
+                const low = parseFloat(lowThreshold)
+                const high = parseFloat(highThreshold)
+                const color = getColorStyle(val, low, high, reversed)
+
+                return prefix + '<span class="state"' + color + '>' + value + '</span>'
+            }
+
+            /**
+             * Build HTML for percentage-based value with color and unit (mobile version)
+             */
+            const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
+                if (reversed === void 0) reversed = false
+                if (value === '') return prefix ? '<span></span>' : ''
+
+                const val = parseFloat(value)
+                const low = parseFloat(lowThreshold)
+                const high = parseFloat(highThreshold)
+                const color = getColorStyle(val, low, high, reversed)
+
+                const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
+                const unitSpan = '<span>' + unit + '</span>'
+
+                return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
+            }
+
+            // ========================================
+            // === ICON HANDLERS ===
+            // ========================================
+
+            /**
+             * Initialize SSH connection status icon
+             */
+            const initIconSSH = () => {
+                try {
+                    const el = widgetRoot.querySelector('#iconSSH#id#')
+                    if (!el) return
+
+                    if ('#cnx_ssh#' === 'OK') {
+                        el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+                    } else if ('#cnx_ssh#' === 'KO') {
+                        el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+                    }
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initIconSSH:', e)
+                }
+            }
+
+            /**
+             * Initialize Cron status icon
+             */
+            const initIconCron = () => {
+                try {
+                    const el = widgetRoot.querySelector('#iconCron#id#')
+                    if (!el) return
+
+                    const isOn = '#cron_status#' === '1'
+                    const isCustom = '#cron_status_custom#' === '1'
+                    const display = '#cron_status_display#'
+
+                    const icon = isOn ? 'play-circle' : 'pause-circle'
+                    const label = isOn ? 'ON' : 'OFF'
+                    const customLabel = isCustom ? ' (Custom)' : ' (Default)'
+                    const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+                    el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initIconCron:', e)
+                }
+            }
+
+            // ========================================
+            // === BUTTON HANDLERS ===
+            // ========================================
+
+            /**
+             * Initialize Reboot button with native confirm (mobile optimized)
+             */
+            const initRebootButton = () => {
+                try {
+                    const btn = widgetRoot.querySelector('.reboot')
+                    if (!btn) return
+
+                    btn.addEventListener('click', () => {
+                        if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
+                            jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+                        }
+                    })
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initRebootButton:', e)
+                }
+            }
+
+            /**
+             * Initialize Poweroff button with native confirm (mobile optimized)
+             */
+            const initPoweroffButton = () => {
+                try {
+                    const btn = widgetRoot.querySelector('.poweroff')
+                    if (!btn) return
+
+                    btn.addEventListener('click', () => {
+                        if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
+                            jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+                        }
+                    })
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initPoweroffButton:', e)
+                }
+            }
+
+            /**
+             * Initialize Refresh button (mobile version)
+             */
+            const initRefreshButton = () => {
+                try {
+                    const btn = widgetRoot.querySelector('.refresh')
+                    if (!btn) return
+
+                    if ('#refresh_id#' !== '') {
+                        btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+                    } else {
+                        btn.remove()
+                    }
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initRefreshButton:', e)
+                }
+            }
+
+            // ========================================
+            // === VALUE DISPLAYS - Simple ===
+            // ========================================
+
+            /**
+             * Initialize Uptime display
+             */
+            const initUptime = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#uptime#id#')
+                    if (!el) return
+                    el.innerHTML = '<span>#uptime#</span>'
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initUptime:', e)
+                }
+            }
+
+            /**
+             * Initialize Network Infos display
+             */
+            const initNetworkInfos = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#network_infos#id#')
+                    if (!el) return
+                    el.innerHTML = '<span>#network_infos#</span>'
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initNetworkInfos:', e)
+                }
+            }
+
+            /**
+             * Initialize Network display
+             */
+            const initNetwork = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#network#id#')
+                    if (!el) return
+                    el.innerHTML = '<span>#network#</span>'
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initNetwork:', e)
+                }
+            }
+
+            // ========================================
+            // === VALUE DISPLAYS - With thresholds ===
+            // ========================================
+
+            /**
+             * Initialize Load Average displays (1mn, 5mn, 15mn)
+             */
+            const initLoadAverage = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    // Load avg 1mn
+                    const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+                    if (loadAvg1mn) {
+                        const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+                        loadAvg1mn.innerHTML = html
+                    }
+
+                    // Load avg 5mn
+                    const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+                    if (loadAvg5mn) {
+                        const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+                        loadAvg5mn.innerHTML = html
+                    }
+
+                    // Load avg 15mn
+                    const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+                    if (loadAvg15mn) {
+                        const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+                        loadAvg15mn.innerHTML = html
+                    }
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initLoadAverage:', e)
+                }
+            }
+
+            /**
+             * Initialize Memory display with percentage
+             */
+            const initMemory = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#memory_available_percent#id#')
+                    if (!el) return
+
+                    const value = '#memory_available_percent#'
+                    if (value === '') {
+                        el.innerHTML = '<span>#memory#</span>'
+                        return
+                    }
+
+                    el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initMemory:', e)
+                }
+            }
+
+            /**
+             * Initialize Swap display with percentage
+             */
+            const initSwap = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#swap_free_percent#id#')
+                    if (!el) return
+
+                    const value = '#swap_free_percent#'
+                    if (value === '') {
+                        el.innerHTML = '<span>#swap#</span>'
+                        return
+                    }
+
+                    el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initSwap:', e)
+                }
+            }
+
+            /**
+             * Initialize HDD display with percentage
+             */
+            const initHDD = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const el = widgetRoot.querySelector('#hdd#id#')
+                    if (!el) return
+
+                    const value = '#hdd_free_percent#'
+                    if (value === '') {
+                        el.innerHTML = '<span></span>'
+                        return
+                    }
+
+                    el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initHDD:', e)
+                }
+            }
+
+            /**
+             * Initialize CPU display with temperature
+             */
+            const initCPU = () => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const cpuEl = widgetRoot.querySelector('#cpu#id#')
+                    const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+                    if (!cpuEl || !tempEl) return
+
+                    const temp = '#cpu_temp#'
+                    if (temp !== '' && '#cpu_temp_display#' === 'block') {
+                        cpuEl.innerHTML = '<span>#cpu# </span>'
+
+                        const tempVal = parseFloat(temp)
+                        const low = parseFloat('#cpu_temp_colorlow#')
+                        const high = parseFloat('#cpu_temp_colorhigh#')
+                        const color = getColorStyle(tempVal, low, high, false)
+
+                        tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
+                    } else {
+                        cpuEl.innerHTML = '<span>#cpu#</span>'
+                    }
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initCPU:', e)
+                }
+            }
+
+            /**
+             * Initialize Synology volume display using data attributes (mobile version)
+             * @param {HTMLElement} container - The container div with data-syno-* attributes
+             */
+            const initSynoVolume = (container) => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const dataset = container.dataset
+                    const synoId = dataset.synoId
+                    const el = widgetRoot.querySelector('#' + synoId + '_unit#id#')
+                    if (!el) return
+
+                    const value = dataset.synoValue
+                    const valuePercent = dataset.synoValuePercent
+
+                    // Validate - hide div if placeholder not replaced
+                    if (!value || value === '' || value.startsWith('#')) {
+                        container.style.display = 'none'
+                        return
+                    }
+
+                    if (!valuePercent || valuePercent === '' || valuePercent.startsWith('#')) {
+                        el.innerHTML = '<span>' + value + '</span>'
+                        return
+                    }
+
+                    const val = parseFloat(valuePercent)
+                    const low = parseFloat(dataset.synoLow)
+                    const high = parseFloat(dataset.synoHigh)
+                    const color = getColorStyle(val, low, high, true)
+
+                    el.innerHTML = value + ' (<span class="state"' + color + '>' + valuePercent + '</span><span>%</span>)'
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initSynoVolume for', container.dataset?.synoId || 'unknown', ':', e)
+                }
+            }
+
+            /**
+             * Initialize custom command display (perso1-4) using data attributes (mobile version)
+             * @param {HTMLElement} container - The container div with data-perso-* attributes
+             */
+            const initPerso = (container) => {
+                try {
+                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+                    const dataset = container.dataset
+                    const persoId = dataset.persoId
+                    const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+                    if (!el) return
+
+                    const value = dataset.persoValue
+                    if (value === '') {
+                        el.innerHTML = '<span></span>'
+                        return
+                    }
+
+                    const val = parseFloat(value)
+                    const low = parseFloat(dataset.persoLow)
+                    const high = parseFloat(dataset.persoHigh)
+                    const color = getColorStyle(val, low, high, false)
+
+                    if (color) {
+                        el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+                    } else {
+                        el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+                    }
+                } catch (e) {
+                    console.error('[Monitoring Syno] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+                }
+            }
+
+            // ========================================
+            // === INITIALIZATION ===
+            // ========================================
+
+            // Only initialize if template is properly instantiated
+            if ('#uid#') {
+                // Icon handlers
+                initIconSSH()
+                initIconCron()
+
+                // Button handlers
+                initRebootButton()
+                initPoweroffButton()
+                initRefreshButton()
+
+                // Simple value displays
+                initUptime()
+                initNetworkInfos()
+                initNetwork()
+
+                // Value displays with thresholds
+                initLoadAverage()
+                initMemory()
+                initSwap()
+                initHDD()
+
+                // CPU with temperature
+                initCPU()
+
+                // Synology volumes - generic initialization using data attributes
+                widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+
+                // Custom commands - generic initialization using data attributes
+                widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+            }
+        })()
+    </script>
+</div>
\ No newline at end of file

From 21318566c1b40483d72d4c41b8324f1a9d23db79 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 10:01:10 +0100
Subject: [PATCH 18/24] update templates

---
 core/template/dashboard/AsusWRT.html    | 30 ++++++++++++++----------
 core/template/dashboard/Monitoring.html | 26 +++++++++++----------
 core/template/dashboard/Synology.html   | 31 +++++++++++++------------
 core/template/mobile/AsusWRT.html       | 28 +++++++++++-----------
 core/template/mobile/Monitoring.html    | 28 +++++++++++-----------
 core/template/mobile/Synology.html      | 12 +++++-----
 6 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/core/template/dashboard/AsusWRT.html b/core/template/dashboard/AsusWRT.html
index da435c5c..39ad65ab 100644
--- a/core/template/dashboard/AsusWRT.html
+++ b/core/template/dashboard/AsusWRT.html
@@ -433,7 +433,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+				if (!uptimeEl) return
+				uptimeEl.innerHTML = '<span>#uptime#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initUptime:', e)
 				}
@@ -447,7 +448,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				if (!networkInfosEl) return
+				networkInfosEl.innerHTML = '<span>#network_infos#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
 				}
@@ -461,7 +463,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkEl = widgetRoot.querySelector('#network#id#')
-					if (networkEl) networkEl.innerHTML = '<span>#network#</span>'
+				if (!networkEl) return
+				networkEl.innerHTML = '<span>#network#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
 				}
@@ -475,7 +478,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const el = widgetRoot.querySelector('#asus_clients#id#')
-					if (el) el.innerHTML = '<span>#asus_clients#</span>'
+				if (!el) return
+				el.innerHTML = '<span>#asus_clients#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
 				}
@@ -489,7 +493,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
-					if (el) el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
+				if (!el) return
+				el.innerHTML = '<span>IP (WAN) : #asus_wan0_ip#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusWan0IP:', e)
 				}
@@ -503,7 +508,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
-					if (el) el.innerHTML = '<span>#asus_wifi_temp#</span>'
+				if (!el) return
+				el.innerHTML = '<span>#asus_wifi_temp#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusWifiTemp:', e)
 				}
@@ -523,37 +529,37 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
-						const html = buildThresholdHTML(
+						const html1mn = buildThresholdHTML(
 							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
 							'Charge Système (1min)', '#load_avg_1mn_id#',
 							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
 							'#load_avg_1mn_tendance#'
 						)
-						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
 					}
 
 					// Load avg 5mn
 					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
 					if (loadAvg5mn) {
-						const html = buildThresholdHTML(
+						const html5mn = buildThresholdHTML(
 							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
 							'Charge Système (5min)', '#load_avg_5mn_id#',
 							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
 							'#load_avg_5mn_tendance#'
 						)
-						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
 					}
 
 					// Load avg 15mn
 					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
 					if (loadAvg15mn) {
-						const html = buildThresholdHTML(
+						const html15mn = buildThresholdHTML(
 							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
 							'Charge Système (15min)', '#load_avg_15mn_id#',
 							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
 							'#load_avg_15mn_tendance#'
 						)
-						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index ecc06866..94ccc2d7 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -430,7 +430,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-					if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+				if (!uptimeEl) return
+				uptimeEl.innerHTML = '<span>#uptime#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initUptime:', e)
 				}
@@ -444,7 +445,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-					if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				if (!networkInfosEl) return
+				networkInfosEl.innerHTML = '<span>#network_infos#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetworkInfos:', e)
 				}
@@ -458,10 +460,10 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkEl = widgetRoot.querySelector('#network#id#')
-					if (networkEl) {
-						const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
-						networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
-					}
+				if (!networkEl) return
+
+				const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
+				networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetwork:', e)
 				}
@@ -481,37 +483,37 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
-						const html = buildThresholdHTML(
+						const html1mn = buildThresholdHTML(
 							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
 							'Charge Système (1min)', '#load_avg_1mn_id#',
 							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
 							'#load_avg_1mn_tendance#'
 						)
-						loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
 					}
 
 					// Load avg 5mn
 					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
 					if (loadAvg5mn) {
-						const html = buildThresholdHTML(
+						const html5mn = buildThresholdHTML(
 							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
 							'Charge Système (5min)', '#load_avg_5mn_id#',
 							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
 							'#load_avg_5mn_tendance#'
 						)
-						loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
 					}
 
 					// Load avg 15mn
 					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
 					if (loadAvg15mn) {
-						const html = buildThresholdHTML(
+						const html15mn = buildThresholdHTML(
 							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
 							'Charge Système (15min)', '#load_avg_15mn_id#',
 							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
 							'#load_avg_15mn_tendance#'
 						)
-						loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initLoadAverage:', e)
diff --git a/core/template/dashboard/Synology.html b/core/template/dashboard/Synology.html
index 43a3c70a..739936f6 100644
--- a/core/template/dashboard/Synology.html
+++ b/core/template/dashboard/Synology.html
@@ -491,7 +491,8 @@
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
                     const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-                    if (uptimeEl) uptimeEl.innerHTML = '<span>#uptime#</span>'
+                    if (!uptimeEl) return
+                    uptimeEl.innerHTML = '<span>#uptime#</span>'
                 } catch (e) {
                     console.error('[Monitoring] Error in initUptime:', e)
                 }
@@ -505,7 +506,8 @@
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
                     const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-                    if (networkInfosEl) networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+                    if (!networkInfosEl) return
+                    networkInfosEl.innerHTML = '<span>#network_infos#</span>'
                 } catch (e) {
                     console.error('[Monitoring] Error in initNetworkInfos:', e)
                 }
@@ -519,10 +521,10 @@
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
                     const networkEl = widgetRoot.querySelector('#network#id#')
-                    if (networkEl) {
-                        const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
-                        networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
-                    }
+                    if (!networkEl) return
+
+                    const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
+                    networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
                 } catch (e) {
                     console.error('[Monitoring] Error in initNetwork:', e)
                 }
@@ -542,37 +544,37 @@
                     // Load avg 1mn
                     const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
                     if (loadAvg1mn) {
-                        const html = buildThresholdHTML(
+                        const html1mn = buildThresholdHTML(
                             '#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
                             'Charge Système (1min)', '#load_avg_1mn_id#',
                             { min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
                             '#load_avg_1mn_tendance#'
                         )
-                        loadAvg1mn.innerHTML = html === '<span></span>' ? html : `1 min : ${html}`
+                        loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
                     }
 
                     // Load avg 5mn
                     const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
                     if (loadAvg5mn) {
-                        const html = buildThresholdHTML(
+                        const html5mn = buildThresholdHTML(
                             '#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
                             'Charge Système (5min)', '#load_avg_5mn_id#',
                             { min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
                             '#load_avg_5mn_tendance#'
                         )
-                        loadAvg5mn.innerHTML = html === '<span></span>' ? html : ` - 5 min : ${html}`
+                        loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
                     }
 
                     // Load avg 15mn
                     const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
                     if (loadAvg15mn) {
-                        const html = buildThresholdHTML(
+                        const html15mn = buildThresholdHTML(
                             '#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
                             'Charge Système (15min)', '#load_avg_15mn_id#',
                             { min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
                             '#load_avg_15mn_tendance#'
                         )
-                        loadAvg15mn.innerHTML = html === '<span></span>' ? html : ` - 15 min : ${html}`
+                        loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
                     }
                 } catch (e) {
                     console.error('[Monitoring] Error in initLoadAverage:', e)
@@ -697,9 +699,8 @@
 
                     // Ajouter le pourcentage dans le deuxième span
                     const percentSpan = volumeEl.querySelector('.syno-percent')
-                    if (percentSpan) {
-                        percentSpan.innerHTML = percentageHTML
-                    }
+                    if (!percentSpan) return
+                    percentSpan.innerHTML = percentageHTML
                 } catch (e) {
                     console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
                 }
diff --git a/core/template/mobile/AsusWRT.html b/core/template/mobile/AsusWRT.html
index 7c87de37..ce4b47a0 100644
--- a/core/template/mobile/AsusWRT.html
+++ b/core/template/mobile/AsusWRT.html
@@ -473,22 +473,22 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
-						const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-						loadAvg1mn.innerHTML = html
-					}
+					const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+					loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
+				}
 
-					// Load avg 5mn
-					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-					if (loadAvg5mn) {
-						const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-						loadAvg5mn.innerHTML = html
-					}
+				// Load avg 5mn
+				const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+				if (loadAvg5mn) {
+					const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+					loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
+				}
 
-					// Load avg 15mn
-					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-					if (loadAvg15mn) {
-						const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-						loadAvg15mn.innerHTML = html
+				// Load avg 15mn
+				const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+				if (loadAvg15mn) {
+					const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+					loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initLoadAverage:', e)
diff --git a/core/template/mobile/Monitoring.html b/core/template/mobile/Monitoring.html
index 0787ed63..2fd2b786 100644
--- a/core/template/mobile/Monitoring.html
+++ b/core/template/mobile/Monitoring.html
@@ -416,22 +416,22 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
-						const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-						loadAvg1mn.innerHTML = html
-					}
+					const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+					loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
+				}
 
-					// Load avg 5mn
-					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-					if (loadAvg5mn) {
-						const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-						loadAvg5mn.innerHTML = html
-					}
+				// Load avg 5mn
+				const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+				if (loadAvg5mn) {
+					const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+					loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
+				}
 
-					// Load avg 15mn
-					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-					if (loadAvg15mn) {
-						const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-						loadAvg15mn.innerHTML = html
+				// Load avg 15mn
+				const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+				if (loadAvg15mn) {
+					const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+					loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initLoadAverage:', e)
diff --git a/core/template/mobile/Synology.html b/core/template/mobile/Synology.html
index d655db08..32cbc321 100644
--- a/core/template/mobile/Synology.html
+++ b/core/template/mobile/Synology.html
@@ -458,22 +458,22 @@
                     // Load avg 1mn
                     const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
                     if (loadAvg1mn) {
-                        const html = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-                        loadAvg1mn.innerHTML = html
+                        const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+                        loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
                     }
 
                     // Load avg 5mn
                     const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
                     if (loadAvg5mn) {
-                        const html = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-                        loadAvg5mn.innerHTML = html
+                        const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+                        loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
                     }
 
                     // Load avg 15mn
                     const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
                     if (loadAvg15mn) {
-                        const html = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-                        loadAvg15mn.innerHTML = html
+                        const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+                        loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
                     }
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initLoadAverage:', e)

From d2ddcfa2e43ec21ea267498e69da29936a72b01f Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 10:08:44 +0100
Subject: [PATCH 19/24] update templates

---
 core/template/dashboard/Monitoring.html | 5 ++---
 core/template/dashboard/Synology.html   | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index 94ccc2d7..e25a0c04 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -460,10 +460,9 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkEl = widgetRoot.querySelector('#network#id#')
-				if (!networkEl) return
+					if (!networkEl) return
 
-				const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
-				networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+				networkEl.innerHTML = '<span>#network#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetwork:', e)
 				}
diff --git a/core/template/dashboard/Synology.html b/core/template/dashboard/Synology.html
index 739936f6..a38cf0f7 100644
--- a/core/template/dashboard/Synology.html
+++ b/core/template/dashboard/Synology.html
@@ -523,8 +523,7 @@
                     const networkEl = widgetRoot.querySelector('#network#id#')
                     if (!networkEl) return
 
-                    const history = { min: '#network_minHistory#', avg: '#network_averageHistory#', max: '#network_maxHistory#' }
-                    networkEl.innerHTML = buildThresholdHTML('#network#', '#network_colorlow#', '#network_colorhigh#', 'Vitesse du réseau', '#network_id#', history, '#network_tendance#', false)
+                    networkEl.innerHTML = '<span>#network#</span>'
                 } catch (e) {
                     console.error('[Monitoring] Error in initNetwork:', e)
                 }

From 9df2979d04edbd546388063223de839f8af3f521 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:16:52 +0100
Subject: [PATCH 20/24] Update Monitoring.class.php

---
 core/class/Monitoring.class.php | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/core/class/Monitoring.class.php b/core/class/Monitoring.class.php
index ddd10f75..8d86f89b 100644
--- a/core/class/Monitoring.class.php
+++ b/core/class/Monitoring.class.php
@@ -241,12 +241,14 @@ public static function pullCustom($_options) {
 		$mem_stats = config::byKey('configStatsMemCustom', 'Monitoring', '0') == '1' ? true : false;
 		if ($mem_stats) {
 			$mem_start_usage = memory_get_usage();
-			log::add('Monitoring', 'info', '[PULLCUSTOM] Memory Usage Start :: ' . round($mem_start_usage / 1024, 2) . ' Ko');
 		}
 
 		/** @var Monitoring $Monitoring */
 		$Monitoring = Monitoring::byId($_options['Monitoring_Id']);
 		if (is_object($Monitoring)) {
+			if ($mem_stats) {
+				log::add('Monitoring', 'info', '[' . $Monitoring->getName() .'][PULLCUSTOM] Memory Usage Start :: ' . round($mem_start_usage / 1024, 2) . ' Ko');
+			}
 			$cronState = $Monitoring->getCmd(null, 'cron_status');
 			if (is_object($cronState) && $cronState->execCmd() === 0) {
 				log::add('Monitoring', 'debug', '[' . $Monitoring->getName() .'][PULLCUSTOM] Pull (Custom) :: En Pause');
@@ -270,10 +272,10 @@ public static function pullCustom($_options) {
 				}
 				$Monitoring->refreshWidget();
 			}
-		}
-		if ($mem_stats) {
-			$mem_end_usage = memory_get_usage();
-			log::add('Monitoring', 'info', '[PULLCUSTOM] Memory Usage End :: ' . round($mem_end_usage / 1024, 2) . ' Ko | Conso :: ' . round(($mem_end_usage - $mem_start_usage) / 1024, 2) . ' Ko');
+			if ($mem_stats) {
+				$mem_end_usage = memory_get_usage();
+				log::add('Monitoring', 'info', '[' . $Monitoring->getName() .'][PULLCUSTOM] Memory Usage End :: ' . round($mem_end_usage / 1024, 2) . ' Ko | Conso :: ' . round(($mem_end_usage - $mem_start_usage) / 1024, 2) . ' Ko');
+			}
 		}
 	}
 

From fa63fecd6a9676bbe19ebe3a81a3bf78cae3ab27 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:37:26 +0100
Subject: [PATCH 21/24] Update Monitoring class

---
 core/class/Monitoring.class.php | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/core/class/Monitoring.class.php b/core/class/Monitoring.class.php
index 8d86f89b..9909f35e 100644
--- a/core/class/Monitoring.class.php
+++ b/core/class/Monitoring.class.php
@@ -279,13 +279,13 @@ public static function pullCustom($_options) {
 		}
 	}
 
-  	public static function postConfig_configPullLocal($value) {
-	    log::add('Monitoring', 'debug', '[CONFIG-SAVE] Configuration PullLocal :: '. $value);
-  	}
-  	
+	public static function postConfig_configPullLocal($value) {
+		log::add('Monitoring', 'debug', '[CONFIG-SAVE] Configuration PullLocal :: ' . $value);
+	}
+
 	public static function postConfig_configPull($value) {
-	    log::add('Monitoring', 'debug', '[CONFIG-SAVE] Configuration Pull :: '. $value);
-  	}
+		log::add('Monitoring', 'debug', '[CONFIG-SAVE] Configuration Pull :: ' . $value);
+	}
 
 	// Fonction exécutée automatiquement avant la suppression de l'équipement
 	public function preRemove() {
@@ -2118,10 +2118,10 @@ public function postSave() {
 			$cron->save();
 		} else {
 			$cron = cron::byClassAndFunction('Monitoring', 'pullCustom', array('Monitoring_Id' => intval($this->getId())));
-        	if (is_object($cron)) {
-				log::add('Monitoring', 'debug', '['. $this->getName() .'][POSTSAVE] Remove CustomPull');
-            	$cron->remove();
-        	}
+			if (is_object($cron)) {
+				log::add('Monitoring', 'debug', '[' . $this->getName() . '][POSTSAVE] Remove CustomPull');
+				$cron->remove();
+			}
 		}
 
 		$this->getInformations();

From 8e4b044e1eb0324540ccf08ce190766b98fda6c6 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:37:36 +0100
Subject: [PATCH 22/24] Update templates

---
 core/template/dashboard/Monitoring.html | 10 +++---
 core/template/mobile/Monitoring.html    | 42 ++++++++++++-------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/core/template/dashboard/Monitoring.html b/core/template/dashboard/Monitoring.html
index e25a0c04..0a974be4 100644
--- a/core/template/dashboard/Monitoring.html
+++ b/core/template/dashboard/Monitoring.html
@@ -430,8 +430,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-				if (!uptimeEl) return
-				uptimeEl.innerHTML = '<span>#uptime#</span>'
+					if (!uptimeEl) return
+					uptimeEl.innerHTML = '<span>#uptime#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initUptime:', e)
 				}
@@ -445,8 +445,8 @@
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
 					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-				if (!networkInfosEl) return
-				networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+					if (!networkInfosEl) return
+					networkInfosEl.innerHTML = '<span>#network_infos#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetworkInfos:', e)
 				}
@@ -462,7 +462,7 @@
 					const networkEl = widgetRoot.querySelector('#network#id#')
 					if (!networkEl) return
 
-				networkEl.innerHTML = '<span>#network#</span>'
+					networkEl.innerHTML = '<span>#network#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetwork:', e)
 				}
diff --git a/core/template/mobile/Monitoring.html b/core/template/mobile/Monitoring.html
index 2fd2b786..ef70d3b4 100644
--- a/core/template/mobile/Monitoring.html
+++ b/core/template/mobile/Monitoring.html
@@ -259,13 +259,13 @@
 			 */
 			const initIconSSH = () => {
 				try {
-					const el = widgetRoot.querySelector('#iconSSH#id#')
-					if (!el) return
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
 
 					if ('#cnx_ssh#' === 'OK') {
-						el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
 					} else if ('#cnx_ssh#' === 'KO') {
-						el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initIconSSH:', e)
@@ -277,8 +277,8 @@
 			 */
 			const initIconCron = () => {
 				try {
-					const el = widgetRoot.querySelector('#iconCron#id#')
-					if (!el) return
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
 
 					const isOn = '#cron_status#' === '1'
 					const isCustom = '#cron_status_custom#' === '1'
@@ -289,7 +289,7 @@
 					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
 					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
 
-					el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+					iconCron.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initIconCron:', e)
 				}
@@ -416,22 +416,22 @@
 					// Load avg 1mn
 					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
 					if (loadAvg1mn) {
-					const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-					loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
-				}
+						const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
+					}
 
-				// Load avg 5mn
-				const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-				if (loadAvg5mn) {
-					const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-					loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
-				}
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
+					}
 
-				// Load avg 15mn
-				const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-				if (loadAvg15mn) {
-					const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-					loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initLoadAverage:', e)

From afb4366442600ba65c095d26d31341d96e335fe6 Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:54:45 +0100
Subject: [PATCH 23/24] Update templates

---
 core/template/mobile/AsusWRT.html    | 106 +++++++++++++--------------
 core/template/mobile/Monitoring.html |  72 +++++++++---------
 core/template/mobile/Synology.html   |  92 +++++++++++------------
 3 files changed, 135 insertions(+), 135 deletions(-)

diff --git a/core/template/mobile/AsusWRT.html b/core/template/mobile/AsusWRT.html
index ce4b47a0..4c3b425c 100644
--- a/core/template/mobile/AsusWRT.html
+++ b/core/template/mobile/AsusWRT.html
@@ -271,13 +271,13 @@
 			 */
 			const initIconSSH = () => {
 				try {
-					const el = widgetRoot.querySelector('#iconSSH#id#')
-					if (!el) return
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
 
 					if ('#cnx_ssh#' === 'OK') {
-						el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
 					} else if ('#cnx_ssh#' === 'KO') {
-						el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initIconSSH:', e)
@@ -289,8 +289,8 @@
 			 */
 			const initIconCron = () => {
 				try {
-					const el = widgetRoot.querySelector('#iconCron#id#')
-					if (!el) return
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
 
 					const isOn = '#cron_status#' === '1'
 					const isCustom = '#cron_status_custom#' === '1'
@@ -301,7 +301,7 @@
 					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
 					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
 
-					el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+					iconCron.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initIconCron:', e)
 				}
@@ -312,13 +312,13 @@
 			 */
 			const initIconCheckFirmware = () => {
 				try {
-					const el = widgetRoot.querySelector('#iconCheckFirmware#id#')
-					if (!el) return
+					const iconCheckFirmware = widgetRoot.querySelector('#iconCheckFirmware#id#')
+					if (!iconCheckFirmware) return
 
 					if ('#asus_fw_check#' === '1') {
-						el.innerHTML = '<i title="Check du Firmware :: 1" class="fas fa-bell" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
+						iconCheckFirmware.innerHTML = '<i title="Check du Firmware :: 1" class="fas fa-bell" style="display: #asus_fw_check_display#;color: var(--al-success-color) !important;"></i>'
 					} else if ('#asus_fw_check#' === '0') {
-						el.innerHTML = '<i title="Check du Firmware :: 0" class="fas fa-bell-slash" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
+						iconCheckFirmware.innerHTML = '<i title="Check du Firmware :: 0" class="fas fa-bell-slash" style="display: #asus_fw_check_display#;color: var(--al-danger-color) !important;"></i>'
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initIconCheckFirmware:', e)
@@ -334,10 +334,10 @@
 			 */
 			const initRebootButton = () => {
 				try {
-					const btn = widgetRoot.querySelector('.reboot')
-					if (!btn) return
+					const rebootBtn = widgetRoot.querySelector('.reboot')
+					if (!rebootBtn) return
 
-					btn.addEventListener('click', () => {
+					rebootBtn.addEventListener('click', () => {
 						if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
 							jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
 						}
@@ -352,13 +352,13 @@
 			 */
 			const initRefreshButton = () => {
 				try {
-					const btn = widgetRoot.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
-					if (!btn) return
+					const refreshBtn = widgetRoot.querySelector('.eqLogic[data-eqLogic_uid="#uid#"] .refresh')
+					if (!refreshBtn) return
 
 					if ('#refresh_id#' !== '') {
-						btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
 					} else {
-						btn.remove()
+						refreshBtn.remove()
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initRefreshButton:', e)
@@ -376,9 +376,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#uptime#id#')
-					if (!el) return
-					el.innerHTML = '<span>#uptime#</span>'
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (!uptimeEl) return
+					uptimeEl.innerHTML = '<span>#uptime#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initUptime:', e)
 				}
@@ -391,9 +391,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#network_infos#id#')
-					if (!el) return
-					el.innerHTML = '<span>#network_infos#</span>'
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (!networkInfosEl) return
+					networkInfosEl.innerHTML = '<span>#network_infos#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initNetworkInfos:', e)
 				}
@@ -406,9 +406,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#network#id#')
-					if (!el) return
-					el.innerHTML = '<span>#network#</span>'
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (!networkEl) return
+					networkEl.innerHTML = '<span>#network#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initNetwork:', e)
 				}
@@ -421,9 +421,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#asus_clients#id#')
-					if (!el) return
-					el.innerHTML = '<span>#asus_clients#</span>'
+					const asusClientsEl = widgetRoot.querySelector('#asus_clients#id#')
+					if (!asusClientsEl) return
+					asusClientsEl.innerHTML = '<span>#asus_clients#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusClients:', e)
 				}
@@ -436,9 +436,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#asus_wan0_ip#id#')
-					if (!el) return
-					el.innerHTML = '<span>#asus_wan0_ip#</span>'
+					const asusWanIpEl = widgetRoot.querySelector('#asus_wan0_ip#id#')
+					if (!asusWanIpEl) return
+					asusWanIpEl.innerHTML = '<span>#asus_wan0_ip#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusWanIP:', e)
 				}
@@ -451,9 +451,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#asus_wifi_temp#id#')
-					if (!el) return
-					el.innerHTML = '<span>#asus_wifi_temp#</span>'
+					const asusWiFiTempEl = widgetRoot.querySelector('#asus_wifi_temp#id#')
+					if (!asusWiFiTempEl) return
+					asusWiFiTempEl.innerHTML = '<span>#asus_wifi_temp#</span>'
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initAsusWiFiTemp:', e)
 				}
@@ -502,16 +502,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#memory_available_percent#id#')
-					if (!el) return
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
 
 					const value = '#memory_available_percent#'
 					if (value === '') {
-						el.innerHTML = '<span>#memory#</span>'
+						memoryEl.innerHTML = '<span>#memory#</span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+					memoryEl.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initMemory:', e)
 				}
@@ -524,16 +524,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#swap_free_percent#id#')
-					if (!el) return
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
 
 					const value = '#swap_free_percent#'
 					if (value === '') {
-						el.innerHTML = '<span>#swap#</span>'
+						swapEl.innerHTML = '<span>#swap#</span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+					swapEl.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initSwap:', e)
 				}
@@ -546,16 +546,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#hdd#id#')
-					if (!el) return
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
 
 					const value = '#hdd_free_percent#'
 					if (value === '') {
-						el.innerHTML = '<span></span>'
+						hddEl.innerHTML = '<span></span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+					hddEl.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initHDD:', e)
 				}
@@ -600,12 +600,12 @@
 
 					const dataset = container.dataset
 					const persoId = dataset.persoId
-					const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
-					if (!el) return
+					const persoEl = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+					if (!persoEl) return
 
 					const value = dataset.persoValue
 					if (value === '') {
-						el.innerHTML = '<span></span>'
+						persoEl.innerHTML = '<span></span>'
 						return
 					}
 
@@ -615,9 +615,9 @@
 					const color = getColorStyle(val, low, high, false)
 
 					if (color) {
-						el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+						persoEl.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
 					} else {
-						el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+						persoEl.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
 					}
 				} catch (e) {
 					console.error('[Monitoring AsusWRT] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
diff --git a/core/template/mobile/Monitoring.html b/core/template/mobile/Monitoring.html
index ef70d3b4..9880a585 100644
--- a/core/template/mobile/Monitoring.html
+++ b/core/template/mobile/Monitoring.html
@@ -304,10 +304,10 @@
 			 */
 			const initRebootButton = () => {
 				try {
-					const btn = widgetRoot.querySelector('.reboot')
-					if (!btn) return
+					const rebootBtn = widgetRoot.querySelector('.reboot')
+					if (!rebootBtn) return
 
-					btn.addEventListener('click', () => {
+					rebootBtn.addEventListener('click', () => {
 						if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
 							jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
 						}
@@ -322,10 +322,10 @@
 			 */
 			const initPoweroffButton = () => {
 				try {
-					const btn = widgetRoot.querySelector('.poweroff')
-					if (!btn) return
+					const poweroffBtn = widgetRoot.querySelector('.poweroff')
+					if (!poweroffBtn) return
 
-					btn.addEventListener('click', () => {
+					poweroffBtn.addEventListener('click', () => {
 						if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
 							jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
 						}
@@ -340,13 +340,13 @@
 			 */
 			const initRefreshButton = () => {
 				try {
-					const btn = widgetRoot.querySelector('.refresh')
-					if (!btn) return
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
 
 					if ('#refresh_id#' !== '') {
-						btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
 					} else {
-						btn.remove()
+						refreshBtn.remove()
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initRefreshButton:', e)
@@ -364,9 +364,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#uptime#id#')
-					if (!el) return
-					el.innerHTML = '<span>#uptime#</span>'
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (!uptimeEl) return
+					uptimeEl.innerHTML = '<span>#uptime#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initUptime:', e)
 				}
@@ -379,9 +379,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#network_infos#id#')
-					if (!el) return
-					el.innerHTML = '<span>#network_infos#</span>'
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (!networkInfosEl) return
+					networkInfosEl.innerHTML = '<span>#network_infos#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetworkInfos:', e)
 				}
@@ -394,9 +394,9 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#network#id#')
-					if (!el) return
-					el.innerHTML = '<span>#network#</span>'
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (!networkEl) return
+					networkEl.innerHTML = '<span>#network#</span>'
 				} catch (e) {
 					console.error('[Monitoring] Error in initNetwork:', e)
 				}
@@ -445,16 +445,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#memory_available_percent#id#')
-					if (!el) return
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
 
 					const value = '#memory_available_percent#'
 					if (value === '') {
-						el.innerHTML = '<span>#memory#</span>'
+						memoryEl.innerHTML = '<span>#memory#</span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+					memoryEl.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring] Error in initMemory:', e)
 				}
@@ -467,16 +467,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#swap_free_percent#id#')
-					if (!el) return
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
 
 					const value = '#swap_free_percent#'
 					if (value === '') {
-						el.innerHTML = '<span>#swap#</span>'
+						swapEl.innerHTML = '<span>#swap#</span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+					swapEl.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring] Error in initSwap:', e)
 				}
@@ -489,16 +489,16 @@
 				try {
 					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-					const el = widgetRoot.querySelector('#hdd#id#')
-					if (!el) return
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
 
 					const value = '#hdd_free_percent#'
 					if (value === '') {
-						el.innerHTML = '<span></span>'
+						hddEl.innerHTML = '<span></span>'
 						return
 					}
 
-					el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+					hddEl.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
 				} catch (e) {
 					console.error('[Monitoring] Error in initHDD:', e)
 				}
@@ -543,12 +543,12 @@
 
 					const dataset = container.dataset
 					const persoId = dataset.persoId
-					const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
-					if (!el) return
+					const persoEl = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+					if (!persoEl) return
 
 					const value = dataset.persoValue
 					if (value === '') {
-						el.innerHTML = '<span></span>'
+						persoEl.innerHTML = '<span></span>'
 						return
 					}
 
@@ -558,9 +558,9 @@
 					const color = getColorStyle(val, low, high, false)
 
 					if (color) {
-						el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+						persoEl.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
 					} else {
-						el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+						persoEl.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
 					}
 				} catch (e) {
 					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
diff --git a/core/template/mobile/Synology.html b/core/template/mobile/Synology.html
index 32cbc321..53f76b98 100644
--- a/core/template/mobile/Synology.html
+++ b/core/template/mobile/Synology.html
@@ -301,13 +301,13 @@
              */
             const initIconSSH = () => {
                 try {
-                    const el = widgetRoot.querySelector('#iconSSH#id#')
-                    if (!el) return
+                    const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+                    if (!iconSSH) return
 
                     if ('#cnx_ssh#' === 'OK') {
-                        el.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+                        iconSSH.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
                     } else if ('#cnx_ssh#' === 'KO') {
-                        el.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+                        iconSSH.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
                     }
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initIconSSH:', e)
@@ -319,8 +319,8 @@
              */
             const initIconCron = () => {
                 try {
-                    const el = widgetRoot.querySelector('#iconCron#id#')
-                    if (!el) return
+                    const iconCron = widgetRoot.querySelector('#iconCron#id#')
+                    if (!iconCron) return
 
                     const isOn = '#cron_status#' === '1'
                     const isCustom = '#cron_status_custom#' === '1'
@@ -331,7 +331,7 @@
                     const customLabel = isCustom ? ' (Custom)' : ' (Default)'
                     const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
 
-                    el.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+                    iconCron.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initIconCron:', e)
                 }
@@ -346,10 +346,10 @@
              */
             const initRebootButton = () => {
                 try {
-                    const btn = widgetRoot.querySelector('.reboot')
-                    if (!btn) return
+                    const rebootBtn = widgetRoot.querySelector('.reboot')
+                    if (!rebootBtn) return
 
-                    btn.addEventListener('click', () => {
+                    rebootBtn.addEventListener('click', () => {
                         if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
                             jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
                         }
@@ -364,10 +364,10 @@
              */
             const initPoweroffButton = () => {
                 try {
-                    const btn = widgetRoot.querySelector('.poweroff')
-                    if (!btn) return
+                    const poweroffBtn = widgetRoot.querySelector('.poweroff')
+                    if (!poweroffBtn) return
 
-                    btn.addEventListener('click', () => {
+                    poweroffBtn.addEventListener('click', () => {
                         if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
                             jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
                         }
@@ -382,13 +382,13 @@
              */
             const initRefreshButton = () => {
                 try {
-                    const btn = widgetRoot.querySelector('.refresh')
-                    if (!btn) return
+                    const refreshBtn = widgetRoot.querySelector('.refresh')
+                    if (!refreshBtn) return
 
                     if ('#refresh_id#' !== '') {
-                        btn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+                        refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
                     } else {
-                        btn.remove()
+                        refreshBtn.remove()
                     }
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initRefreshButton:', e)
@@ -406,9 +406,9 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#uptime#id#')
-                    if (!el) return
-                    el.innerHTML = '<span>#uptime#</span>'
+                    const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+                    if (!uptimeEl) return
+                    uptimeEl.innerHTML = '<span>#uptime#</span>'
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initUptime:', e)
                 }
@@ -421,9 +421,9 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#network_infos#id#')
-                    if (!el) return
-                    el.innerHTML = '<span>#network_infos#</span>'
+                    const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+                    if (!networkInfosEl) return
+                    networkInfosEl.innerHTML = '<span>#network_infos#</span>'
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initNetworkInfos:', e)
                 }
@@ -436,9 +436,9 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#network#id#')
-                    if (!el) return
-                    el.innerHTML = '<span>#network#</span>'
+                    const networkEl = widgetRoot.querySelector('#network#id#')
+                    if (!networkEl) return
+                    networkEl.innerHTML = '<span>#network#</span>'
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initNetwork:', e)
                 }
@@ -487,12 +487,12 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#memory_available_percent#id#')
-                    if (!el) return
+                    const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+                    if (!memoryEl) return
 
                     const value = '#memory_available_percent#'
                     if (value === '') {
-                        el.innerHTML = '<span>#memory#</span>'
+                        memoryEl.innerHTML = '<span>#memory#</span>'
                         return
                     }
 
@@ -509,16 +509,16 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#swap_free_percent#id#')
-                    if (!el) return
+                    const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+                    if (!swapEl) return
 
                     const value = '#swap_free_percent#'
                     if (value === '') {
-                        el.innerHTML = '<span>#swap#</span>'
+                        swapEl.innerHTML = '<span>#swap#</span>'
                         return
                     }
 
-                    el.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+                    swapEl.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initSwap:', e)
                 }
@@ -531,16 +531,16 @@
                 try {
                     if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
 
-                    const el = widgetRoot.querySelector('#hdd#id#')
-                    if (!el) return
+                    const hddEl = widgetRoot.querySelector('#hdd#id#')
+                    if (!hddEl) return
 
                     const value = '#hdd_free_percent#'
                     if (value === '') {
-                        el.innerHTML = '<span></span>'
+                        hddEl.innerHTML = '<span></span>'
                         return
                     }
 
-                    el.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+                    hddEl.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initHDD:', e)
                 }
@@ -585,8 +585,8 @@
 
                     const dataset = container.dataset
                     const synoId = dataset.synoId
-                    const el = widgetRoot.querySelector('#' + synoId + '_unit#id#')
-                    if (!el) return
+                    const synoVolumeEl = widgetRoot.querySelector('#' + synoId + '_unit#id#')
+                    if (!synoVolumeEl) return
 
                     const value = dataset.synoValue
                     const valuePercent = dataset.synoValuePercent
@@ -598,7 +598,7 @@
                     }
 
                     if (!valuePercent || valuePercent === '' || valuePercent.startsWith('#')) {
-                        el.innerHTML = '<span>' + value + '</span>'
+                        synoVolumeEl.innerHTML = '<span>' + value + '</span>'
                         return
                     }
 
@@ -607,7 +607,7 @@
                     const high = parseFloat(dataset.synoHigh)
                     const color = getColorStyle(val, low, high, true)
 
-                    el.innerHTML = value + ' (<span class="state"' + color + '>' + valuePercent + '</span><span>%</span>)'
+                    synoVolumeEl.innerHTML = value + ' (<span class="state"' + color + '>' + valuePercent + '</span><span>%</span>)'
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initSynoVolume for', container.dataset?.synoId || 'unknown', ':', e)
                 }
@@ -623,12 +623,12 @@
 
                     const dataset = container.dataset
                     const persoId = dataset.persoId
-                    const el = widgetRoot.querySelector('#' + persoId + '_unite#id#')
-                    if (!el) return
+                    const persoEl = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+                    if (!persoEl) return
 
                     const value = dataset.persoValue
                     if (value === '') {
-                        el.innerHTML = '<span></span>'
+                        persoEl.innerHTML = '<span></span>'
                         return
                     }
 
@@ -638,9 +638,9 @@
                     const color = getColorStyle(val, low, high, false)
 
                     if (color) {
-                        el.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+                        persoEl.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
                     } else {
-                        el.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+                        persoEl.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
                     }
                 } catch (e) {
                     console.error('[Monitoring Syno] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)

From a6ce8e58fbb908a1bc29a17eb7f3b6f6c79a487e Mon Sep 17 00:00:00 2001
From: Olivier <16240457+TiTidom-RC@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:57:23 +0100
Subject: [PATCH 24/24] update Syno templates

---
 core/template/dashboard/Synology.html | 1602 ++++++++++++-------------
 core/template/mobile/Synology.html    | 1370 ++++++++++-----------
 2 files changed, 1486 insertions(+), 1486 deletions(-)

diff --git a/core/template/dashboard/Synology.html b/core/template/dashboard/Synology.html
index a38cf0f7..d2b6bfb9 100644
--- a/core/template/dashboard/Synology.html
+++ b/core/template/dashboard/Synology.html
@@ -1,803 +1,803 @@
 <div class="eqLogic eqLogic-widget text-center allowResize #custom_layout# #eqLogic_class# #class# #category#"
-    data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
-    data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
-    style="width: #width#;height: #height#;#style#;">
-    <style>
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
-            font-size: 12px !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
-            display: none !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-flex {
-            display: flex;
-            justify-content: space-between;
-            padding-left: 5px !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left {
-            display: flex;
-            flex: 0 1 auto;
-            float: left;
-            justify-content: flex-start;
-            align-items: center;
-            box-sizing: border-box;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
-            padding-right: 3px;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name {
-            overflow: auto;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center {
-            display: flex;
-            flex: 1 1 auto;
-            justify-content: center;
-            text-align: center;
-            padding-left: 5px;
-            padding-right: 5px;
-            box-sizing: border-box;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
-            overflow: hidden !important;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right {
-            display: flex;
-            flex: 0 1 auto;
-            float: right;
-            justify-content: flex-end;
-            align-items: center;
-            box-sizing: border-box;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right .cmd.refresh {
-            margin-top: unset !important;
-            padding-right: 5px;
-            color: inherit !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
-            display: block;
-            text-align: left;
-            padding-left: 5px;
-            overflow: auto;
-            white-space: nowrap;
-            width: 100%;
-            height: calc(100% - 24px);
-            box-sizing: border-box;
-        }
-    </style>
-    <div class="widget-name monitor-name-flex">
-        <div class="monitor-name-left">
-            <span id="iconSSH#id#" class="cmd monitor-btn"></span>
-            <span id="iconCron#id#" class="cmd monitor-btn"></span>
-            <span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
-                data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
-                <i class="cmd monitor-btn fas fa-redo"></i>
-            </span>
-            <span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
-                data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
-                <i class="cmd monitor-btn fas fa-power-off"></i>
-            </span>
-        </div>
-        <div class="widget-name monitor-name-center">
-            <span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
-            <a href="#eqLink#" class="reportModeHidden">#name_display# <span
-                    class="object_name">#object_name#</span></a>
-        </div>
-        <div class="monitor-name-right">
-            <span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
-                <i class="fas fa-sync"></i>
-            </span>
-        </div>
-    </div>
-    <div class="monitor-cmds">
-        <div class="tooltips" style="display: #distri_name_display#;">
-            <span
-                title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
-            <span>#distri_name#</span>
-        </div>
-        <div class="tooltips" style="display: #uptime_display#;">
-            <span
-                title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
-            <span id="uptime#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #load_avg_display#;">
-            <span
-                title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
-            <span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #memory_display#;">
-            <span
-                title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
-            <span id="memory_available_percent#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #swap_display#;">
-            <span
-                title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
-            <span id="swap_free_percent#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #network_infos_display#;">
-            <span
-                title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
-            <span id="network_infos#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #network_display#;">
-            <span
-                title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
-            <span id="network#id#"></span>
-        </div>
-        <!-- Cartes réseau supplémentaires -->
-        #multi_network_cards#
-        <div class="tooltips" style="display: #hdd_display#;">
-            <span
-                title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
-            <span id="hdd#id#"></span>
-        </div>
-        <div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;" data-syno-id="syno_hddv2"
-            data-syno-title="Syno Volume 2" data-syno-value="#syno_hddv2_free_percent#"
-            data-syno-color-low="#syno_hddv2_free_percent_colorlow#"
-            data-syno-color-high="#syno_hddv2_free_percent_colorhigh#" data-syno-label="Syno Volume 2 (% Libre)"
-            data-syno-cmd-id="#syno_hddv2_free_percent_id#" data-syno-tendance="#syno_hddv2_free_percent_tendance#"
-            data-syno-prefix="#syno_hddv2# (" data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
-            data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
-            data-syno-history-max="#syno_hddv2_free_percent_maxHistory#" data-syno-value-date="#syno_hddv2_value#"
-            data-syno-collect-date="#syno_hddv2_collect#">
-            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
-            <span class="syno-percent"></span>
-        </div>
-        <div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;" data-syno-id="syno_hddv3"
-            data-syno-title="Syno Volume 3" data-syno-value="#syno_hddv3_free_percent#"
-            data-syno-color-low="#syno_hddv3_free_percent_colorlow#"
-            data-syno-color-high="#syno_hddv3_free_percent_colorhigh#" data-syno-label="Syno Volume 3 (% Libre)"
-            data-syno-cmd-id="#syno_hddv3_free_percent_id#" data-syno-tendance="#syno_hddv3_free_percent_tendance#"
-            data-syno-prefix="#syno_hddv3# (" data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
-            data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
-            data-syno-history-max="#syno_hddv3_free_percent_maxHistory#" data-syno-value-date="#syno_hddv3_value#"
-            data-syno-collect-date="#syno_hddv3_collect#">
-            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
-            <span class="syno-percent"></span>
-        </div>
-        <div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;" data-syno-id="syno_hddv4"
-            data-syno-title="Syno Volume 4" data-syno-value="#syno_hddv4_free_percent#"
-            data-syno-color-low="#syno_hddv4_free_percent_colorlow#"
-            data-syno-color-high="#syno_hddv4_free_percent_colorhigh#" data-syno-label="Syno Volume 4 (% Libre)"
-            data-syno-cmd-id="#syno_hddv4_free_percent_id#" data-syno-tendance="#syno_hddv4_free_percent_tendance#"
-            data-syno-prefix="#syno_hddv4# (" data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
-            data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
-            data-syno-history-max="#syno_hddv4_free_percent_maxHistory#" data-syno-value-date="#syno_hddv4_value#"
-            data-syno-collect-date="#syno_hddv4_collect#">
-            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
-            <span class="syno-percent"></span>
-        </div>
-        <div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;" data-syno-id="syno_hddusb"
-            data-syno-title="Syno Volume USB" data-syno-value="#syno_hddusb_free_percent#"
-            data-syno-color-low="#syno_hddusb_free_percent_colorlow#"
-            data-syno-color-high="#syno_hddusb_free_percent_colorhigh#" data-syno-label="Syno Volume USB (% Libre)"
-            data-syno-cmd-id="#syno_hddusb_free_percent_id#" data-syno-tendance="#syno_hddusb_free_percent_tendance#"
-            data-syno-prefix="#syno_hddusb# (" data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
-            data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
-            data-syno-history-max="#syno_hddusb_free_percent_maxHistory#" data-syno-value-date="#syno_hddusb_value#"
-            data-syno-collect-date="#syno_hddusb_collect#">
-            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
-            <span class="syno-percent"></span>
-        </div>
-        <div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
-            data-syno-id="syno_hddesata" data-syno-title="Syno Volume eSATA"
-            data-syno-value="#syno_hddesata_free_percent#" data-syno-color-low="#syno_hddesata_free_percent_colorlow#"
-            data-syno-color-high="#syno_hddesata_free_percent_colorhigh#" data-syno-label="Syno Volume eSATA (% Libre)"
-            data-syno-cmd-id="#syno_hddesata_free_percent_id#"
-            data-syno-tendance="#syno_hddesata_free_percent_tendance#" data-syno-prefix="#syno_hddesata# ("
-            data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
-            data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
-            data-syno-history-max="#syno_hddesata_free_percent_maxHistory#" data-syno-value-date="#syno_hddesata_value#"
-            data-syno-collect-date="#syno_hddesata_collect#">
-            <span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
-            <span class="syno-percent"></span>
-        </div>
-        <div class="tooltips" style="display: #cpu_display#;">
-            <span
-                title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
-            <span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
-            data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
-            data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
-            data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
-            <span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
-            <span id="perso1_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
-            data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
-            data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
-            data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
-            <span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
-            <span id="perso2_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
-            data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
-            data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
-            data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
-            <span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
-            <span id="perso3_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
-            data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
-            data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
-            data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
-            <span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
-                style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
-            <span id="perso4_unite#id#"></span>
-        </div>
-    </div>
-    #divGraphInfo#
-    <script>
-        (() => {
-            'use strict'
-
-            // Get reference to this specific widget container
-            const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
-            if (!widgetRoot) return
-
-            // ========================================
-            // === UTILITY FUNCTIONS ===
-            // ========================================
-
-            /**
-             * Safely parse JSON from data attribute
-             * @param {string} jsonString - JSON string to parse
-             * @param {object} fallback - Fallback value if parsing fails
-             * @returns {object} Parsed object or fallback
-             */
-            const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
-                if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
-                try {
-                    return JSON.parse(jsonString)
-                } catch (e) {
-                    console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
-                    return fallback
-                }
-            }
-
-
-
-            /**
-             * Calculate color style based on thresholds
-             * @param {number} val - Current value
-             * @param {number} low - Low threshold
-             * @param {number} high - High threshold
-             * @param {boolean} reversed - If true, higher values are better (green)
-             * @returns {string} Color style string
-             */
-            const getColorStyle = (val, low, high, reversed = false) => {
-                if (reversed) {
-                    // Reversed thresholds: higher percentage = better (green)
-                    if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-                    if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-                } else {
-                    // Normal thresholds: lower = green, higher = red
-                    if (val < low) return ' style="color: var(--al-success-color) !important;"'
-                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-                    if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
-                }
-                return ''
-            }
-
-            /**
-             * Build HTML for threshold-based value with color
-             * @param {string} value - Value to display
-             * @param {string} lowThreshold - Low threshold value
-             * @param {string} highThreshold - High threshold value
-             * @param {string} label - Label for tooltip
-             * @param {string} cmdId - Command ID
-             * @param {object} history - History stats {min, avg, max}
-             * @param {string} tendance - Trend indicator
-             * @param {boolean} reversed - If true, higher values are better
-             * @returns {string} HTML string
-             */
-            const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
-                if (!value || value === '' || value.startsWith('#')) return '<span></span>'
-
-                const val = parseFloat(value)
-                const low = parseFloat(lowThreshold)
-                const high = parseFloat(highThreshold)
-                const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-                const color = getColorStyle(val, low, high, reversed)
-                const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
-
-                return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
-            }
-
-            /**
-             * Build HTML for percentage-based value with color and unit
-             * @param {string} value - Value to display
-             * @param {string} lowThreshold - Low threshold value
-             * @param {string} highThreshold - High threshold value
-             * @param {string} label - Label for tooltip
-             * @param {string} cmdId - Command ID
-             * @param {object} history - History stats {min, avg, max}
-             * @param {string} tendance - Trend indicator
-             * @param {string} prefix - Prefix text (e.g., "#memory# (")
-             * @param {string} unit - Unit (e.g., "%")
-             * @param {boolean} reversed - If true, higher values are better
-             * @returns {string} HTML string
-             */
-            const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
-                if (!value || value === '' || value.startsWith('#')) return '<span></span>'
-
-                const val = parseFloat(value)
-                const low = parseFloat(lowThreshold)
-                const high = parseFloat(highThreshold)
-                const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-                const color = getColorStyle(val, low, high, reversed)
-                const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
-
-                const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
-                const unitSpan = `<span>${unit}${tendanceStr}</span>`
-
-                // Only add prefix if it exists and is not a placeholder
-                if (prefix && !prefix.startsWith('#')) {
-                    return `${prefix}${valueSpan}${unitSpan})`
-                }
-                return `${valueSpan}${unitSpan}`
-            }
-
-            // ========================================
-            // === ICON HANDLERS ===
-            // ========================================
-
-            /**
-             * Initialize SSH connection status icon
-             */
-            const initIconSSH = () => {
-                try {
-                    const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
-                    if (!iconSSH) return
-
-                    if ('#cnx_ssh#' === 'OK') {
-                        iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
-                    } else if ('#cnx_ssh#' === 'KO') {
-                        iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
-                    }
-                } catch (e) {
-                    console.error('[Monitoring] Error in initIconSSH:', e)
-                }
-            }
-
-            /**
-             * Initialize Cron status icon
-             */
-            const initIconCron = () => {
-                try {
-                    const iconCron = widgetRoot.querySelector('#iconCron#id#')
-                    if (!iconCron) return
-
-                    const isOn = '#cron_status#' === '1'
-                    const isCustom = '#cron_status_custom#' === '1'
-                    const display = '#cron_status_display#'
-
-                    const icon = isOn ? 'play-circle' : 'pause-circle'
-                    const label = isOn ? 'ON' : 'OFF'
-                    const customLabel = isCustom ? 'Custom' : 'Default'
-                    const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-
-                    iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
-                } catch (e) {
-                    console.error('[Monitoring] Error in initIconCron:', e)
-                }
-            }
-
-            // ========================================
-            // === BUTTON HANDLERS ===
-            // ========================================
-
-            /**
-             * Initialize Reboot button with confirmation dialog
-             */
-            const initRebootButton = () => {
-                try {
-                    const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
-                    rebootBtn?.addEventListener('click', () => {
-                        jeeDialog.confirm({
-                            title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
-                            message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
-                            buttons: {
-                                confirm: { label: 'Redémarrer', className: 'warning' },
-                                cancel: { label: 'Annuler', className: 'info' }
-                            },
-                            callback: (result) => {
-                                if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-                            }
-                        })
-                    })
-                } catch (e) {
-                    console.error('[Monitoring] Error in initRebootButton:', e)
-                }
-            }
-
-            /**
-             * Initialize Poweroff button with confirmation dialog
-             */
-            const initPoweroffButton = () => {
-                try {
-                    const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
-                    poweroffBtn?.addEventListener('click', () => {
-                        jeeDialog.confirm({
-                            title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
-                            message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
-                            buttons: {
-                                confirm: { label: 'Eteindre', className: 'danger' },
-                                cancel: { label: 'Annuler', className: 'info' }
-                            },
-                            callback: (result) => {
-                                if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
-                            }
-                        })
-                    })
-                } catch (e) {
-                    console.error('[Monitoring] Error in initPoweroffButton:', e)
-                }
-            }
-
-            /**
-             * Initialize Refresh button
-             */
-            const initRefreshButton = () => {
-                try {
-                    const refreshBtn = widgetRoot.querySelector('.refresh')
-                    if (!refreshBtn) return
-
-                    if ('#refresh_id#' !== '') {
-                        refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-                    } else {
-                        refreshBtn.remove()
-                    }
-                } catch (e) {
-                    console.error('[Monitoring] Error in initRefreshButton:', e)
-                }
-            }
-
-            // ========================================
-            // === VALUE DISPLAYS - Simple ===
-            // ========================================
-
-            /**
-             * Initialize Uptime display
-             */
-            const initUptime = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-                    if (!uptimeEl) return
-                    uptimeEl.innerHTML = '<span>#uptime#</span>'
-                } catch (e) {
-                    console.error('[Monitoring] Error in initUptime:', e)
-                }
-            }
-
-            /**
-             * Initialize Network Infos display
-             */
-            const initNetworkInfos = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-                    if (!networkInfosEl) return
-                    networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-                } catch (e) {
-                    console.error('[Monitoring] Error in initNetworkInfos:', e)
-                }
-            }
-
-            /**
-             * Initialize Network Traffic display
-             */
-            const initNetwork = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const networkEl = widgetRoot.querySelector('#network#id#')
-                    if (!networkEl) return
-
-                    networkEl.innerHTML = '<span>#network#</span>'
-                } catch (e) {
-                    console.error('[Monitoring] Error in initNetwork:', e)
-                }
-            }
-
-            // ========================================
-            // === VALUE DISPLAYS - With Thresholds ===
-            // ========================================
-
-            /**
-             * Initialize Load Average displays (1mn, 5mn, 15mn)
-             */
-            const initLoadAverage = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    // Load avg 1mn
-                    const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
-                    if (loadAvg1mn) {
-                        const html1mn = buildThresholdHTML(
-                            '#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
-                            'Charge Système (1min)', '#load_avg_1mn_id#',
-                            { min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
-                            '#load_avg_1mn_tendance#'
-                        )
-                        loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
-                    }
-
-                    // Load avg 5mn
-                    const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-                    if (loadAvg5mn) {
-                        const html5mn = buildThresholdHTML(
-                            '#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
-                            'Charge Système (5min)', '#load_avg_5mn_id#',
-                            { min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
-                            '#load_avg_5mn_tendance#'
-                        )
-                        loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
-                    }
-
-                    // Load avg 15mn
-                    const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-                    if (loadAvg15mn) {
-                        const html15mn = buildThresholdHTML(
-                            '#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
-                            'Charge Système (15min)', '#load_avg_15mn_id#',
-                            { min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
-                            '#load_avg_15mn_tendance#'
-                        )
-                        loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
-                    }
-                } catch (e) {
-                    console.error('[Monitoring] Error in initLoadAverage:', e)
-                }
-            }
-
-            /**
-             * Initialize Memory display with percentage
-             */
-            const initMemory = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
-                    if (!memoryEl) return
-
-                    const value = '#memory_available_percent#'
-                    if (value === '') {
-                        memoryEl.innerHTML = '<span>#memory#</span>'
-                        return
-                    }
-
-                    memoryEl.innerHTML = buildPercentageHTML(
-                        value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
-                        'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
-                        { min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
-                        '#memory_available_percent_tendance#', '#memory# (', '%', true
-                    )
-                } catch (e) {
-                    console.error('[Monitoring] Error in initMemory:', e)
-                }
-            }
-
-            /**
-             * Initialize Swap display with percentage
-             */
-            const initSwap = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
-                    if (!swapEl) return
-
-                    const value = '#swap_free_percent#'
-                    if (value === '') {
-                        swapEl.innerHTML = '<span></span>'
-                        return
-                    }
-
-                    swapEl.innerHTML = buildPercentageHTML(
-                        value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
-                        'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
-                        { min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
-                        '#swap_free_percent_tendance#', '#swap# (', '%', true
-                    )
-                } catch (e) {
-                    console.error('[Monitoring] Error in initSwap:', e)
-                }
-            }
-
-            /**
-             * Initialize HDD display with percentage
-             */
-            const initHDD = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const hddEl = widgetRoot.querySelector('#hdd#id#')
-                    if (!hddEl) return
-
-                    const value = '#hdd_free_percent#'
-                    if (value === '') {
-                        hddEl.innerHTML = '<span></span>'
-                        return
-                    }
-
-                    hddEl.innerHTML = buildPercentageHTML(
-                        value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
-                        'Espace Disque (% Libre)', '#hdd_free_percent_id#',
-                        { min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
-                        '#hdd_free_percent_tendance#', '#hdd# (', '%', true
-                    )
-                } catch (e) {
-                    console.error('[Monitoring] Error in initHDD:', e)
-                }
-            }
-
-            /**
-             * Initialize Synology volume display with icon and percentage
-             */
-            const initSynoVolume = (volumeEl) => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const dataset = volumeEl.dataset
-
-                    // Vérifier d'abord la valeur (pas d'opération DOM si invalide)
-                    if (!dataset.synoValue || dataset.synoValue === '' || dataset.synoValue.startsWith('#')) {
-                        volumeEl.style.display = 'none'
-                        return
-                    }
-
-                    // Récupérer l'icône uniquement si value est valide
-                    const iconSpan = volumeEl.querySelector('span:first-child')
-                    const icon = iconSpan?.innerHTML.trim()
-
-                    // Vérifier l'icône
-                    if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
-                        volumeEl.style.display = 'none'
-                        return
-                    }
-
-                    // Construire le contenu (tout est valide)
-                    const history = { min: dataset.synoHistoryMin || '-', avg: dataset.synoHistoryAvg || '-', max: dataset.synoHistoryMax || '-' }
-                    const percentageHTML = buildPercentageHTML(
-                        dataset.synoValue, dataset.synoColorLow, dataset.synoColorHigh,
-                        dataset.synoLabel, dataset.synoCmdId, history, dataset.synoTendance,
-                        dataset.synoPrefix, '%', true
-                    )
-
-                    iconSpan.setAttribute('title', `${dataset.synoTitle}<br><i>Date de valeur : ${dataset.synoValueDate}<br>Date de collecte : ${dataset.synoCollectDate}</i>`)
-
-                    // Ajouter le pourcentage dans le deuxième span
-                    const percentSpan = volumeEl.querySelector('.syno-percent')
-                    if (!percentSpan) return
-                    percentSpan.innerHTML = percentageHTML
-                } catch (e) {
-                    console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
-                }
-            }
-            const initCPU = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const cpuEl = widgetRoot.querySelector('#cpu#id#')
-                    if (!cpuEl) return
-
-                    if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
-                        cpuEl.innerHTML = '<span>#cpu# </span>'
-
-                        const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
-                        if (!tempEl) return
-
-                        const temp = parseFloat('#cpu_temp#')
-                        const low = parseFloat('#cpu_temp_colorlow#')
-                        const high = parseFloat('#cpu_temp_colorhigh#')
-                        const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
-                        const color = getColorStyle(temp, low, high, false)
-
-                        tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
-                    } else {
-                        cpuEl.innerHTML = '<span>#cpu#</span>'
-                    }
-                } catch (e) {
-                    console.error('[Monitoring] Error in initCPU:', e)
-                }
-            }
-
-            /**
-             * Initialize custom command display (perso1-4) using data attributes
-             * @param {HTMLElement} container - The container div with data-perso-* attributes
-             */
-            const initPerso = (container) => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const dataset = container.dataset
-                    const persoId = dataset.persoId
-                    const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
-                    if (!el) return
-
-                    const value = dataset.persoValue
-                    if (value === '') {
-                        el.innerHTML = '<span></span>'
-                        return
-                    }
-
-                    const val = parseFloat(value)
-                    const low = parseFloat(dataset.persoLow)
-                    const high = parseFloat(dataset.persoHigh)
-                    const history = safeJSONParse(dataset.persoHistory)
-                    const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
-                    const color = getColorStyle(val, low, high, false)
-
-                    el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
-                } catch (e) {
-                    console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
-                }
-            }
-
-            // ========================================
-            // === INITIALIZATION ===
-            // ========================================
-
-            // Only initialize if template is properly instantiated
-            if ('#uid#') {
-                // Icon handlers
-                initIconSSH()
-                initIconCron()
-
-                // Button handlers
-                initRebootButton()
-                initPoweroffButton()
-                initRefreshButton()
-
-                // Simple value displays
-                initUptime()
-                initNetworkInfos()
-                initNetwork()
-
-                // Value displays with thresholds
-                initLoadAverage()
-                initMemory()
-                initSwap()
-                initHDD()
-
-                // Synology volumes
-                widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-                // CPU with temperature
-                initCPU()
-
-                // Custom commands - generic initialization using data attributes
-                widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
-            }
-        })()
-    </script>
+	data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
+	data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
+	style="width: #width#;height: #height#;#style#;">
+	<style>
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] .cmd.monitor-btn {
+			font-size: 12px !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"].editingMode .cmd.monitor-btn {
+			display: none !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-flex {
+			display: flex;
+			justify-content: space-between;
+			padding-left: 5px !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left {
+			display: flex;
+			flex: 0 1 auto;
+			float: left;
+			justify-content: flex-start;
+			align-items: center;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-left span:not(:empty) {
+			padding-right: 3px;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name {
+			overflow: auto;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center {
+			display: flex;
+			flex: 1 1 auto;
+			justify-content: center;
+			text-align: center;
+			padding-left: 5px;
+			padding-right: 5px;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.widget-name.monitor-name-center a {
+			overflow: hidden !important;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right {
+			display: flex;
+			flex: 0 1 auto;
+			float: right;
+			justify-content: flex-end;
+			align-items: center;
+			box-sizing: border-box;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-name-right .cmd.refresh {
+			margin-top: unset !important;
+			padding-right: 5px;
+			color: inherit !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
+			display: block;
+			text-align: left;
+			padding-left: 5px;
+			overflow: auto;
+			white-space: nowrap;
+			width: 100%;
+			height: calc(100% - 24px);
+			box-sizing: border-box;
+		}
+	</style>
+	<div class="widget-name monitor-name-flex">
+		<div class="monitor-name-left">
+			<span id="iconSSH#id#" class="cmd monitor-btn"></span>
+			<span id="iconCron#id#" class="cmd monitor-btn"></span>
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+				<i class="cmd monitor-btn fas fa-redo"></i>
+			</span>
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+				<i class="cmd monitor-btn fas fa-power-off"></i>
+			</span>
+		</div>
+		<div class="widget-name monitor-name-center">
+			<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
+			<a href="#eqLink#" class="reportModeHidden">#name_display# <span
+					class="object_name">#object_name#</span></a>
+		</div>
+		<div class="monitor-name-right">
+			<span class="cmd refresh cursor" title="Rafraîchir" data-cmd_id="#refresh_id#">
+				<i class="fas fa-sync"></i>
+			</span>
+		</div>
+	</div>
+	<div class="monitor-cmds">
+		<div class="tooltips" style="display: #distri_name_display#;">
+			<span
+				title="Distribution Linux<br><i>Date de valeur : #distri_name_value#<br>Date de collecte : #distri_name_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span>#distri_name#</span>
+		</div>
+		<div class="tooltips" style="display: #uptime_display#;">
+			<span
+				title="Temps d'Activité (UpTime)<br><i>Date de valeur : #uptime_value#<br>Date de collecte : #uptime_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span id="uptime#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #load_avg_display#;">
+			<span
+				title="Charge Système (Load Average)<br><i>Date de valeur : #load_avg_value#<br>Date de collecte : #load_avg_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #memory_display#;">
+			<span
+				title="Mémoire Vive (% Disponible)<br><i>Date de valeur : #memory_value#<br>Date de collecte : #memory_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span id="memory_available_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #swap_display#;">
+			<span
+				title="Mémoire Swap (% Libre)<br><i>Date de valeur : #swap_value#<br>Date de collecte : #swap_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span id="swap_free_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_infos_display#;">
+			<span
+				title="Infos Réseau<br><i>Date de valeur : #network_infos_value#<br>Date de collecte : #network_infos_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span id="network_infos#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_display#;">
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#)<br><i>Date de valeur : #network_value#<br>Date de collecte : #network_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span id="network#id#"></span>
+		</div>
+		<!-- Cartes réseau supplémentaires -->
+		#multi_network_cards#
+		<div class="tooltips" style="display: #hdd_display#;">
+			<span
+				title="Espace Disque (% Libre)<br><i>Date de valeur : #hdd_value#<br>Date de collecte : #hdd_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span id="hdd#id#"></span>
+		</div>
+		<div id="syno_hddv2#id#" class="tooltips" style="display: #syno_hddv2_display#;" data-syno-id="syno_hddv2"
+			data-syno-title="Syno Volume 2" data-syno-value="#syno_hddv2_free_percent#"
+			data-syno-color-low="#syno_hddv2_free_percent_colorlow#"
+			data-syno-color-high="#syno_hddv2_free_percent_colorhigh#" data-syno-label="Syno Volume 2 (% Libre)"
+			data-syno-cmd-id="#syno_hddv2_free_percent_id#" data-syno-tendance="#syno_hddv2_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv2# (" data-syno-history-min="#syno_hddv2_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv2_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv2_free_percent_maxHistory#" data-syno-value-date="#syno_hddv2_value#"
+			data-syno-collect-date="#syno_hddv2_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv2_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddv3#id#" class="tooltips" style="display: #syno_hddv3_display#;" data-syno-id="syno_hddv3"
+			data-syno-title="Syno Volume 3" data-syno-value="#syno_hddv3_free_percent#"
+			data-syno-color-low="#syno_hddv3_free_percent_colorlow#"
+			data-syno-color-high="#syno_hddv3_free_percent_colorhigh#" data-syno-label="Syno Volume 3 (% Libre)"
+			data-syno-cmd-id="#syno_hddv3_free_percent_id#" data-syno-tendance="#syno_hddv3_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv3# (" data-syno-history-min="#syno_hddv3_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv3_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv3_free_percent_maxHistory#" data-syno-value-date="#syno_hddv3_value#"
+			data-syno-collect-date="#syno_hddv3_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv3_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddv4#id#" class="tooltips" style="display: #syno_hddv4_display#;" data-syno-id="syno_hddv4"
+			data-syno-title="Syno Volume 4" data-syno-value="#syno_hddv4_free_percent#"
+			data-syno-color-low="#syno_hddv4_free_percent_colorlow#"
+			data-syno-color-high="#syno_hddv4_free_percent_colorhigh#" data-syno-label="Syno Volume 4 (% Libre)"
+			data-syno-cmd-id="#syno_hddv4_free_percent_id#" data-syno-tendance="#syno_hddv4_free_percent_tendance#"
+			data-syno-prefix="#syno_hddv4# (" data-syno-history-min="#syno_hddv4_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddv4_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddv4_free_percent_maxHistory#" data-syno-value-date="#syno_hddv4_value#"
+			data-syno-collect-date="#syno_hddv4_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddv4_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddusb#id#" class="tooltips" style="display: #syno_hddusb_display#;" data-syno-id="syno_hddusb"
+			data-syno-title="Syno Volume USB" data-syno-value="#syno_hddusb_free_percent#"
+			data-syno-color-low="#syno_hddusb_free_percent_colorlow#"
+			data-syno-color-high="#syno_hddusb_free_percent_colorhigh#" data-syno-label="Syno Volume USB (% Libre)"
+			data-syno-cmd-id="#syno_hddusb_free_percent_id#" data-syno-tendance="#syno_hddusb_free_percent_tendance#"
+			data-syno-prefix="#syno_hddusb# (" data-syno-history-min="#syno_hddusb_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddusb_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddusb_free_percent_maxHistory#" data-syno-value-date="#syno_hddusb_value#"
+			data-syno-collect-date="#syno_hddusb_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddusb_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div id="syno_hddesata#id#" class="tooltips" style="display: #syno_hddesata_display#;"
+			data-syno-id="syno_hddesata" data-syno-title="Syno Volume eSATA"
+			data-syno-value="#syno_hddesata_free_percent#" data-syno-color-low="#syno_hddesata_free_percent_colorlow#"
+			data-syno-color-high="#syno_hddesata_free_percent_colorhigh#" data-syno-label="Syno Volume eSATA (% Libre)"
+			data-syno-cmd-id="#syno_hddesata_free_percent_id#"
+			data-syno-tendance="#syno_hddesata_free_percent_tendance#" data-syno-prefix="#syno_hddesata# ("
+			data-syno-history-min="#syno_hddesata_free_percent_minHistory#"
+			data-syno-history-avg="#syno_hddesata_free_percent_averageHistory#"
+			data-syno-history-max="#syno_hddesata_free_percent_maxHistory#" data-syno-value-date="#syno_hddesata_value#"
+			data-syno-collect-date="#syno_hddesata_collect#">
+			<span style="width:15px;max-width:15px;max-height:15px;">#syno_hddesata_icon#</span>
+			<span class="syno-percent"></span>
+		</div>
+		<div class="tooltips" style="display: #cpu_display#;">
+			<span
+				title="Nombre CPU - Fréquence (Température)<br><i>Date de valeur : #cpu_value#<br>Date de collecte : #cpu_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-cmd-id="#perso1_id#" data-perso-unite="#perso1_unite#" data-perso-tendance="#perso1_tendance#"
+			data-perso-history='{"min":"#perso1_minHistory#","avg":"#perso1_averageHistory#","max":"#perso1_maxHistory#"}'>
+			<span title="#perso1_name#<br><i>Date de valeur : #perso1_value#<br>Date de collecte : #perso1_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+			<span id="perso1_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-cmd-id="#perso2_id#" data-perso-unite="#perso2_unite#" data-perso-tendance="#perso2_tendance#"
+			data-perso-history='{"min":"#perso2_minHistory#","avg":"#perso2_averageHistory#","max":"#perso2_maxHistory#"}'>
+			<span title="#perso2_name#<br><i>Date de valeur : #perso2_value#<br>Date de collecte : #perso2_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+			<span id="perso2_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-cmd-id="#perso3_id#" data-perso-unite="#perso3_unite#" data-perso-tendance="#perso3_tendance#"
+			data-perso-history='{"min":"#perso3_minHistory#","avg":"#perso3_averageHistory#","max":"#perso3_maxHistory#"}'>
+			<span title="#perso3_name#<br><i>Date de valeur : #perso3_value#<br>Date de collecte : #perso3_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+			<span id="perso3_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-cmd-id="#perso4_id#" data-perso-unite="#perso4_unite#" data-perso-tendance="#perso4_tendance#"
+			data-perso-history='{"min":"#perso4_minHistory#","avg":"#perso4_averageHistory#","max":"#perso4_maxHistory#"}'>
+			<span title="#perso4_name#<br><i>Date de valeur : #perso4_value#<br>Date de collecte : #perso4_collect#</i>"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+			<span id="perso4_unite#id#"></span>
+		</div>
+	</div>
+	#divGraphInfo#
+	<script>
+		(() => {
+			'use strict'
+
+			// Get reference to this specific widget container
+			const widgetRoot = document.querySelector('.eqLogic-widget[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Safely parse JSON from data attribute
+			 * @param {string} jsonString - JSON string to parse
+			 * @param {object} fallback - Fallback value if parsing fails
+			 * @returns {object} Parsed object or fallback
+			 */
+			const safeJSONParse = (jsonString, fallback = { min: '-', avg: '-', max: '-' }) => {
+				if (!jsonString || jsonString === 'undefined' || jsonString === '') return fallback
+				try {
+					return JSON.parse(jsonString)
+				} catch (e) {
+					console.warn('[Monitoring] JSON parse error:', e, 'Input:', jsonString)
+					return fallback
+				}
+			}
+
+
+
+			/**
+			 * Calculate color style based on thresholds
+			 * @param {number} val - Current value
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Color style string
+			 */
+			const getColorStyle = (val, low, high, reversed = false) => {
+				if (reversed) {
+					// Reversed thresholds: higher percentage = better (green)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal thresholds: lower = green, higher = red
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
+			}
+
+			/**
+			 * Build HTML for threshold-based value with color
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, reversed = false) => {
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+				return `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}${tendanceStr}</span>`
+			}
+
+			/**
+			 * Build HTML for percentage-based value with color and unit
+			 * @param {string} value - Value to display
+			 * @param {string} lowThreshold - Low threshold value
+			 * @param {string} highThreshold - High threshold value
+			 * @param {string} label - Label for tooltip
+			 * @param {string} cmdId - Command ID
+			 * @param {object} history - History stats {min, avg, max}
+			 * @param {string} tendance - Trend indicator
+			 * @param {string} prefix - Prefix text (e.g., "#memory# (")
+			 * @param {string} unit - Unit (e.g., "%")
+			 * @param {boolean} reversed - If true, higher values are better
+			 * @returns {string} HTML string
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, label, cmdId, history, tendance, prefix, unit, reversed = false) => {
+				if (!value || value === '' || value.startsWith('#')) return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const title = `Stats : ${label}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+				const color = getColorStyle(val, low, high, reversed)
+				const tendanceStr = (tendance && tendance !== '' && !tendance.startsWith('#')) ? tendance : ''
+
+				const valueSpan = `<span title="${title}" data-cmd_id="${cmdId}" class="value history cursor tooltips"${color}>${value}</span>`
+				const unitSpan = `<span>${unit}${tendanceStr}</span>`
+
+				// Only add prefix if it exists and is not a placeholder
+				if (prefix && !prefix.startsWith('#')) {
+					return `${prefix}${valueSpan}${unitSpan})`
+				}
+				return `${valueSpan}${unitSpan}`
+			}
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="cmd monitor-btn fas fa-check tooltips" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="cmd monitor-btn fas fa-times-circle tooltips" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconSSH:', e)
+				}
+			}
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? 'Custom' : 'Default'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					iconCron.innerHTML = `<i title="Cron ${label} (${customLabel})" class="cmd monitor-btn fas fa-${icon} tooltips" style="display: ${display};color: var(${color}) !important;"></i>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initIconCron:', e)
+				}
+			}
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with confirmation dialog
+			 */
+			const initRebootButton = () => {
+				try {
+					const rebootBtn = widgetRoot.querySelector('.reboot[data-cmd_id="#cmd_reboot_id#"]')
+					rebootBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="warning fas fa-question-circle"></i> Redémarrer l\'équipement',
+							message: 'Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Redémarrer', className: 'warning' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+							}
+						})
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initRebootButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Poweroff button with confirmation dialog
+			 */
+			const initPoweroffButton = () => {
+				try {
+					const poweroffBtn = widgetRoot.querySelector('.poweroff[data-cmd_id="#cmd_poweroff_id#"]')
+					poweroffBtn?.addEventListener('click', () => {
+						jeeDialog.confirm({
+							title: '<i class="danger fas fa-question-circle"></i> Eteindre l\'équipement',
+							message: 'Etes-vous sûr de vouloir éteindre l\'équipement #name# ?',
+							buttons: {
+								confirm: { label: 'Eteindre', className: 'danger' },
+								cancel: { label: 'Annuler', className: 'info' }
+							},
+							callback: (result) => {
+								if (result) jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+							}
+						})
+					})
+				} catch (e) {
+					console.error('[Monitoring] Error in initPoweroffButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Refresh button
+			 */
+			const initRefreshButton = () => {
+				try {
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
+
+					if ('#refresh_id#' !== '') {
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						refreshBtn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initRefreshButton:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (!uptimeEl) return
+					uptimeEl.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initUptime:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (!networkInfosEl) return
+					networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetworkInfos:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network Traffic display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (!networkEl) return
+
+					networkEl.innerHTML = '<span>#network#</span>'
+				} catch (e) {
+					console.error('[Monitoring] Error in initNetwork:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With Thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html1mn = buildThresholdHTML(
+							'#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#',
+							'Charge Système (1min)', '#load_avg_1mn_id#',
+							{ min: '#load_avg_1mn_minHistory#', avg: '#load_avg_1mn_averageHistory#', max: '#load_avg_1mn_maxHistory#' },
+							'#load_avg_1mn_tendance#'
+						)
+						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html5mn = buildThresholdHTML(
+							'#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#',
+							'Charge Système (5min)', '#load_avg_5mn_id#',
+							{ min: '#load_avg_5mn_minHistory#', avg: '#load_avg_5mn_averageHistory#', max: '#load_avg_5mn_maxHistory#' },
+							'#load_avg_5mn_tendance#'
+						)
+						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html15mn = buildThresholdHTML(
+							'#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#',
+							'Charge Système (15min)', '#load_avg_15mn_id#',
+							{ min: '#load_avg_15mn_minHistory#', avg: '#load_avg_15mn_averageHistory#', max: '#load_avg_15mn_maxHistory#' },
+							'#load_avg_15mn_tendance#'
+						)
+						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initLoadAverage:', e)
+				}
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						memoryEl.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					memoryEl.innerHTML = buildPercentageHTML(
+						value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#',
+						'Mémoire Vive (% Disponible)', '#memory_available_percent_id#',
+						{ min: '#memory_available_percent_minHistory#', avg: '#memory_available_percent_averageHistory#', max: '#memory_available_percent_maxHistory#' },
+						'#memory_available_percent_tendance#', '#memory# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initMemory:', e)
+				}
+			}
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						swapEl.innerHTML = '<span></span>'
+						return
+					}
+
+					swapEl.innerHTML = buildPercentageHTML(
+						value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#',
+						'Mémoire Swap (% Libre)', '#swap_free_percent_id#',
+						{ min: '#swap_free_percent_minHistory#', avg: '#swap_free_percent_averageHistory#', max: '#swap_free_percent_maxHistory#' },
+						'#swap_free_percent_tendance#', '#swap# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initSwap:', e)
+				}
+			}
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						hddEl.innerHTML = '<span></span>'
+						return
+					}
+
+					hddEl.innerHTML = buildPercentageHTML(
+						value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#',
+						'Espace Disque (% Libre)', '#hdd_free_percent_id#',
+						{ min: '#hdd_free_percent_minHistory#', avg: '#hdd_free_percent_averageHistory#', max: '#hdd_free_percent_maxHistory#' },
+						'#hdd_free_percent_tendance#', '#hdd# (', '%', true
+					)
+				} catch (e) {
+					console.error('[Monitoring] Error in initHDD:', e)
+				}
+			}
+
+			/**
+			 * Initialize Synology volume display with icon and percentage
+			 */
+			const initSynoVolume = (volumeEl) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = volumeEl.dataset
+
+					// Vérifier d'abord la valeur (pas d'opération DOM si invalide)
+					if (!dataset.synoValue || dataset.synoValue === '' || dataset.synoValue.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
+
+					// Récupérer l'icône uniquement si value est valide
+					const iconSpan = volumeEl.querySelector('span:first-child')
+					const icon = iconSpan?.innerHTML.trim()
+
+					// Vérifier l'icône
+					if (!iconSpan || !icon || icon === '' || icon.startsWith('#')) {
+						volumeEl.style.display = 'none'
+						return
+					}
+
+					// Construire le contenu (tout est valide)
+					const history = { min: dataset.synoHistoryMin || '-', avg: dataset.synoHistoryAvg || '-', max: dataset.synoHistoryMax || '-' }
+					const percentageHTML = buildPercentageHTML(
+						dataset.synoValue, dataset.synoColorLow, dataset.synoColorHigh,
+						dataset.synoLabel, dataset.synoCmdId, history, dataset.synoTendance,
+						dataset.synoPrefix, '%', true
+					)
+
+					iconSpan.setAttribute('title', `${dataset.synoTitle}<br><i>Date de valeur : ${dataset.synoValueDate}<br>Date de collecte : ${dataset.synoCollectDate}</i>`)
+
+					// Ajouter le pourcentage dans le deuxième span
+					const percentSpan = volumeEl.querySelector('.syno-percent')
+					if (!percentSpan) return
+					percentSpan.innerHTML = percentageHTML
+				} catch (e) {
+					console.error('[Monitoring] Error in initSynoVolume for', volumeEl.dataset?.synoId || 'unknown', ':', e)
+				}
+			}
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					if (!cpuEl) return
+
+					if ('#cpu_temp#' !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+						if (!tempEl) return
+
+						const temp = parseFloat('#cpu_temp#')
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const title = 'Stats : Température CPU<br>Min: #cpu_temp_minHistory# | Moy : #cpu_temp_averageHistory# | Max : #cpu_temp_maxHistory#'
+						const color = getColorStyle(temp, low, high, false)
+
+						tempEl.innerHTML = `(<span title="${title}" data-cmd_id="#cpu_temp_id#" class="value history cursor tooltips"${color}>#cpu_temp#</span><span>°C#cpu_temp_tendance#</span>)`
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const el = widgetRoot.querySelector(`#${persoId}_unite#id#`)
+					if (!el) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						el.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const history = safeJSONParse(dataset.persoHistory)
+					const title = `Stats : ${dataset.persoName}<br>Min: ${history.min} | Moy : ${history.avg} | Max : ${history.max}`
+					const color = getColorStyle(val, low, high, false)
+
+					el.innerHTML = `<span title="${title}" data-cmd_id="${dataset.persoCmdId}" class="value history cursor tooltips"${color}>${value}</span><span>${dataset.persoUnite}${dataset.persoTendance}</span>`
+				} catch (e) {
+					console.error('[Monitoring] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+
+				// Button handlers
+				initRebootButton()
+				initPoweroffButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// Synology volumes
+				widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+				// CPU with temperature
+				initCPU()
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
+	</script>
 </div>
\ No newline at end of file
diff --git a/core/template/mobile/Synology.html b/core/template/mobile/Synology.html
index 53f76b98..8e9cc980 100644
--- a/core/template/mobile/Synology.html
+++ b/core/template/mobile/Synology.html
@@ -1,687 +1,687 @@
 <div class="eqLogic eqLogic-widget col2" data-eqLogic_id="#id#" data-eqType="#eqType#" data-version="#version#"
-    data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#"
-    data-tags="#tags#" style="#style#">
-    <style>
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-flex {
-            display: flex;
-            justify-content: space-between;
-            padding-left: 5px !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left {
-            display: flex;
-            flex: 0 1 auto;
-            float: left;
-            justify-content: flex-start;
-            align-items: center;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left span:not(:empty) {
-            padding-right: 5px;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center {
-            display: flex;
-            flex: 1 1 auto;
-            justify-content: center;
-            text-align: center;
-            overflow: hidden;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center span {
-            justify-content: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center .widget-name {
-            display: flex;
-            flex: 1 1 auto;
-            padding-left: 6px;
-            padding-right: 6px;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right {
-            display: flex;
-            flex: 0 1 auto;
-            float: right;
-            justify-content: flex-end;
-            align-items: center;
-            padding-left: 5px;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right .refresh {
-            position: relative;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right i {
-            margin-top: unset !important;
-            padding-right: 5px;
-            color: inherit !important;
-        }
-
-        div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
-            display: block;
-            text-align: left;
-            padding-left: 5px;
-            overflow: auto;
-            white-space: nowrap;
-            width: 100%;
-            height: calc(100% - 24px);
-            box-sizing: border-box;
-        }
-    </style>
-    <span class="monitor-name-flex">
-        <span class="monitor-name-left">
-            <span class="cmd" id="iconSSH#id#"></span>
-            <span class="cmd" id="iconCron#id#"></span>
-            <span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
-                data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
-                <i class="fas fa-redo"></i>
-            </span>
-            <span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
-                data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
-                <i class="fas fa-power-off"></i>
-            </span>
-        </span>
-        <span class="monitor-name-center">
-            <span class="widget-name">
-                <span>#name_display#</span>
-            </span>
-        </span>
-        <span class="monitor-name-right">
-            <span class="cmd refresh cursor" data-cmd_id="#refresh_id#">
-                <i class="fas fa-sync"></i>
-            </span>
-        </span>
-    </span>
-    <div class="monitor-cmds">
-        <div class="tooltips" style="display: #distri_name_display#;">
-            <span
-                title="Distribution Linux || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
-            <span>#distri_name#</span>
-        </div>
-        <div class="tooltips" style="display: #uptime_display#;">
-            <span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
-            <span id="uptime#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #load_avg_display#;">
-            <span
-                title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
-            <span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #memory_display#;">
-            <span
-                title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
-            <span id="memory_available_percent#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #swap_display#;">
-            <span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
-            <span id="swap_free_percent#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #network_infos_display#;">
-            <span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
-            <span id="network_infos#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #network_display#;">
-            <span
-                title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
-            <span id="network#id#"></span>
-        </div>
-        <!-- Cartes réseau supplémentaires -->
-        #multi_network_cards#
-        <div class="tooltips" style="display: #hdd_display#;">
-            <span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
-            <span id="hdd#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #syno_v2_display#;" data-syno-id="syno_v2" data-syno-value="#syno_v2#"
-            data-syno-value-percent="#syno_v2_free_percent#" data-syno-name="#syno_v2_name#"
-            data-syno-date-value="#syno_v2_value#" data-syno-collect="#syno_v2_collect#" data-syno-icon="#syno_v2_icon#"
-            data-syno-low="#syno_v2_free_percent_colorlow#" data-syno-high="#syno_v2_free_percent_colorhigh#">
-            <span title="#syno_v2_name# || Date valeur : #syno_v2_value# || Date collecte : #syno_v2_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#syno_v2_icon#</span>
-            <span id="syno_v2_unit#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #syno_v3_display#;" data-syno-id="syno_v3" data-syno-value="#syno_v3#"
-            data-syno-value-percent="#syno_v3_free_percent#" data-syno-name="#syno_v3_name#"
-            data-syno-date-value="#syno_v3_value#" data-syno-collect="#syno_v3_collect#" data-syno-icon="#syno_v3_icon#"
-            data-syno-low="#syno_v3_free_percent_colorlow#" data-syno-high="#syno_v3_free_percent_colorhigh#">
-            <span title="#syno_v3_name# || Date valeur : #syno_v3_value# || Date collecte : #syno_v3_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#syno_v3_icon#</span>
-            <span id="syno_v3_unit#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #syno_v4_display#;" data-syno-id="syno_v4" data-syno-value="#syno_v4#"
-            data-syno-value-percent="#syno_v4_free_percent#" data-syno-name="#syno_v4_name#"
-            data-syno-date-value="#syno_v4_value#" data-syno-collect="#syno_v4_collect#" data-syno-icon="#syno_v4_icon#"
-            data-syno-low="#syno_v4_free_percent_colorlow#" data-syno-high="#syno_v4_free_percent_colorhigh#">
-            <span title="#syno_v4_name# || Date valeur : #syno_v4_value# || Date collecte : #syno_v4_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#syno_v4_icon#</span>
-            <span id="syno_v4_unit#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #syno_usb_display#;" data-syno-id="syno_usb" data-syno-value="#syno_usb#"
-            data-syno-value-percent="#syno_usb_free_percent#" data-syno-name="#syno_usb_name#"
-            data-syno-date-value="#syno_usb_value#" data-syno-collect="#syno_usb_collect#"
-            data-syno-icon="#syno_usb_icon#" data-syno-low="#syno_usb_free_percent_colorlow#"
-            data-syno-high="#syno_usb_free_percent_colorhigh#">
-            <span title="#syno_usb_name# || Date valeur : #syno_usb_value# || Date collecte : #syno_usb_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#syno_usb_icon#</span>
-            <span id="syno_usb_unit#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #syno_esata_display#;" data-syno-id="syno_esata"
-            data-syno-value="#syno_esata#" data-syno-value-percent="#syno_esata_free_percent#"
-            data-syno-name="#syno_esata_name#" data-syno-date-value="#syno_esata_value#"
-            data-syno-collect="#syno_esata_collect#" data-syno-icon="#syno_esata_icon#"
-            data-syno-low="#syno_esata_free_percent_colorlow#" data-syno-high="#syno_esata_free_percent_colorhigh#">
-            <span title="#syno_esata_name# || Date valeur : #syno_esata_value# || Date collecte : #syno_esata_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#syno_esata_icon#</span>
-            <span id="syno_esata_unit#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #cpu_display#;">
-            <span
-                title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
-            <span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
-            data-perso-name="#perso1_name#" data-perso-date-value="#perso1_value#" data-perso-collect="#perso1_collect#"
-            data-perso-icon="#perso1_icon#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
-            data-perso-unite="#perso1_unite#">
-            <span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
-            <span id="perso1_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
-            data-perso-name="#perso2_name#" data-perso-date-value="#perso2_value#" data-perso-collect="#perso2_collect#"
-            data-perso-icon="#perso2_icon#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
-            data-perso-unite="#perso2_unite#">
-            <span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
-            <span id="perso2_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
-            data-perso-name="#perso3_name#" data-perso-date-value="#perso3_value#" data-perso-collect="#perso3_collect#"
-            data-perso-icon="#perso3_icon#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
-            data-perso-unite="#perso3_unite#">
-            <span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
-            <span id="perso3_unite#id#"></span>
-        </div>
-        <div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
-            data-perso-name="#perso4_name#" data-perso-date-value="#perso4_value#" data-perso-collect="#perso4_collect#"
-            data-perso-icon="#perso4_icon#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
-            data-perso-unite="#perso4_unite#">
-            <span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#"
-                style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
-            <span id="perso4_unite#id#"></span>
-        </div>
-    </div>
-    <script>
-        (() => {
-            'use strict'
-
-            const widgetRoot = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"]')
-            if (!widgetRoot) return
-
-            // ========================================
-            // === UTILITY FUNCTIONS ===
-            // ========================================
-
-            /**
-             * Get color style based on value and thresholds (mobile optimized)
-             * @param {number} val - Numeric value to evaluate
-             * @param {number} low - Low threshold
-             * @param {number} high - High threshold
-             * @param {boolean} reversed - If true, higher values are better (green)
-             * @returns {string} Inline style string for color
-             */
-            const getColorStyle = (val, low, high, reversed) => {
-                if (reversed === void 0) reversed = false
-                if (reversed) {
-                    // Reversed: higher is better (e.g., % free)
-                    if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
-                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-                    if (val < low) return ' style="color: var(--al-danger-color) !important;"'
-                } else {
-                    // Normal: lower is better (e.g., temperature, load)
-                    if (val < low) return ' style="color: var(--al-success-color) !important;"'
-                    if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
-                    if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
-                }
-                return ''
-            }
-
-            /**
-             * Build HTML for threshold-based value with color (mobile version - no history)
-             */
-            const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
-                if (reversed === void 0) reversed = false
-                if (value === '') return '<span></span>'
-
-                const val = parseFloat(value)
-                const low = parseFloat(lowThreshold)
-                const high = parseFloat(highThreshold)
-                const color = getColorStyle(val, low, high, reversed)
-
-                return prefix + '<span class="state"' + color + '>' + value + '</span>'
-            }
-
-            /**
-             * Build HTML for percentage-based value with color and unit (mobile version)
-             */
-            const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
-                if (reversed === void 0) reversed = false
-                if (value === '') return prefix ? '<span></span>' : ''
-
-                const val = parseFloat(value)
-                const low = parseFloat(lowThreshold)
-                const high = parseFloat(highThreshold)
-                const color = getColorStyle(val, low, high, reversed)
-
-                const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
-                const unitSpan = '<span>' + unit + '</span>'
-
-                return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
-            }
-
-            // ========================================
-            // === ICON HANDLERS ===
-            // ========================================
-
-            /**
-             * Initialize SSH connection status icon
-             */
-            const initIconSSH = () => {
-                try {
-                    const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
-                    if (!iconSSH) return
-
-                    if ('#cnx_ssh#' === 'OK') {
-                        iconSSH.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
-                    } else if ('#cnx_ssh#' === 'KO') {
-                        iconSSH.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
-                    }
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initIconSSH:', e)
-                }
-            }
-
-            /**
-             * Initialize Cron status icon
-             */
-            const initIconCron = () => {
-                try {
-                    const iconCron = widgetRoot.querySelector('#iconCron#id#')
-                    if (!iconCron) return
-
-                    const isOn = '#cron_status#' === '1'
-                    const isCustom = '#cron_status_custom#' === '1'
-                    const display = '#cron_status_display#'
-
-                    const icon = isOn ? 'play-circle' : 'pause-circle'
-                    const label = isOn ? 'ON' : 'OFF'
-                    const customLabel = isCustom ? ' (Custom)' : ' (Default)'
-                    const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
-
-                    iconCron.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initIconCron:', e)
-                }
-            }
-
-            // ========================================
-            // === BUTTON HANDLERS ===
-            // ========================================
-
-            /**
-             * Initialize Reboot button with native confirm (mobile optimized)
-             */
-            const initRebootButton = () => {
-                try {
-                    const rebootBtn = widgetRoot.querySelector('.reboot')
-                    if (!rebootBtn) return
-
-                    rebootBtn.addEventListener('click', () => {
-                        if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
-                            jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
-                        }
-                    })
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initRebootButton:', e)
-                }
-            }
-
-            /**
-             * Initialize Poweroff button with native confirm (mobile optimized)
-             */
-            const initPoweroffButton = () => {
-                try {
-                    const poweroffBtn = widgetRoot.querySelector('.poweroff')
-                    if (!poweroffBtn) return
-
-                    poweroffBtn.addEventListener('click', () => {
-                        if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
-                            jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
-                        }
-                    })
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initPoweroffButton:', e)
-                }
-            }
-
-            /**
-             * Initialize Refresh button (mobile version)
-             */
-            const initRefreshButton = () => {
-                try {
-                    const refreshBtn = widgetRoot.querySelector('.refresh')
-                    if (!refreshBtn) return
-
-                    if ('#refresh_id#' !== '') {
-                        refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
-                    } else {
-                        refreshBtn.remove()
-                    }
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initRefreshButton:', e)
-                }
-            }
-
-            // ========================================
-            // === VALUE DISPLAYS - Simple ===
-            // ========================================
-
-            /**
-             * Initialize Uptime display
-             */
-            const initUptime = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const uptimeEl = widgetRoot.querySelector('#uptime#id#')
-                    if (!uptimeEl) return
-                    uptimeEl.innerHTML = '<span>#uptime#</span>'
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initUptime:', e)
-                }
-            }
-
-            /**
-             * Initialize Network Infos display
-             */
-            const initNetworkInfos = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
-                    if (!networkInfosEl) return
-                    networkInfosEl.innerHTML = '<span>#network_infos#</span>'
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initNetworkInfos:', e)
-                }
-            }
-
-            /**
-             * Initialize Network display
-             */
-            const initNetwork = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const networkEl = widgetRoot.querySelector('#network#id#')
-                    if (!networkEl) return
-                    networkEl.innerHTML = '<span>#network#</span>'
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initNetwork:', e)
-                }
-            }
-
-            // ========================================
-            // === VALUE DISPLAYS - With thresholds ===
-            // ========================================
-
-            /**
-             * Initialize Load Average displays (1mn, 5mn, 15mn)
-             */
-            const initLoadAverage = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    // Load avg 1mn
-                    const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
-                    if (loadAvg1mn) {
-                        const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
-                        loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
-                    }
-
-                    // Load avg 5mn
-                    const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
-                    if (loadAvg5mn) {
-                        const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
-                        loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
-                    }
-
-                    // Load avg 15mn
-                    const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
-                    if (loadAvg15mn) {
-                        const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
-                        loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
-                    }
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initLoadAverage:', e)
-                }
-            }
-
-            /**
-             * Initialize Memory display with percentage
-             */
-            const initMemory = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
-                    if (!memoryEl) return
-
-                    const value = '#memory_available_percent#'
-                    if (value === '') {
-                        memoryEl.innerHTML = '<span>#memory#</span>'
-                        return
-                    }
-
-                    el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initMemory:', e)
-                }
-            }
-
-            /**
-             * Initialize Swap display with percentage
-             */
-            const initSwap = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
-                    if (!swapEl) return
-
-                    const value = '#swap_free_percent#'
-                    if (value === '') {
-                        swapEl.innerHTML = '<span>#swap#</span>'
-                        return
-                    }
-
-                    swapEl.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initSwap:', e)
-                }
-            }
-
-            /**
-             * Initialize HDD display with percentage
-             */
-            const initHDD = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const hddEl = widgetRoot.querySelector('#hdd#id#')
-                    if (!hddEl) return
-
-                    const value = '#hdd_free_percent#'
-                    if (value === '') {
-                        hddEl.innerHTML = '<span></span>'
-                        return
-                    }
-
-                    hddEl.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initHDD:', e)
-                }
-            }
-
-            /**
-             * Initialize CPU display with temperature
-             */
-            const initCPU = () => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const cpuEl = widgetRoot.querySelector('#cpu#id#')
-                    const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
-                    if (!cpuEl || !tempEl) return
-
-                    const temp = '#cpu_temp#'
-                    if (temp !== '' && '#cpu_temp_display#' === 'block') {
-                        cpuEl.innerHTML = '<span>#cpu# </span>'
-
-                        const tempVal = parseFloat(temp)
-                        const low = parseFloat('#cpu_temp_colorlow#')
-                        const high = parseFloat('#cpu_temp_colorhigh#')
-                        const color = getColorStyle(tempVal, low, high, false)
-
-                        tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
-                    } else {
-                        cpuEl.innerHTML = '<span>#cpu#</span>'
-                    }
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initCPU:', e)
-                }
-            }
-
-            /**
-             * Initialize Synology volume display using data attributes (mobile version)
-             * @param {HTMLElement} container - The container div with data-syno-* attributes
-             */
-            const initSynoVolume = (container) => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const dataset = container.dataset
-                    const synoId = dataset.synoId
-                    const synoVolumeEl = widgetRoot.querySelector('#' + synoId + '_unit#id#')
-                    if (!synoVolumeEl) return
-
-                    const value = dataset.synoValue
-                    const valuePercent = dataset.synoValuePercent
-
-                    // Validate - hide div if placeholder not replaced
-                    if (!value || value === '' || value.startsWith('#')) {
-                        container.style.display = 'none'
-                        return
-                    }
-
-                    if (!valuePercent || valuePercent === '' || valuePercent.startsWith('#')) {
-                        synoVolumeEl.innerHTML = '<span>' + value + '</span>'
-                        return
-                    }
-
-                    const val = parseFloat(valuePercent)
-                    const low = parseFloat(dataset.synoLow)
-                    const high = parseFloat(dataset.synoHigh)
-                    const color = getColorStyle(val, low, high, true)
-
-                    synoVolumeEl.innerHTML = value + ' (<span class="state"' + color + '>' + valuePercent + '</span><span>%</span>)'
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initSynoVolume for', container.dataset?.synoId || 'unknown', ':', e)
-                }
-            }
-
-            /**
-             * Initialize custom command display (perso1-4) using data attributes (mobile version)
-             * @param {HTMLElement} container - The container div with data-perso-* attributes
-             */
-            const initPerso = (container) => {
-                try {
-                    if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
-
-                    const dataset = container.dataset
-                    const persoId = dataset.persoId
-                    const persoEl = widgetRoot.querySelector('#' + persoId + '_unite#id#')
-                    if (!persoEl) return
-
-                    const value = dataset.persoValue
-                    if (value === '') {
-                        persoEl.innerHTML = '<span></span>'
-                        return
-                    }
-
-                    const val = parseFloat(value)
-                    const low = parseFloat(dataset.persoLow)
-                    const high = parseFloat(dataset.persoHigh)
-                    const color = getColorStyle(val, low, high, false)
-
-                    if (color) {
-                        persoEl.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
-                    } else {
-                        persoEl.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
-                    }
-                } catch (e) {
-                    console.error('[Monitoring Syno] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
-                }
-            }
-
-            // ========================================
-            // === INITIALIZATION ===
-            // ========================================
-
-            // Only initialize if template is properly instantiated
-            if ('#uid#') {
-                // Icon handlers
-                initIconSSH()
-                initIconCron()
-
-                // Button handlers
-                initRebootButton()
-                initPoweroffButton()
-                initRefreshButton()
-
-                // Simple value displays
-                initUptime()
-                initNetworkInfos()
-                initNetwork()
-
-                // Value displays with thresholds
-                initLoadAverage()
-                initMemory()
-                initSwap()
-                initHDD()
-
-                // CPU with temperature
-                initCPU()
-
-                // Synology volumes - generic initialization using data attributes
-                widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
-
-                // Custom commands - generic initialization using data attributes
-                widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
-            }
-        })()
-    </script>
+	data-eqLogic_uid="#uid#" data-translate-category="#translate_category#" data-category="#category#"
+	data-tags="#tags#" style="#style#">
+	<style>
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-flex {
+			display: flex;
+			justify-content: space-between;
+			padding-left: 5px !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left {
+			display: flex;
+			flex: 0 1 auto;
+			float: left;
+			justify-content: flex-start;
+			align-items: center;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-left span:not(:empty) {
+			padding-right: 5px;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center {
+			display: flex;
+			flex: 1 1 auto;
+			justify-content: center;
+			text-align: center;
+			overflow: hidden;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center span {
+			justify-content: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-center .widget-name {
+			display: flex;
+			flex: 1 1 auto;
+			padding-left: 6px;
+			padding-right: 6px;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right {
+			display: flex;
+			flex: 0 1 auto;
+			float: right;
+			justify-content: flex-end;
+			align-items: center;
+			padding-left: 5px;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right .refresh {
+			position: relative;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] span.monitor-name-right i {
+			margin-top: unset !important;
+			padding-right: 5px;
+			color: inherit !important;
+		}
+
+		div.eqLogic-widget[data-eqLogic_uid="#uid#"] div.monitor-cmds {
+			display: block;
+			text-align: left;
+			padding-left: 5px;
+			overflow: auto;
+			white-space: nowrap;
+			width: 100%;
+			height: calc(100% - 24px);
+			box-sizing: border-box;
+		}
+	</style>
+	<span class="monitor-name-flex">
+		<span class="monitor-name-left">
+			<span class="cmd" id="iconSSH#id#"></span>
+			<span class="cmd" id="iconCron#id#"></span>
+			<span class="cmd action reboot cursor" title="Redémarrer l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="display: #cmd_reboot_display#;">
+				<i class="fas fa-redo"></i>
+			</span>
+			<span class="cmd action poweroff cursor" title="Eteindre l'équipement" data-type="action"
+				data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="display: #cmd_poweroff_display#;">
+				<i class="fas fa-power-off"></i>
+			</span>
+		</span>
+		<span class="monitor-name-center">
+			<span class="widget-name">
+				<span>#name_display#</span>
+			</span>
+		</span>
+		<span class="monitor-name-right">
+			<span class="cmd refresh cursor" data-cmd_id="#refresh_id#">
+				<i class="fas fa-sync"></i>
+			</span>
+		</span>
+	</span>
+	<div class="monitor-cmds">
+		<div class="tooltips" style="display: #distri_name_display#;">
+			<span
+				title="Distribution Linux || Date valeur : #distri_name_value# || Date collecte : #distri_name_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#distri_name_icon#</span>
+			<span>#distri_name#</span>
+		</div>
+		<div class="tooltips" style="display: #uptime_display#;">
+			<span title="Temps d'Activité (UpTime) || Date valeur : #uptime_value# || Date collecte : #uptime_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#uptime_icon#</span>
+			<span id="uptime#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #load_avg_display#;">
+			<span
+				title="Charge système (load average) || Date valeur : #load_avg_value# || Date collecte : #load_avg_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#load_avg_icon#</span>
+			<span id="load_avg_1mn#id#"></span><span id="load_avg_5mn#id#"></span><span id="load_avg_15mn#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #memory_display#;">
+			<span
+				title="Mémoire Vive (% Disponible) || Date valeur : #memory_value# || Date collecte : #memory_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#memory_icon#</span>
+			<span id="memory_available_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #swap_display#;">
+			<span title="Mémoire Swap (% Libre) || Date valeur : #swap_value# || Date collecte : #swap_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#swap_icon#</span>
+			<span id="swap_free_percent#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_infos_display#;">
+			<span title="Infos Réseau || Date valeur : #network_infos_value# || Date collecte : #network_infos_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_infos_icon#</span>
+			<span id="network_infos#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #network_display#;">
+			<span
+				title="Trafic Réseau (#network_name# / #network_ip#) || Date valeur : #network_value# || Date collecte : #network_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#network_icon#</span>
+			<span id="network#id#"></span>
+		</div>
+		<!-- Cartes réseau supplémentaires -->
+		#multi_network_cards#
+		<div class="tooltips" style="display: #hdd_display#;">
+			<span title="Espace disque (% Libre) || Date valeur : #hdd_value# || Date collecte : #hdd_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#hdd_icon#</span>
+			<span id="hdd#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #syno_v2_display#;" data-syno-id="syno_v2" data-syno-value="#syno_v2#"
+			data-syno-value-percent="#syno_v2_free_percent#" data-syno-name="#syno_v2_name#"
+			data-syno-date-value="#syno_v2_value#" data-syno-collect="#syno_v2_collect#" data-syno-icon="#syno_v2_icon#"
+			data-syno-low="#syno_v2_free_percent_colorlow#" data-syno-high="#syno_v2_free_percent_colorhigh#">
+			<span title="#syno_v2_name# || Date valeur : #syno_v2_value# || Date collecte : #syno_v2_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_v2_icon#</span>
+			<span id="syno_v2_unit#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #syno_v3_display#;" data-syno-id="syno_v3" data-syno-value="#syno_v3#"
+			data-syno-value-percent="#syno_v3_free_percent#" data-syno-name="#syno_v3_name#"
+			data-syno-date-value="#syno_v3_value#" data-syno-collect="#syno_v3_collect#" data-syno-icon="#syno_v3_icon#"
+			data-syno-low="#syno_v3_free_percent_colorlow#" data-syno-high="#syno_v3_free_percent_colorhigh#">
+			<span title="#syno_v3_name# || Date valeur : #syno_v3_value# || Date collecte : #syno_v3_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_v3_icon#</span>
+			<span id="syno_v3_unit#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #syno_v4_display#;" data-syno-id="syno_v4" data-syno-value="#syno_v4#"
+			data-syno-value-percent="#syno_v4_free_percent#" data-syno-name="#syno_v4_name#"
+			data-syno-date-value="#syno_v4_value#" data-syno-collect="#syno_v4_collect#" data-syno-icon="#syno_v4_icon#"
+			data-syno-low="#syno_v4_free_percent_colorlow#" data-syno-high="#syno_v4_free_percent_colorhigh#">
+			<span title="#syno_v4_name# || Date valeur : #syno_v4_value# || Date collecte : #syno_v4_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_v4_icon#</span>
+			<span id="syno_v4_unit#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #syno_usb_display#;" data-syno-id="syno_usb" data-syno-value="#syno_usb#"
+			data-syno-value-percent="#syno_usb_free_percent#" data-syno-name="#syno_usb_name#"
+			data-syno-date-value="#syno_usb_value#" data-syno-collect="#syno_usb_collect#"
+			data-syno-icon="#syno_usb_icon#" data-syno-low="#syno_usb_free_percent_colorlow#"
+			data-syno-high="#syno_usb_free_percent_colorhigh#">
+			<span title="#syno_usb_name# || Date valeur : #syno_usb_value# || Date collecte : #syno_usb_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_usb_icon#</span>
+			<span id="syno_usb_unit#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #syno_esata_display#;" data-syno-id="syno_esata"
+			data-syno-value="#syno_esata#" data-syno-value-percent="#syno_esata_free_percent#"
+			data-syno-name="#syno_esata_name#" data-syno-date-value="#syno_esata_value#"
+			data-syno-collect="#syno_esata_collect#" data-syno-icon="#syno_esata_icon#"
+			data-syno-low="#syno_esata_free_percent_colorlow#" data-syno-high="#syno_esata_free_percent_colorhigh#">
+			<span title="#syno_esata_name# || Date valeur : #syno_esata_value# || Date collecte : #syno_esata_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#syno_esata_icon#</span>
+			<span id="syno_esata_unit#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #cpu_display#;">
+			<span
+				title="Nombre CPU - Fréquence (Température) || Date valeur : #cpu_value# || Date collecte : #cpu_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#cpu_icon#</span>
+			<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso1_display#;" data-perso-id="perso1" data-perso-value="#perso1#"
+			data-perso-name="#perso1_name#" data-perso-date-value="#perso1_value#" data-perso-collect="#perso1_collect#"
+			data-perso-icon="#perso1_icon#" data-perso-low="#perso1_colorlow#" data-perso-high="#perso1_colorhigh#"
+			data-perso-unite="#perso1_unite#">
+			<span title="#perso1_name# || Date valeur : #perso1_value# || Date collecte : #perso1_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso1_icon#</span>
+			<span id="perso1_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso2_display#;" data-perso-id="perso2" data-perso-value="#perso2#"
+			data-perso-name="#perso2_name#" data-perso-date-value="#perso2_value#" data-perso-collect="#perso2_collect#"
+			data-perso-icon="#perso2_icon#" data-perso-low="#perso2_colorlow#" data-perso-high="#perso2_colorhigh#"
+			data-perso-unite="#perso2_unite#">
+			<span title="#perso2_name# || Date valeur : #perso2_value# || Date collecte : #perso2_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso2_icon#</span>
+			<span id="perso2_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso3_display#;" data-perso-id="perso3" data-perso-value="#perso3#"
+			data-perso-name="#perso3_name#" data-perso-date-value="#perso3_value#" data-perso-collect="#perso3_collect#"
+			data-perso-icon="#perso3_icon#" data-perso-low="#perso3_colorlow#" data-perso-high="#perso3_colorhigh#"
+			data-perso-unite="#perso3_unite#">
+			<span title="#perso3_name# || Date valeur : #perso3_value# || Date collecte : #perso3_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso3_icon#</span>
+			<span id="perso3_unite#id#"></span>
+		</div>
+		<div class="tooltips" style="display: #perso4_display#;" data-perso-id="perso4" data-perso-value="#perso4#"
+			data-perso-name="#perso4_name#" data-perso-date-value="#perso4_value#" data-perso-collect="#perso4_collect#"
+			data-perso-icon="#perso4_icon#" data-perso-low="#perso4_colorlow#" data-perso-high="#perso4_colorhigh#"
+			data-perso-unite="#perso4_unite#">
+			<span title="#perso4_name# || Date valeur : #perso4_value# || Date collecte : #perso4_collect#"
+				style="width:15px;max-width:15px;max-height:15px;">#perso4_icon#</span>
+			<span id="perso4_unite#id#"></span>
+		</div>
+	</div>
+	<script>
+		(() => {
+			'use strict'
+
+			const widgetRoot = document.querySelector('.eqLogic[data-eqLogic_uid="#uid#"]')
+			if (!widgetRoot) return
+
+			// ========================================
+			// === UTILITY FUNCTIONS ===
+			// ========================================
+
+			/**
+			 * Get color style based on value and thresholds (mobile optimized)
+			 * @param {number} val - Numeric value to evaluate
+			 * @param {number} low - Low threshold
+			 * @param {number} high - High threshold
+			 * @param {boolean} reversed - If true, higher values are better (green)
+			 * @returns {string} Inline style string for color
+			 */
+			const getColorStyle = (val, low, high, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (reversed) {
+					// Reversed: higher is better (e.g., % free)
+					if (val > high && high !== '') return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val < low) return ' style="color: var(--al-danger-color) !important;"'
+				} else {
+					// Normal: lower is better (e.g., temperature, load)
+					if (val < low) return ' style="color: var(--al-success-color) !important;"'
+					if (val >= low && val <= high) return ' style="color: var(--al-warning-color) !important;"'
+					if (val > high && high !== '') return ' style="color: var(--al-danger-color) !important;"'
+				}
+				return ''
+			}
+
+			/**
+			 * Build HTML for threshold-based value with color (mobile version - no history)
+			 */
+			const buildThresholdHTML = (value, lowThreshold, highThreshold, prefix, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return '<span></span>'
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				return prefix + '<span class="state"' + color + '>' + value + '</span>'
+			}
+
+			/**
+			 * Build HTML for percentage-based value with color and unit (mobile version)
+			 */
+			const buildPercentageHTML = (value, lowThreshold, highThreshold, prefix, unit, reversed) => {
+				if (reversed === void 0) reversed = false
+				if (value === '') return prefix ? '<span></span>' : ''
+
+				const val = parseFloat(value)
+				const low = parseFloat(lowThreshold)
+				const high = parseFloat(highThreshold)
+				const color = getColorStyle(val, low, high, reversed)
+
+				const valueSpan = '<span class="state"' + color + '>' + value + '</span>'
+				const unitSpan = '<span>' + unit + '</span>'
+
+				return prefix ? prefix + valueSpan + unitSpan + ')' : valueSpan + unitSpan
+			}
+
+			// ========================================
+			// === ICON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize SSH connection status icon
+			 */
+			const initIconSSH = () => {
+				try {
+					const iconSSH = widgetRoot.querySelector('#iconSSH#id#')
+					if (!iconSSH) return
+
+					if ('#cnx_ssh#' === 'OK') {
+						iconSSH.innerHTML = '<i title="Connexion SSH OK" class="fas fa-check" style="color: var(--al-success-color) !important;"></i>'
+					} else if ('#cnx_ssh#' === 'KO') {
+						iconSSH.innerHTML = '<i title="Connexion SSH KO" class="fas fa-times-circle" style="color: var(--al-danger-color) !important;"></i>'
+					}
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initIconSSH:', e)
+				}
+			}
+
+			/**
+			 * Initialize Cron status icon
+			 */
+			const initIconCron = () => {
+				try {
+					const iconCron = widgetRoot.querySelector('#iconCron#id#')
+					if (!iconCron) return
+
+					const isOn = '#cron_status#' === '1'
+					const isCustom = '#cron_status_custom#' === '1'
+					const display = '#cron_status_display#'
+
+					const icon = isOn ? 'play-circle' : 'pause-circle'
+					const label = isOn ? 'ON' : 'OFF'
+					const customLabel = isCustom ? ' (Custom)' : ' (Default)'
+					const color = isCustom ? '--al-warning-color' : (isOn ? '--al-success-color' : '--al-danger-color')
+
+					iconCron.innerHTML = '<i title="Cron ' + label + customLabel + '" class="fas fa-' + icon + ' tooltips" style="display: ' + display + ';color: var(' + color + ') !important;"></i>'
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initIconCron:', e)
+				}
+			}
+
+			// ========================================
+			// === BUTTON HANDLERS ===
+			// ========================================
+
+			/**
+			 * Initialize Reboot button with native confirm (mobile optimized)
+			 */
+			const initRebootButton = () => {
+				try {
+					const rebootBtn = widgetRoot.querySelector('.reboot')
+					if (!rebootBtn) return
+
+					rebootBtn.addEventListener('click', () => {
+						if (confirm("Etes-vous sûr de vouloir redémarrer l'équipement #name# ?")) {
+							jeedom.cmd.execute({ id: '#cmd_reboot_id#' })
+						}
+					})
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initRebootButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Poweroff button with native confirm (mobile optimized)
+			 */
+			const initPoweroffButton = () => {
+				try {
+					const poweroffBtn = widgetRoot.querySelector('.poweroff')
+					if (!poweroffBtn) return
+
+					poweroffBtn.addEventListener('click', () => {
+						if (confirm("Etes-vous sûr de vouloir éteindre l'équipement #name# ?")) {
+							jeedom.cmd.execute({ id: '#cmd_poweroff_id#' })
+						}
+					})
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initPoweroffButton:', e)
+				}
+			}
+
+			/**
+			 * Initialize Refresh button (mobile version)
+			 */
+			const initRefreshButton = () => {
+				try {
+					const refreshBtn = widgetRoot.querySelector('.refresh')
+					if (!refreshBtn) return
+
+					if ('#refresh_id#' !== '') {
+						refreshBtn.addEventListener('click', () => jeedom.cmd.execute({ id: '#refresh_id#' }))
+					} else {
+						refreshBtn.remove()
+					}
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initRefreshButton:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - Simple ===
+			// ========================================
+
+			/**
+			 * Initialize Uptime display
+			 */
+			const initUptime = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const uptimeEl = widgetRoot.querySelector('#uptime#id#')
+					if (!uptimeEl) return
+					uptimeEl.innerHTML = '<span>#uptime#</span>'
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initUptime:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network Infos display
+			 */
+			const initNetworkInfos = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkInfosEl = widgetRoot.querySelector('#network_infos#id#')
+					if (!networkInfosEl) return
+					networkInfosEl.innerHTML = '<span>#network_infos#</span>'
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initNetworkInfos:', e)
+				}
+			}
+
+			/**
+			 * Initialize Network display
+			 */
+			const initNetwork = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const networkEl = widgetRoot.querySelector('#network#id#')
+					if (!networkEl) return
+					networkEl.innerHTML = '<span>#network#</span>'
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initNetwork:', e)
+				}
+			}
+
+			// ========================================
+			// === VALUE DISPLAYS - With thresholds ===
+			// ========================================
+
+			/**
+			 * Initialize Load Average displays (1mn, 5mn, 15mn)
+			 */
+			const initLoadAverage = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					// Load avg 1mn
+					const loadAvg1mn = widgetRoot.querySelector('#load_avg_1mn#id#')
+					if (loadAvg1mn) {
+						const html1mn = buildThresholdHTML('#load_avg_1mn#', '#load_avg_1mn_colorlow#', '#load_avg_1mn_colorhigh#', '1 min : ')
+						loadAvg1mn.innerHTML = html1mn === '<span></span>' ? html1mn : `1 min : ${html1mn}`
+					}
+
+					// Load avg 5mn
+					const loadAvg5mn = widgetRoot.querySelector('#load_avg_5mn#id#')
+					if (loadAvg5mn) {
+						const html5mn = buildThresholdHTML('#load_avg_5mn#', '#load_avg_5mn_colorlow#', '#load_avg_5mn_colorhigh#', ' - 5 min : ')
+						loadAvg5mn.innerHTML = html5mn === '<span></span>' ? html5mn : ` - 5 min : ${html5mn}`
+					}
+
+					// Load avg 15mn
+					const loadAvg15mn = widgetRoot.querySelector('#load_avg_15mn#id#')
+					if (loadAvg15mn) {
+						const html15mn = buildThresholdHTML('#load_avg_15mn#', '#load_avg_15mn_colorlow#', '#load_avg_15mn_colorhigh#', ' - 15 min : ')
+						loadAvg15mn.innerHTML = html15mn === '<span></span>' ? html15mn : ` - 15 min : ${html15mn}`
+					}
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initLoadAverage:', e)
+				}
+			}
+
+			/**
+			 * Initialize Memory display with percentage
+			 */
+			const initMemory = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const memoryEl = widgetRoot.querySelector('#memory_available_percent#id#')
+					if (!memoryEl) return
+
+					const value = '#memory_available_percent#'
+					if (value === '') {
+						memoryEl.innerHTML = '<span>#memory#</span>'
+						return
+					}
+
+					el.innerHTML = buildPercentageHTML(value, '#memory_available_percent_colorlow#', '#memory_available_percent_colorhigh#', '#memory# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initMemory:', e)
+				}
+			}
+
+			/**
+			 * Initialize Swap display with percentage
+			 */
+			const initSwap = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const swapEl = widgetRoot.querySelector('#swap_free_percent#id#')
+					if (!swapEl) return
+
+					const value = '#swap_free_percent#'
+					if (value === '') {
+						swapEl.innerHTML = '<span>#swap#</span>'
+						return
+					}
+
+					swapEl.innerHTML = buildPercentageHTML(value, '#swap_free_percent_colorlow#', '#swap_free_percent_colorhigh#', '#swap# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initSwap:', e)
+				}
+			}
+
+			/**
+			 * Initialize HDD display with percentage
+			 */
+			const initHDD = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const hddEl = widgetRoot.querySelector('#hdd#id#')
+					if (!hddEl) return
+
+					const value = '#hdd_free_percent#'
+					if (value === '') {
+						hddEl.innerHTML = '<span></span>'
+						return
+					}
+
+					hddEl.innerHTML = buildPercentageHTML(value, '#hdd_free_percent_colorlow#', '#hdd_free_percent_colorhigh#', '#hdd# (', '%', true)
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initHDD:', e)
+				}
+			}
+
+			/**
+			 * Initialize CPU display with temperature
+			 */
+			const initCPU = () => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const cpuEl = widgetRoot.querySelector('#cpu#id#')
+					const tempEl = widgetRoot.querySelector('#cpu_temp#id#')
+					if (!cpuEl || !tempEl) return
+
+					const temp = '#cpu_temp#'
+					if (temp !== '' && '#cpu_temp_display#' === 'block') {
+						cpuEl.innerHTML = '<span>#cpu# </span>'
+
+						const tempVal = parseFloat(temp)
+						const low = parseFloat('#cpu_temp_colorlow#')
+						const high = parseFloat('#cpu_temp_colorhigh#')
+						const color = getColorStyle(tempVal, low, high, false)
+
+						tempEl.innerHTML = ' (<span class="state"' + color + '>' + temp + '</span><span>°C</span>)'
+					} else {
+						cpuEl.innerHTML = '<span>#cpu#</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initCPU:', e)
+				}
+			}
+
+			/**
+			 * Initialize Synology volume display using data attributes (mobile version)
+			 * @param {HTMLElement} container - The container div with data-syno-* attributes
+			 */
+			const initSynoVolume = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const synoId = dataset.synoId
+					const synoVolumeEl = widgetRoot.querySelector('#' + synoId + '_unit#id#')
+					if (!synoVolumeEl) return
+
+					const value = dataset.synoValue
+					const valuePercent = dataset.synoValuePercent
+
+					// Validate - hide div if placeholder not replaced
+					if (!value || value === '' || value.startsWith('#')) {
+						container.style.display = 'none'
+						return
+					}
+
+					if (!valuePercent || valuePercent === '' || valuePercent.startsWith('#')) {
+						synoVolumeEl.innerHTML = '<span>' + value + '</span>'
+						return
+					}
+
+					const val = parseFloat(valuePercent)
+					const low = parseFloat(dataset.synoLow)
+					const high = parseFloat(dataset.synoHigh)
+					const color = getColorStyle(val, low, high, true)
+
+					synoVolumeEl.innerHTML = value + ' (<span class="state"' + color + '>' + valuePercent + '</span><span>%</span>)'
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initSynoVolume for', container.dataset?.synoId || 'unknown', ':', e)
+				}
+			}
+
+			/**
+			 * Initialize custom command display (perso1-4) using data attributes (mobile version)
+			 * @param {HTMLElement} container - The container div with data-perso-* attributes
+			 */
+			const initPerso = (container) => {
+				try {
+					if ('#cnx_ssh#' !== 'OK' && '#cnx_ssh#' !== 'No') return
+
+					const dataset = container.dataset
+					const persoId = dataset.persoId
+					const persoEl = widgetRoot.querySelector('#' + persoId + '_unite#id#')
+					if (!persoEl) return
+
+					const value = dataset.persoValue
+					if (value === '') {
+						persoEl.innerHTML = '<span></span>'
+						return
+					}
+
+					const val = parseFloat(value)
+					const low = parseFloat(dataset.persoLow)
+					const high = parseFloat(dataset.persoHigh)
+					const color = getColorStyle(val, low, high, false)
+
+					if (color) {
+						persoEl.innerHTML = '<span class="state"' + color + '>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					} else {
+						persoEl.innerHTML = '<span>' + value + '</span><span>' + dataset.persoUnite + '</span>'
+					}
+				} catch (e) {
+					console.error('[Monitoring Syno] Error in initPerso for', container.dataset?.persoId || 'unknown', ':', e)
+				}
+			}
+
+			// ========================================
+			// === INITIALIZATION ===
+			// ========================================
+
+			// Only initialize if template is properly instantiated
+			if ('#uid#') {
+				// Icon handlers
+				initIconSSH()
+				initIconCron()
+
+				// Button handlers
+				initRebootButton()
+				initPoweroffButton()
+				initRefreshButton()
+
+				// Simple value displays
+				initUptime()
+				initNetworkInfos()
+				initNetwork()
+
+				// Value displays with thresholds
+				initLoadAverage()
+				initMemory()
+				initSwap()
+				initHDD()
+
+				// CPU with temperature
+				initCPU()
+
+				// Synology volumes - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-syno-id]').forEach(initSynoVolume)
+
+				// Custom commands - generic initialization using data attributes
+				widgetRoot.querySelectorAll('[data-perso-id]').forEach(initPerso)
+			}
+		})()
+	</script>
 </div>
\ No newline at end of file