Add more panels until support

customize.dist/src/less2/include/sidebar-layout.less

@@ -124,7 +124,10 @@
                         margin-bottom: 0;
                         margin-top: 0.5rem;
                     }
-                
+                    .button.btn.primary.cp-report{
+                        margin-left: 10px; 
+                        cursor: pointer;
+                    }
                 }
 
                 .cp-sidebarlayout-description {

www/common/inner/sidebar-layout.js

@@ -67,21 +67,37 @@ define([
             var isBigClass = big ? '.cp-sidebar-bigger-alert' : ''; // Add the class if we want a bigger font-size
             return h('div.alert.alert-' + type + isBigClass, content);
         };
+        blocks.pre = (value) => {
+            return h('pre', value);
+        }
         
         blocks.textArea = function (attributes, value) {
             return h('textarea', attributes, value || '');
         };
 
+        blocks.unorderedList = function (entries) {
+            const ul = h('ul');
+            entries.forEach(entry => {
+                const li = h('li', [h('strong',  entry)]);
+                ul.appendChild(li);
+            });
+            return ul;
+        };
         
-        blocks.checkbox = (key, label, state, opts) => {
-            var box = UI.createCheckbox(`cp-${app}-${key}`,
-                label,
-                state, { label: { class: 'noTitle' } });
+        
+        blocks.checkbox = (key, label, state, opts, onChange) => {
+            var box = UI.createCheckbox(`cp-${app}-${key}`, label, state, { label: { class: 'noTitle' } });
             if (opts && opts.spinner) {
                 box.spinner = UI.makeSpinner($(box));
             }
+            // Attach event listener for checkbox change
+            $(box).on('change', function() {
+                // Invoke the provided onChange callback function with the new checkbox state
+                onChange(this.checked);
+            });
             return box;
         };
+        
 
         
         
@@ -127,6 +143,10 @@ define([
             return button;
         };
 
+        blocks.box = (content, className) => {
+            return h('div', { class: className }, content);
+        };
+
         const keyToCamlCase = (key) => {
             return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
         };