update os logic

public/javascript/main.js

@@ -1476,19 +1476,54 @@ function createTd(tr, text, options = {}) {
 };
 //#endregion
 
+
 //#region Tabs
-function createTab(tabSelector, name, onclick = null) {
-  const tabElement = document.createElement('div');
-  tabElement.className = 'tab';
-  tabElement.dataset.tab = name;
-  tabElement.textContent = name;
-  tabSelector.appendChild(tabElement);
-  tabElement.addEventListener('click', async () => {
-    Array.from(document.querySelectorAll('.tab')).forEach(t => t.classList.remove('active'));
-    tabElement.classList.add('active');
-    if(typeof onclick === 'function') {
-      onclick();
+function createTab(tabSelector, name, options = {}) {
+    const {
+        id = null,
+        hidden = false,
+        classes = [],
+        styles = null,
+        attributes = {},
+        onclick = null
+    } = options;
+
+    const tabElement = document.createElement('div');
+    tabElement.className = 'tab';
+    tabElement.dataset.tab = name;
+    tabElement.textContent = name;
+    tabSelector.appendChild(tabElement);
+
+    if(id !== null) {
+        tabElement.id = id;
     }
-  });
+
+    // Standard-Stile & Attribute
+    tabElement.hidden = hidden;
+
+    classes.forEach(c => tabElement.classList.add(c));
+
+    if (styles && typeof styles === 'object') {
+        Object.entries(styles).forEach(([prop, value]) => {
+        tabElement.style[prop] = value;
+        });
+    }
+
+    // Data attributes
+    if (attributes && typeof attributes === 'object') {
+        Object.entries(attributes).forEach(([key, value]) => {
+        tabElement.setAttribute(key, value);
+        });
+    }
+
+    tabElement.addEventListener('click', async (evt) => {
+        Array.from(tabSelector.querySelectorAll('.tab')).forEach(t => t.classList.remove('active'));
+        tabElement.classList.add('active');
+        if(typeof onclick === 'function') {
+            onclick(evt);
+        }
+    });
+
+    return tabElement;
 }
 //#endregion