wf work + fa upgrade + css cleanup + network tweaks

2025-12-07 09:36:05 -08:00 · 2025-03-30 17:29:22 +11:00
parent 2d4ca7e8ae
commit e0c06548ba
27 changed files with 131 additions and 1683 deletions
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -1517,10 +1517,9 @@ input[readonly] {
 /* AdminLTE overrides */
 #networkTree .box
 {
-    border-top:1px;
+    /* border-top:1px; */
    border-top-color:grey;
    padding:0px;
-    padding-top:6px;
    margin:0px;
    align-items:center;
    border-radius:20px;
@@ -1528,7 +1527,7 @@ input[readonly] {
    /* display:flex; */
    flex-direction:column;
    justify-content:center;
-    display: inline-grid;
+    /* display: inline-grid; */
 }
 .helpIcon
 {
@@ -1577,17 +1576,16 @@ input[readonly] {
    width: auto;
 }

+
 #networkTree .netCollapse
 {
-    display: block;
    position: absolute;
-    margin-left: 170px;    
-    font-size: large;
-    left: -15px;
+    right: 0;
+    margin-right: -3px;
 }
 #networkTree .highlightedNode
 {
-    border: solid;
+    /* border: solid; */
    border-color:cyan;
 }
 #networkTree .netStatus-Off-line i,
@@ -1598,7 +1596,6 @@ input[readonly] {

 .spanNetworkTree {
    display: inline-block;
-    /* width: 135px; */
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
@@ -1614,6 +1611,11 @@ input[readonly] {
    /* margin-left: 0.2em; */
 }

+.networkTable .networkNodeTabHeaders a {
+    display: block;
+    height: 3em;
+}
+
 .networkTable .icon {
    /* padding-left:2em; */
    width:2em;
@@ -1632,7 +1634,6 @@ input[readonly] {

 .networkNodeTabHeaders
 {
-    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
@@ -1710,13 +1711,6 @@ input[readonly] {
    padding-top: 20px;
 }

-  
-.login-page .login-custom
-{
-    width:480px;
-    
-}
-
 /*Hidden special button*/

@media (max-width: 365px) {
@@ -1975,6 +1969,7 @@ input[readonly] {
    right: 0.1em;
 }

+
 .workflows .remove-condition
 {
    z-index: 1;
--- a/front/devices.php
+++ b/front/devices.php
@@ -74,10 +74,10 @@

            <!-- box-header -->
            <div class="box-header">
-              <div class=" col-md-9 ">
+              <div class=" col-sm-8 ">
                <h3 id="tableDevicesTitle" class="box-title text-gray "></h3>  
              </div>    
-              <div  class="dummyDevice col-md-3 ">
+              <div  class="dummyDevice col-sm-4 ">
                <span id="multiEditPlc">
                  <!-- multi edit button placeholder -->
                </span>
--- a/front/index.php
+++ b/front/index.php
@@ -92,10 +92,8 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
  <!-- iCheck -->
  <link rel="stylesheet" href="lib/iCheck/square/blue.css">
  <!-- Font Awesome -->
-  <link rel="stylesheet" href="lib/font-awesome/fontawesome.min.css">
-  <link rel="stylesheet" href="lib/font-awesome/solid.css">
-  <link rel="stylesheet" href="lib/font-awesome/brands.css">
-  <link rel="stylesheet" href="lib/font-awesome/v5-font-face.css">
+  <link rel="stylesheet" href="lib/font-awesome/all.min.css">
+
  <!-- Favicon -->
  <link id="favicon" rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">

@@ -112,7 +110,7 @@ switch ($UI_THEME) {
 ?>
  <link rel="stylesheet" href="/css/offline-font.css">
 </head>
-<body class="hold-transition login-page">
+<body class="hold-transition login-page col-sm-12 col-sx-12">
 <div class="login-box login-custom">
  <div class="login-logo">
    <a href="/index2.php">Net<b>Alert</b><sup>x</sup></a>
--- a/front/lib/font-awesome/all.min.css
+++ b/front/lib/font-awesome/all.min.css
--- a/front/lib/font-awesome/brands.css
+++ b/front/lib/font-awesome/brands.css
--- a/front/lib/font-awesome/brands.min.css
+++ b/front/lib/font-awesome/brands.min.css
--- a/front/lib/font-awesome/fontawesome.min.css
+++ b/front/lib/font-awesome/fontawesome.min.css
--- a/front/lib/font-awesome/solid.css
+++ b/front/lib/font-awesome/solid.css
@@ -1,19 +0,0 @@
-/*!
- * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2022 Fonticons, Inc.
- */
-:root, :host {
-  --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-.fas,
-.fa-solid {
-  font-weight: 900; }
--- a/front/lib/font-awesome/solid.min.css
+++ b/front/lib/font-awesome/solid.min.css
@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2022 Fonticons, Inc.
- */
-:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
--- a/front/lib/font-awesome/v5-font-face.css
+++ b/front/lib/font-awesome/v5-font-face.css
@@ -1,22 +0,0 @@
-/*!
- * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2022 Fonticons, Inc.
- */
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-display: block;
-  font-weight: 400;
-  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-display: block;
-  font-weight: 900;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-display: block;
-  font-weight: 400;
-  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
--- a/front/lib/font-awesome/v5-font-face.min.css
+++ b/front/lib/font-awesome/v5-font-face.min.css
@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2022 Fonticons, Inc.
- */
-@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}
--- a/front/network.php
+++ b/front/network.php
@@ -6,8 +6,6 @@
  // online / offline badges HTML snippets 
  define('badge_online', '<div class="badge bg-green text-white" style="width: 60px;">Online</div>');
  define('badge_offline', '<div class="badge bg-red text-white" style="width: 60px;">Offline</div>');
-  define('circle_online', '<div class="badge bg-green text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
-  define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px;  height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>'); 
  define('sortable_column', ' <span class="sort-btn" onclick="sortColumn(this)"><i class="fa-solid fa-arrow-up-short-wide"></i></span>'); 
  
 ?>
@@ -39,21 +37,18 @@
        }

        // online/offline status circle (red/green)
-        $node_badge = "";
-        if($node_status == 1) // 1 means online, 0 offline
+        $icon_style = "";
+        if($node_status == 0) // 1 means online, 0 offline
        {
-          $node_badge = circle_online; 
-        } else
-        {
-          $node_badge = circle_offline;
-        }
+          $icon_style = "style=\"color:var(--color-red);\""; 
+        } 

        $decoded_icon = base64_decode($icon);
        $idFromMac = str_replace(":", "_", $node_mac);
        $str_tab_header = '<li class="networkNodeTabHeaders '.$activetab.' " >
                              
                              <a href="#'.$idFromMac.'" data-mytabmac="'.$node_mac.'" id="'.$idFromMac.'_id" data-toggle="tab" title="'.$node_name.' ">' // _id is added so it doesn't conflict with AdminLTE tab behavior
-                                .'<div class="icon">'.$decoded_icon.' </div> <span class="node-name">'.$node_name.'</span>' .$str_port.$node_badge.
+                                .'<div class="icon" '.$icon_style.'>'.$decoded_icon.' </div> <span class="node-name">'.$node_name.'</span>' .$str_port.
                              '</a>
                          </li>';

@@ -697,34 +692,56 @@ function attachTreeEvents()

 // --------------------------------------------------------------------------- 
 // Handle network node click - select correct tab in the bottom table
-function handleNodeClick(nodeData)
+function handleNodeClick(el)
 {    
-  const targetTabMAC = nodeData.data.mac;    
+  const targetTabMAC = $(el).attr("data-mytreemacmain");    

  var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`);

-  // Simulate a click event on the target tab
-  targetTab.click();
+  if (targetTab.length) {
+    // Simulate a click event on the target tab
+    targetTab.click();
+
+    // Smooth scroll to the tab content
+    $('html, body').animate({
+      scrollTop: targetTab.offset().top - 50
+    }, 500); // Adjust the duration as needed
+  }
 }

 // --------------------------------------------------------------------------- 
 var myTree;
-var visibleTreeArea = $(window).height()-155;
-var nodeWidth = 120;
+
+
 var emSize;
 var nodeHeight;
-var sizeCoefficient = 1.4
+// var sizeCoefficient = 1.4
+
+function pxToEm(px, element) {
+    var baseFontSize = parseFloat($(element || "body").css("font-size"));
+    return px / baseFontSize;
+}
+
+function emToPx(em, element) {
+    var baseFontSize = parseFloat($(element || "body").css("font-size"));
+    return Math.round(em * baseFontSize);
+}

 function initTree(myHierarchy)
 {
  // calculate the drawing area based on teh tree width and available screen size
-  var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
-  let screenWidth = $('.content-header').width();
-  let treeWidth = (nodeWidth + 20) *  parentNodesCount;
-  let treeAreaWidth  =  screenWidth < treeWidth ? treeWidth : screenWidth;
+  
+  let baseFontSize = parseFloat($('html').css('font-size')); 
+  let treeAreaHeight = ($(window).height() - 155); ;
+  // calculate the font size of the leaf nodes to fit everything into the tree area
+  leafNodesCount == 0 ? 1 : leafNodesCount;
+
+  emSize = pxToEm((treeAreaHeight/(leafNodesCount)).toFixed(2));
+  
+  let screenWidthEm = pxToEm($('.networkTable').width());

  // init the drawing area size
-  $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${treeAreaWidth}px`)
+  $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`)

  if(myHierarchy.type == "")
  {
@@ -733,13 +750,14 @@ function initTree(myHierarchy)
    return;
  }

-  // calculate the font size of the leaf nodes to fit everything into the tree area
-  leafNodesCount == 0 ? 1 : leafNodesCount;
-  emSize = ((treeAreaHeight/(25*leafNodesCount)).toFixed(2));
-  emSize = emSize > 1 ? 1 : emSize;
+  // handle if only a few nodes
+  emSize > 1 ? emSize = 1 : emSize = emSize;

-  // nodeHeight = ((emSize*100*0.30).toFixed(0))
-  nodeHeight = ((emSize*100*0.30).toFixed(0))
+  let nodeHeightPx = emToPx(emSize*1);
+  let nodeWidthPx = emToPx(screenWidthEm / (parentNodesCount));
+
+  // handle if only a few nodes
+  nodeWidthPx > 160 ? nodeWidthPx = 160 : nodeWidthPx = nodeWidthPx;

  console.log(Treeviz);

@@ -747,8 +765,7 @@ function initTree(myHierarchy)
    htmlId: "networkTree",
    renderNode:  nodeData =>  {

-      var fontSize = "font-size:"+emSize+"em;";
-
+      
      (!emptyArr.includes(nodeData.data.port )) ? port =  nodeData.data.port : port = "";

      (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
@@ -761,10 +778,10 @@ function initTree(myHierarchy)
                      ${atob(nodeData.data.icon)}
                </div>` : "";
      devicePort = `<div  class="netPort" 
-                          style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em">
+                          style="width:${emSize}em;height:${emSize}em">
                      ${portHtml}</div> 
                    <div  class="portBckgIcon" 
-                          style="margin-left:-${emSize*sizeCoefficient}em;">
+                          style="margin-left:-${emSize}em;">
                          ${portBckgIcon}
                    </div>`;
      collapseExpandIcon = nodeData.data.hiddenChildren ? 
@@ -773,7 +790,7 @@ function initTree(myHierarchy)
      // generate +/- icon if node has children nodes
      collapseExpandHtml = nodeData.data.hasChildren ? 
                    `<div class="netCollapse" 
-                          style="font-size:${emSize*sizeCoefficient}em;top:${emSize/6}em" 
+                          style="font-size:${nodeHeightPx/2}px;top:${nodeHeightPx/4}px" 
                          data-mytreepath="${nodeData.data.path}" 
                          data-mytreemac="${nodeData.data.mac}">
                      <i class="fa fa-${collapseExpandIcon} pointer"></i>
@@ -787,21 +804,24 @@ function initTree(myHierarchy)
      // css indicating online/offline status
      statusCss = ` netStatus-${nodeData.data.status}`;

-      return result = `<div class="box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
+      return result = `<div 
+                            class="node-inner box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
                            data-mytreemacmain="${nodeData.data.mac}"
-                            style="height:${nodeData.settings.nodeHeight}px;${fontSize}"
+                            style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
+                            onclick="handleNodeClick(this)"
                        >
                          <div class="netNodeText">
                            <strong>${devicePort}  ${deviceIcon}
-                              <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
-                            </strong>
-                            ${collapseExpandHtml}
-                          </div>
-                        </div>`;
+                              <span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
+                            </strong>                            
+                          </div>                          
+                        </div>
+                        ${collapseExpandHtml}`;
    },
    mainAxisNodeSpacing: 'auto',
-    secondaryAxisNodeSpacing: 0.3,
-    nodeHeight: nodeHeight.toString(),
+    // secondaryAxisNodeSpacing: 0.3,
+    nodeHeight: nodeHeightPx,
+    nodeWidth: nodeWidthPx,
    marginTop: '5',
    isHorizontal : true,
    hasZoom: true,
@@ -811,8 +831,8 @@ function initTree(myHierarchy)
    hasFlatData: false,
    relationnalField: "children",
    linkWidth: (nodeData) => 3,
-    linkColor: (nodeData) => "#ffcc80",
-    onNodeClick: (nodeData) => handleNodeClick(nodeData),
+    linkColor: (nodeData) => "#ffcc80"
+    // onNodeClick: (nodeData) => handleNodeClick(nodeData),
  });      

  console.log(deviceListGlobal);
--- a/front/php/templates/footer.php
+++ b/front/php/templates/footer.php
@@ -30,7 +30,7 @@
    <div class="pull-right no-hidden-xs">
      | <a href="https://gurubase.io/g/netalertx" class="pointer" target="_blank" title="Ask AI"><i class="fa-regular fa-comment-dots fa-flip-horizontal"></i></a> 
      | <a href="https://jokob-sk.github.io/NetAlertX/" class="pointer" target="_blank" title="Documentation"><i class="fa fa-book"></i></a>
-      | <a href="https://github.com/jokob-sk/NetAlertX/issues" class="pointer" target="_blank"><i class="fa-solid fa-bug" title="Report a bug"></i></a> 
+      | <a href="https://github.com/jokob-sk/NetAlertX/issues" class="pointer" target="_blank"><i class="fa fa-bug" title="Report a bug"></i></a> 
      | <a href="https://discord.com/invite/NczTUTWyRr" class="pointer" target="_blank"><i class="fa-brands fa-discord" title="Join Discord"></i></a> 
      | <?= lang('Maintenance_built_on');?>:  <?php include 'php/templates/build.php'; ?> 
      |  Version:  <?php include 'php/templates/version.php'; ?> 
--- a/front/php/templates/header.php
+++ b/front/php/templates/header.php
@@ -59,10 +59,7 @@


  <!-- Font Awesome -->
-  <link rel="stylesheet" href="lib/font-awesome/fontawesome.min.css">
-  <link rel="stylesheet" href="lib/font-awesome/solid.css">
-  <link rel="stylesheet" href="lib/font-awesome/brands.css">
-  <link rel="stylesheet" href="lib/font-awesome/v5-font-face.css">
+  <link rel="stylesheet" href="lib/font-awesome/all.min.css">

  <!-- Ionicons -->
  <link rel="stylesheet" href="lib/Ionicons/ionicons.min.css">
@@ -421,20 +418,15 @@
        </li>

        <!-- Integrations menu item -->
-        <li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('plugins.php', 'workflows.php', 'appEvents.php' ) ) ){ echo 'active menu-open'; } ?>">
+        <li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('plugins.php', 'appEvents.php' ) ) ){ echo 'active menu-open'; } ?>">
          <a href="#">
          <i class="fa fa-fw fa-plug"></i> <span><?= lang('Navigation_Integrations');?></span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
-          <ul class="treeview-menu " style="display: <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('plugins.php', 'workflows.php', 'appEvents.php' ) ) ){ echo 'block'; } else {echo 'none';} ?>;">                    
+          <ul class="treeview-menu " style="display: <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('plugins.php', 'appEvents.php' ) ) ){ echo 'block'; } else {echo 'none';} ?>;">                    
            <li>
-              <div class="info-icon-nav">  </div>
-              <a href="workflows.php"><?= lang('Navigation_Workflows');?></a>
-            </li>
-            <li>
-              <div class="info-icon-nav">  </div>
              <a href="appEvents.php"><?= lang('Navigation_AppEvents');?></a>
            </li>
            <li>
@@ -443,6 +435,11 @@
          </ul>
        </li>

+         <!-- workflows menu item -->
+         <li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('workflows.php') ) ){ echo 'active'; } ?>">
+          <a href="workflows.php"><i class="fa fa-fw  fa-shuffle"></i> <span><?= lang('Navigation_Workflows');?></span></a>
+        </li>
+
        <!-- system info menu item -->
        <li class=" <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('systeminfo.php') ) ){ echo 'active'; } ?>">
          <a href="systeminfo.php"><i class="fa fa-fw fa-info-circle"></i> <span><?= lang('Navigation_SystemInfo');?></span></a>
--- a/front/php/templates/language/ca_ca.json
+++ b/front/php/templates/language/ca_ca.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Actualitza el valor sota. Sigues curós de seguir el format anterior. <b>No hi ha validació.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Deseu els canvis primer abans de comprovar la configuració."
-}
+}
--- a/front/php/templates/language/de_de.json
+++ b/front/php/templates/language/de_de.json
@@ -817,4 +817,4 @@
    "settings_update_item_warning": "",
    "test_event_icon": "",
    "test_event_tooltip": "Speichere die Änderungen, bevor Sie die Einstellungen testen."
-}
+}
--- a/front/php/templates/language/es_es.json
+++ b/front/php/templates/language/es_es.json
@@ -815,4 +815,4 @@
    "settings_update_item_warning": "Actualice el valor a continuación. Tenga cuidado de seguir el formato anterior. <b>O la validación no se realiza.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Guarda tus cambios antes de probar nuevos ajustes."
-}
+}
--- a/front/php/templates/language/fr_fr.json
+++ b/front/php/templates/language/fr_fr.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Mettre à jour la valeur ci-dessous. Veillez à bien suivre le même format qu'auparavant. <b>Il n'y a pas de pas de contrôle.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Enregistrer d'abord vos modifications avant de tester vôtre paramétrage."
-}
+}
--- a/front/php/templates/language/it_it.json
+++ b/front/php/templates/language/it_it.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Aggiorna il valore qui sotto. Fai attenzione a seguire il formato precedente. <b>La convalida non viene eseguita.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Salva le modifiche prima di provare le nuove impostazioni."
-}
+}
--- a/front/php/templates/language/nb_no.json
+++ b/front/php/templates/language/nb_no.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Oppdater verdien nedenfor. Pass på å følge forrige format. <b>Validering etterpå utføres ikke.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Lagre endringene først, før du tester innstillingene dine."
-}
+}
--- a/front/php/templates/language/pl_pl.json
+++ b/front/php/templates/language/pl_pl.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Zaktualizuj poniższą wartość. Zachowaj ostrożność i postępuj zgodnie z poprzednim formatem. <b>Walidacja nie jest wykonywana.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Zapisz zmiany zanim będziesz testować swoje ustawienia."
-}
+}
--- a/front/php/templates/language/pt_br.json
+++ b/front/php/templates/language/pt_br.json
--- a/front/php/templates/language/ru_ru.json
+++ b/front/php/templates/language/ru_ru.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Обновить значение ниже. Будьте осторожны, следуя предыдущему формату. <b>Проверка не выполняется.</b>",
    "test_event_icon": "fa-vial-circle-check",
    "test_event_tooltip": "Сначала сохраните изменения, прежде чем проверять настройки."
-}
+}
--- a/front/php/templates/language/uk_ua.json
+++ b/front/php/templates/language/uk_ua.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "Оновіть значення нижче. Слідкуйте за попереднім форматом. <b>Перевірка не виконана.</b>",
    "test_event_icon": "fa-vial-circle- check",
    "test_event_tooltip": "Перш ніж перевіряти налаштування, збережіть зміни."
-}
+}
--- a/front/php/templates/language/zh_cn.json
+++ b/front/php/templates/language/zh_cn.json
@@ -736,4 +736,4 @@
    "settings_update_item_warning": "更新下面的值。请注意遵循先前的格式。<b>未执行验证。</b>",
    "test_event_icon": "",
    "test_event_tooltip": "在测试设置之前，请先保存更改。"
-}
+}
--- a/front/workflowsCore.php
+++ b/front/workflowsCore.php
@@ -11,19 +11,19 @@
    
  </div>
  <div id="buttons" class="bottom-buttons col-sm-12 col-xs-12">
-    <div class="add-workflow col-sm-12 col-xs-12">
+    <div class="add-workflow col-sm-4 col-xs-12">
      <button type="button" class="btn btn-primary add-workflow-btn col-sm-12 col-xs-12" id="add">
-        <?= lang('WF_Add');?>
+      <i class="fa fa-fw  fa-plus"></i> <?= lang('WF_Add');?>
      </button>
    </div>
-    <div class="save-workflows col-sm-12 col-xs-12">
+    <div class="save-workflows col-sm-4 col-xs-12">
      <button type="button" class="btn btn-primary col-sm-12 col-xs-12" id="save" onclick="saveWorkflows()">
-        <?= lang('WF_Save');?>
+      <i class="fa fa-fw  fa-floppy-disk"></i> <?= lang('WF_Save');?>
      </button>
    </div>
-    <div class="restart-app col-sm-12 col-xs-12">
+    <div class="restart-app col-sm-4 col-xs-12">
      <button type="button" class="btn btn-primary col-sm-12 col-xs-12" id="save" onclick="askRestartBackend()">
-        <?= lang('Maint_RestartServer');?>
+      <i class="fa fa-fw  fa-arrow-rotate-right"></i> <?= lang('Maint_RestartServer');?>
      </button>
    </div>
  </div>
@@ -108,6 +108,8 @@ function renderWorkflows() {
 // Generate UI for a single workflow
 function generateWorkflowUI(wf, wfIndex) {

+  let wfEnabled = (wf?.enabled ?? "No") == "Yes"; 
+
  let $wfContainer = $("<div>", { 
    class: "workflow-card panel col-sm-12 col-sx-12", 
    id: `wf-${wfIndex}-container` 
@@ -121,6 +123,11 @@ function generateWorkflowUI(wf, wfIndex) {
    }
  )

+  let $wfEnabledIcon = $("<i>", { 
+      class: `alignRight fa-regular ${wfEnabled ? "fa-dot-circle" : "fa-circle" }`
+    });
+  
+
  let $wfHeaderLink = $("<a>",
    {
      "class": "pointer  ",
@@ -137,7 +144,7 @@ function generateWorkflowUI(wf, wfIndex) {
    }
  ).text(wf.name)

-  $wfContainer.append($wfHeaderLink.append($wfLinkWrap.append($wfHeaderHeading)));
+  $wfContainer.append($wfHeaderLink.append($wfLinkWrap.append($wfHeaderHeading.append($wfEnabledIcon))));

  // Collapsible panel start

@@ -157,7 +164,7 @@ function generateWorkflowUI(wf, wfIndex) {
    `[${wfIndex}].enabled`, 
    getString("WF_Enabled"),
    wfEnabledOptions, 
-    wf?.enabled ?? "No", 
+    wfEnabled ? "Yes" :"No", 
    `wf-${wfIndex}-enabled`
  );

@@ -210,9 +217,10 @@ function generateWorkflowUI(wf, wfIndex) {
      class: "fa-solid fa-bolt bckg-icon-2-line"
    });

+  $triggerSection.append($triggerIcon);
  $triggerSection.append($triggerTypeDropdown);
  $triggerSection.append($eventTypeDropdown);
-  $triggerSection.append($triggerIcon);
+  
  $wfCollapsiblePanel.append($triggerSection);

  // Conditions
@@ -323,11 +331,13 @@ function generateWorkflowUI(wf, wfIndex) {
    $actionRemoveButtonWrap.append($actionRemoveButton);

    let $actionIcon = $("<i>", { 
-        class: `fa-solid  fa-person-running fa-flip-horizontal bckg-icon-${numberOfLines}-line `
-      });
+      class: `fa-solid  fa-person-running fa-flip-horizontal bckg-icon-${numberOfLines}-line `
+    });
+
+    $actionEl.prepend($actionIcon)

    $actionElWrap.append($actionEl)
-    $actionElWrap.append($actionIcon)
+    
    $actionElWrap.append($actionRemoveButtonWrap)

    $actionsContainer.append($actionElWrap);