lbr38 · lbr38 · Jul 14, 2026 · Jul 14, 2026
diff --git a/www/public/resources/js/classes/ConfirmBox.js b/www/public/resources/js/classes/ConfirmBox.js
@@ -17,7 +17,7 @@ class ConfirmBox
 
         // If there is a title
         if (data.title != "") {
-            innerHtml += '<div class="flex justify-space-between">';
+            innerHtml += '<div class="flex align-item-center justify-space-between">';
             innerHtml += '<h6 class="margin-top-0 margin-bottom-0 wordbreakall">' + data.title.toUpperCase() + '</h6>';
             innerHtml += '<img src="/assets/icons/close.svg" class="icon-large lowopacity confirm-box-cancel-btn" title="Close" />';
             innerHtml += '</div>';
@@ -38,7 +38,7 @@ class ConfirmBox
         if (!empty(data.buttons)) {
             var id = 0;
             for (const [key, value] of Object.entries(data.buttons)) {
-                innerHtml += '<div class="confirm-box-btn btn-auto-' + value.color + '" confirm-btn-id="' + id + '" pointer">' + value.text + '</div>';
+                innerHtml += '<div class="confirm-box-btn btn-auto-' + (value.color || 'tr') + '" confirm-btn-id="' + id + '" pointer">' + value.text + '</div>';
                 id++;
             }
         }

diff --git a/www/public/resources/js/classes/EChart.js b/www/public/resources/js/classes/EChart.js
@@ -11,7 +11,6 @@ class EChart
     // Static registry to store all chart instances for external access
     static instances = {};
 
-    // If on mobile, default to 1 day range, otherwise 3 days
     constructor(type, id, autoUpdate = true, autoUpdateInterval = 15000, days = 1, wasInNaturalState = true, periodChanged = false, preservedCurrentType = null)
     {
         this.id                 = id;
@@ -25,8 +24,8 @@ class EChart
         this._periodChanged     = periodChanged;
         this.datasets           = [];
         this.labels             = [];
-        this.chartOptions       = [];
-        this.animate            = '';
+        this.chartOptions       = {};
+        this._resizeHandler     = null;
 
         // Default options (will be cloned before use)
         this.baseOptions = {
@@ -537,7 +536,7 @@ class EChart
                     type: 'pie',
                     roseType: 'radius',
                     radius: [innerRadius, outerRadius], // Configurable radius values
-                    center: ['50%', '50%'],
+                    center: this.chartOptions?.title?.text ? ['50%', '57%'] : ['50%', '50%'],
                     itemStyle: {
                         borderRadius: 2
                     },
@@ -556,7 +555,7 @@ class EChart
             });
         }
 
-        if (this.type === 'doughnut') {
+        if (this.currentType === 'doughnut') {
             return this.datasets.map(dataset => {
                 const data = dataset.data.map((v, i) => {
                     const item = {
@@ -968,6 +967,12 @@ class EChart
             options.xAxis.axisLabel.textStyle = {
                 color: '#8A99AA'
             };
+
+            // Show all bars by default (override the 80-100% default zoom)
+            options.dataZoom[0].start = 0;
+            options.dataZoom[0].end = 100;
+            options.dataZoom[1].start = 0;
+            options.dataZoom[1].end = 100;
         }
 
         // For horizontal bar charts, just swap the axes (same as vertical but inverted)
@@ -999,6 +1004,9 @@ class EChart
         if (this.chartOptions.title?.text) {
             options.title.text = this.chartOptions.title.text;
             options.title.left = this.chartOptions.title.align || 'left';
+            if (this.chartOptions.title.fontSize !== undefined) {
+                options.title.textStyle.fontSize = this.chartOptions.title.fontSize;
+            }
         }
 
         // Y-axis features
@@ -1235,9 +1243,8 @@ class EChart
         }
 
         // Handle window resize
-        window.addEventListener('resize', () => {
-            chart.resize();
-        });
+        this._resizeHandler = () => { chart.resize(); };
+        window.addEventListener('resize', this._resizeHandler);
     }
 
     // helper local formatter (use user's locale and local timezone)
@@ -1360,6 +1367,12 @@ EChart.destroyInstance = function(chartId) {
     if (instance) {
         instance.stopAutoUpdate();
 
+        // Remove resize listener
+        if (instance._resizeHandler) {
+            window.removeEventListener('resize', instance._resizeHandler);
+            instance._resizeHandler = null;
+        }
+
         // Clean up DOM element reference
         const chartElement = document.querySelector("#" + chartId);
         if (chartElement && chartElement._chartInstance) {

diff --git a/www/public/resources/js/classes/Layout.js b/www/public/resources/js/classes/Layout.js
@@ -56,6 +56,11 @@ class Layout {
         $('body').append('<div class="body-veil"><img src="/assets/official-logo/logo.svg" /><img class="mediumopacity-cst" src="/assets/icons/loading.svg" /></div>');
     }
 
+    toggleElementById(id)
+    {
+        $('#' + id).toggle();
+    }
+
     /**
      *  Reload opened or closed elements that where opened/closed before reloading
      */

diff --git a/www/public/resources/js/classes/Modal.js b/www/public/resources/js/classes/Modal.js
@@ -38,18 +38,6 @@ class Modal
         // Remove existing modal loading window if any
         $('.modal-window-container.modal-loading').remove();
 
-        // Parse content and if a line contains [ERR] or [WRN], color it accordingly
-        content = content.split('\n').map(function(line) {
-            if (line.includes('[ERR]')) {
-                return '<span class="redtext font-size-12">' + line + '</span>';
-            }
-            if (line.includes('[WRN]')) {
-                return '<span class="yellowtext font-size-12">' + line + '</span>';
-            }
-
-            return line;
-        }).join('\n');
-
         // Generate content
         var html = '<div class="modal-window-container" modal="' + id + '">'
             + '<div class="modal-window">'
@@ -61,6 +49,19 @@ class Modal
 
         // If content must be wrapped in a <pre> tag
         if (inPre) {
+            // Escape HTML entities first to prevent XML/HTML tags from being interpreted by the browser,
+            // then apply [ERR]/[WRN] coloring
+            content = content.split('\n').map(function(line) {
+                const escaped = line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+                if (escaped.includes('[ERR]')) {
+                    return '<span class="redtext font-size-12">' + escaped + '</span>';
+                }
+                if (escaped.includes('[WRN]')) {
+                    return '<span class="yellowtext font-size-12">' + escaped + '</span>';
+                }
+
+                return escaped;
+            }).join('\n');
             html += '<pre class="codeblock copy">' + content + '</pre>';
         } else {
             html += content;

diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
@@ -1,5 +1,5 @@
 /**
- *  v1.21
+ *  v1.22
  */
 @font-face{font-family: 'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');}
 
@@ -54,7 +54,7 @@ h1, h2, h3, h4 {
 h3 {
     width: max-content;
     font-size: 18px;
-    margin: 50px 0 40px 0;
+    margin: 40px 0 40px 0;
     border-bottom: 1px solid #15bf7f;
 }
 
@@ -88,6 +88,57 @@ h6 {
     word-break: break-all;
 }
 
+.note-link {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.note-link::before {
+    filter: brightness(0) saturate(100%) invert(72%) sepia(2%) saturate(2168%) hue-rotate(169deg) brightness(95%) contrast(95%);
+    content: "";
+    background-image: url('/assets/icons/external-link.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-left: 4px;
+    margin-right: 1px;
+}
+
+.note-link:hover {
+    color: #ffffff;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 8px;
+    padding: 18px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: 1px dashed #5473e8;
+    border-radius: 20px;
+    background-color: #13263a;
+}
+
+.empty-state p {
+    margin: 0;
+}
+
+.empty-state-title {
+    font-weight: bold;
+}
+
+.empty-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+    row-gap: 8px;
+    margin-top: 4px;
+}
+
 .required::after {
     content: ' *';
     font-size: 12px;
@@ -166,8 +217,9 @@ pre.codeblock {
 .overflowy-hidden{overflow-y:hidden}
 .flex{display:flex!important;}
 .flex-div-15 { flex: 0 0 14%; }.flex-div-20 { flex: 0 0 19%; }.flex-div-25 { flex: 0 0 24%; }.flex-div-30 { flex: 0 0 29%; }
-.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 47%; }.flex-div-60 { flex: 0 0 59%; }
+.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 48.5%; }.flex-div-60 { flex: 0 0 59%; }
 .flex-div-65 { flex: 0 0 64%; }.flex-div-68 { flex: 0 0 67%; }.flex-div-80 { flex: 0 0 79%; }.flex-div-90 { flex: 0 0 90%; }.flex-div-100 { flex: 0 0 98%; }
+.flex-1{flex:1;}
 .flex-grow { flex-grow: 1; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-nowrap { flex-wrap: nowrap; }
@@ -194,6 +246,7 @@ pre.codeblock {
 /* For responsive */
 /* column on mobile */
 .flexrc{display:flex;flex-direction: column;}
+.flex-wrap-mobile{flex-wrap:wrap;}
 .hide-mobile{display:none!important;}
 .justify-center {justify-content: center}
 .justify-space-between {justify-content: space-between}
@@ -224,14 +277,15 @@ pre.codeblock {
 .margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-8{margin-top:8px!important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}.margin-top-50{margin-top:50px !important}
 .margin-bottom-0 {margin-bottom: 0px !important}.margin-bottom-5 {margin-bottom: 5px !important}.margin-bottom-8{margin-bottom:8px!important}.margin-bottom-10 {margin-bottom: 10px !important}.margin-bottom-15 {margin-bottom: 15px !important}.margin-bottom-20 {margin-bottom: 20px !important}.margin-bottom-30 {margin-bottom: 30px !important}.margin-bottom-40 {margin-bottom: 40px !important} .margin-bottom-50{margin-bottom:50px!important}
 .min-height-100{min-height:100px!important}.min-height-120{min-height:120px!important}.min-height-150{min-height:150px!important}.min-height-200{min-height:200px!important}.min-height-300{min-height:300px!important}.min-height-400{min-height:400px!important}.min-height-500{min-height:500px!important}.min-height-600{min-height:600px!important}.min-height-700{min-height:700px!important}.min-height-800{min-height:800px!important}.min-height-900{min-height:900px!important}.min-height-1000{min-height:1000px!important}
-.min-width-100 {min-width: 100px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
+.min-width-100 {min-width: 100px}.min-width-150{min-width: 150px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
 .min-height-50vh{min-height:50vh}.min-height-90vh{min-height:90vh}.min-height-100vh{min-height:100vh}
 .min-width-100vw{min-width:100vw}
-.width-100{width:100%}
+.width-50{width:50%}.width-100{width:100%}
 .height-100{height:100%}
 .max-width-fit{max-width:fit-content}
 .max-width-80{max-width:80px}.max-width-100{max-width:100px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}
 .resize-disabled{resize:none;}
+.dot{font-family: 'Roboto', 'Arial', sans-serif;font-size: 13px;}
 
 code {
     font-family: monospace, monospace;
@@ -265,44 +319,83 @@ code {
     grid-template-columns: fit-content(33%) auto 10%;
 }
 
+.table-container-2 {
+    grid-template-columns: auto 10%;
+}
+
+/**
+ *  Generic modern list items for slide panels
+ */
+.table-container-2.panel-list-item {
+    padding: 12px 18px;
+    border: 1px solid rgba(52, 97, 136, 0.45);
+    border-left: 3px solid #1e3a54;
+    /* border-radius: 10px; */
+    background:
+        linear-gradient(135deg, rgba(17, 33, 50, 0.82), rgba(23, 44, 66, 0.7));
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.03),
+        0 6px 16px rgba(7, 14, 24, 0.24);
+    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.table-container-2.panel-list-item:hover {
+    background:
+        linear-gradient(135deg, rgba(20, 38, 57, 0.9), rgba(27, 50, 74, 0.76)) !important;
+    border-top-color: rgba(76, 132, 178, 0.58);
+    border-right-color: rgba(76, 132, 178, 0.58);
+    border-bottom-color: rgba(76, 132, 178, 0.58);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 8px 20px rgba(8, 16, 28, 0.3);
+}
+
 [class*=' pagination-btn'],[class^='pagination-btn'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 35px;
+    min-width: 32px;
     height: 30px;
-    border: none;
-    border-radius: 60px;
-    color: white;
+    border: 1px solid #2d5575;
+    border-radius: 6px;
+    color: #97a5b4;
     text-align: center;
     text-decoration: none;
-    font-size: 14px;
+    font-size: 13px;
     cursor: pointer;
-    background-color: #15bf7f;
-    border-radius: 0;
+    background-color: transparent;
+    margin: 0 2px;
+    transition: all 0.15s ease;
 }
 
 [class*=' pagination-btn']:hover,[class^='pagination-btn']:hover {
-    background-color: #12a16a;
+    background-color: rgba(34, 56, 79, 0.6);
+    border-color: #3d7aab;
+    color: #ffffff;
 }
 
 .pagination-btn-current {
-    background-color: #12a16a;
-    border: 1px solid #10885a;
+    background-color: rgba(21, 191, 127, 0.15);
+    border-color: #15bf7f;
+    color: #15bf7f;
+}
+
+.pagination-btn-current:hover {
+    background-color: rgba(21, 191, 127, 0.25);
+    border-color: #15bf7f;
+    color: #15bf7f;
 }
 
 .pagination-btn-first {
-    border-top-left-radius: 60px;
-    border-bottom-left-radius: 60px;
+    border-radius: 6px;
 }
 
 .pagination-btn-last {
-    border-top-right-radius: 60px;
-    border-bottom-right-radius: 60px;
+    border-radius: 6px;
 }
 
 .pagination-btn-previous, .pagination-btn-next {
-    width: 40px;
+    width: 35px;
 }
 
 .round-item {
@@ -395,6 +488,7 @@ code {
     .grid-rfr-1-6{grid-template-columns:repeat(6, 1fr)!important}
     .grid-rfr-2-4{grid-template-columns:repeat(4, 1fr)!important}
     .flexrc{flex-direction:row!important;}
+    .flex-wrap-mobile{flex-wrap:nowrap!important;}
     .hide-mobile{display:initial!important;}
     .d-align-item-center{align-items:center!important;}
     .table-container-3{grid-template-columns: fit-content(10%) auto 10%!important}
@@ -406,4 +500,4 @@ code {
     #loading {
         display: flex;
     }
-}
+}