From 3afcbd8b01198acdaf18f2abb15a9bf4d743a1ea Mon Sep 17 00:00:00 2001
From: Marcelo <mdares@maliountech.com>
Date: Fri, 28 Nov 2025 13:57:32 -0600
Subject: [PATCH] Review

---
 flows.json | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/flows.json b/flows.json
index e4433a8..0e5f45f 100644
--- a/flows.json
+++ b/flows.json
@@ -527,7 +527,7 @@
         "order": 1,
         "width": "25",
         "height": "25",
-        "format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n  font-size: 125%;\n  --bg-0: #0c1117;\n  --bg-1: #131a23;\n  --panel: #151e2b;\n  --panel-hi: #1a2433;\n  --text: #ecf3ff;\n  --muted: #96a5b7;\n  --accent: #2ea3ff;\n  --accent-2: #1f8cf3;\n  --good: #24d06f;\n  --warn: #ffd100;\n  --bad: #ff4d4f;\n  --radius: 0.75rem;\n  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n  --sidebar-width: 3.75rem;\n  --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n  --content-max: 100rem;\n  --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n  --section-gap: clamp(0.75rem, 1vw, 1rem);\n  --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n  --card-pad-lg: clamp(1.1rem, 1.2vw, 1.35rem);\n  --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n  --fs-section-title: clamp(0.95rem, 0.9vw + 0.25rem, 1.25rem);\n  --fs-label: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);\n  --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n  --progress-height: 0.875rem;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n  width: 100vw;\n  height: 100vh;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  background: var(--bg-0);\n  color: var(--text);\n  font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n  font-weight: 600;\n}\n\nbody {\n  overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n  background: transparent !important;\n  height: 100%;\n  overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n  background: transparent !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  overflow: hidden;\n}\n\n.sidebar {\n  width: var(--sidebar-width);\n  background: #0b1119;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sidebar-gap);\n  align-items: center;\n}\n\n.sb-btn {\n  width: 2.75rem;\n  height: 2.75rem;\n  border-radius: 0.75rem;\n  background: #0f1721;\n  border: 1px solid #19222e;\n  display: grid;\n  place-items: center;\n  color: #8fb3d9;\n  cursor: pointer;\n  transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n  border-color: #2fd289;\n  box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n  color: #2fd289;\n}\n\n.sb-ico {\n  font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n  line-height: 1;\n}\n\n.sb-foot {\n  font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n  color: #6c7b8d;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.main {\n  flex: 1;\n  overflow: auto;\n  padding: var(--content-pad);\n}\n\n.container {\n  max-width: var(--content-max);\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--section-gap);\n}\n\n.card {\n  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n}\n\n/* HEADER: keep title and CTA row on one line */\n.page-heading {\n  display: flex;\n  align-items: center;\n  gap: var(--section-gap);\n  padding: 0 0.25rem;\n  flex-wrap: wrap;\n}\n\n.page-title {\n  margin: 0;\n  font-size: var(--fs-page-title);\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--text);\n}\n\n.page-actions {\n  margin-left: auto;\n  display: flex;\n  gap: clamp(0.65rem, 1vw, 0.9rem);\n  flex-wrap: wrap;\n}\n\n.action-btn {\n  background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n  box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n  border: none;\n  border-radius: var(--radius);\n  color: var(--text);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-weight: 700;\n  padding: clamp(0.75rem, 1vw, 0.9rem) clamp(1rem, 1.4vw, 1.25rem);\n  cursor: pointer;\n  transition: 0.16s transform, 0.16s filter;\n  min-width: clamp(8.75rem, 12vw, 10rem);\n}\n\n.action-btn:hover {\n  transform: translateY(-0.05rem);\n  filter: brightness(1.08);\n}\n\n.action-btn:active {\n  transform: none;\n  filter: brightness(0.96);\n}\n\n/* TABLE: keep density + typography aligned with Home */\n.table-card {\npadding: var(--card-pad-lg);\ndisplay: flex;\nflex-direction: column;\ngap: clamp(0.75rem, 0.9vw, 0.95rem);\n}\n\n.table-scroll {\noverflow: auto;\nborder-radius: 0.625rem;\nborder: 1px solid rgba(31, 44, 60, 0.55);\nbackground: rgba(13, 19, 27, 0.6);\n}\n\n.workorders-table {\nwidth: 100%;\ntable-layout: fixed;\nborder-collapse: separate;\nborder-spacing: 0;\nmin-width: 52rem;\nfont-variant-numeric: tabular-nums;\n}\n\n.workorders-table thead th {\nposition: sticky;\ntop: 0;\nz-index: 2;\ncolor: var(--text);\ntext-transform: uppercase;\nletter-spacing: 0.04em;\nfont-size: clamp(0.75rem, 0.9vw, 0.85rem);\npadding: clamp(0.65rem, 0.9vw, 0.9rem);\nbackground: rgba(21, 30, 43, 0.9);\ntext-align: left;\nborder-bottom: 1px solid rgba(47, 67, 95, 0.55);\n}\n\n.workorders-table tbody td {\npadding: clamp(0.65rem, 0.95vw, 0.95rem);\ncolor: var(--text);\nfont-size: var(--fs-body);\nbackground: rgba(17, 24, 34, 0.7);\nborder-bottom: 1px solid rgba(31, 44, 60, 0.45);\n}\n\n.workorders-table thead th:not(:last-child),\n.workorders-table tbody td:not(:last-child) {\nborder-right: 1px solid rgba(31, 44, 60, 0.35);\n}\n\n.workorders-table tbody tr:nth-child(odd) td {\nbackground: rgba(17, 27, 39, 0.82);\n}\n\n.workorders-table tbody tr:hover td {\nbackground: rgba(36, 56, 80, 0.55);\n}\n\n.workorders-table thead th:nth-child(3),\n.workorders-table thead th:nth-child(4),\n.workorders-table thead th:nth-child(5),\n.workorders-table thead th:nth-child(8),\n.workorders-table tbody td:nth-child(3),\n.workorders-table tbody td:nth-child(4),\n.workorders-table tbody td:nth-child(5),\n.workorders-table tbody td:nth-child(8) {\ntext-align: right;\n}\n\n.progress-cell {\nmin-width: 9.5rem;\n}\n\n.progress-bar {\nheight: var(--progress-height);\nborder-radius: 999px;\nbackground: #111a24;\nborder: 1px solid #243244;\noverflow: hidden;\n}\n\n.progress-bar__fill {\nheight: 100%;\nwidth: 0;\ntransition: width 0.4s ease;\n}\n.workorders-table tbody tr {\ncursor: pointer;\ntransition: background 0.18s ease, border-color 0.18s ease;\n}\n\n.workorders-table tbody tr.row-selected td {\nbackground: rgba(46, 163, 255, 0.18);\nborder-bottom-color: rgba(46, 163, 255, 0.45);\nbox-shadow: inset 0 0 0 1px rgba(46, 163, 255, 0.28);\n}\n\n.progress-bar__fill--pending {\n  background: linear-gradient(90deg, rgba(150, 165, 183, .5), rgba(150, 165, 183, .8));\n}\n\n.progress-bar__fill--running {\n  background: linear-gradient(90deg, rgba(46, 163, 255, .6), rgba(46, 163, 255, .85));\n}\n\n.progress-bar__fill--done {\n  background: linear-gradient(90deg, rgba(36, 208, 111, .75), rgba(36, 208, 111, .95));\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem 0.875rem;\n  border-radius: 999px;\n  font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  font-weight: 700;\n}\n\n.status-badge--pending {\n  color: var(--muted);\n  background: rgba(20, 28, 40, .65);\n  border: 1px solid rgba(150, 165, 183, .35);\n}\n\n.status-badge--running {\n  color: var(--text);\n  background: rgba(30, 52, 73, .7);\n  border: 1px solid rgba(46, 163, 255, .45);\n}\n\n.status-badge--done {\n  color: var(--good);\n  background: rgba(20, 56, 44, .7);\n  border: 1px solid rgba(36, 208, 111, .45);\n}\n\n.table-footer {\n  display: flex;\n  justify-content: flex-end;\n  font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n  color: var(--muted);\n}\n\n\n@media (max-width: 68.75rem) {\n  .page-actions {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n  background-color: transparent !important;\n}\n</style>\n<div id=\"oee\">\n  <aside class=\"sidebar\">\n    <div class=\"side-top\">\n      <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">🏠</span></button>\n      <button class=\"sb-btn active\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">📋</span></button>\n      <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">⚠️</span></button>\n      <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">📊</span></button>\n      <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">❓</span></button>\n      <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">⚙️</span></button>\n    </div>\n    <div class=\"sb-foot\">OEE V1.0</div>\n  </aside>\n\n  <main class=\"main\">\n    <div class=\"container\">\n      <section class=\"page-heading\">\n        <h1 class=\"page-title\">Work Orders</h1>\n        <div class=\"page-actions\">\n          <button class=\"action-btn\" data-action=\"upload-excel\">Upload Excel</button>\n          <button class=\"action-btn\" data-action=\"start-work-order\">Load</button>\n          <button class=\"action-btn\" data-action=\"complete-work-order\">Done</button>\n          <button class=\"action-btn\" data-action=\"refresh-work-orders\">Refresh</button>\n          <input type=\"file\" id=\"wo-file\" accept=\".xlsx\" style=\"display:none\" />\n        </div>\n      </section>\n\n      <section class=\"card table-card\">\n        <div class=\"table-scroll\">\n          <table class=\"workorders-table\">\n            <thead>\n              <tr>\n                <th>ID</th>\n                <th>SKU</th>\n                <th>TARGET</th>\n                <th>GOOD</th>\n                <th>SCRAP</th>\n                <th>PROGRESS</th>\n                <th>STATUS</th>\n                <th>LAST UPDATE</th>\n              </tr>\n            </thead>\n            <tbody id=\"workorders-body\"></tbody>\n          </table>\n        </div>\n        <div class=\"table-footer\"><span id=\"workorders-count\">0 items</span></div>\n      </section>\n    </div>\n  </main>\n</div>\n\n<script>\n(function(scope) {\n  scope.gotoTab = function(tabName) {\n    scope.send({ ui_control: { tab: tabName } });\n  };\n\n  window.workOrders = window.workOrders || [\n    { id:\"WO-101\", sku:\"ST-003\", target:250, good:0, scrap:0, progressPercent:0, status:\"PENDING\", lastUpdateIso:\"\" }\n  ];\n\n  var elements = {\n    tbody: document.getElementById('workorders-body'),\n    count: document.getElementById('workorders-count'),\n    buttons: document.querySelectorAll('[data-action]')\n  };\n\n  function formatNumber(value) {\n    var num = Number(value);\n    return Number.isFinite(num) ? num.toLocaleString() : '0';\n  }\n\n  function formatDate(isoString) {\n    if (!isoString) {\n      return '—';\n    }\n    var date = new Date(isoString);\n    if (Number.isNaN(date.valueOf())) {\n      return isoString;\n    }\n    return date.toLocaleString();\n  }\n\n  function progressFillClass(status) {\n    switch ((status || '').toUpperCase()) {\n      case 'DONE': return 'progress-bar__fill--done';\n      case 'RUNNING': return 'progress-bar__fill--running';\n      default: return 'progress-bar__fill--pending';\n    }\n  }\n\n  function statusBadgeClass(status) {\n    switch ((status || '').toUpperCase()) {\n      case 'DONE': return 'status-badge status-badge--done';\n      case 'RUNNING': return 'status-badge status-badge--running';\n      default: return 'status-badge status-badge--pending';\n    }\n  }\n\n    function renderWorkOrders() {\n    var orders = Array.isArray(window.workOrders) ? window.workOrders : [];\n    orders = orders.filter(function(order) {\n    return (order.status || '').toUpperCase() !== 'DONE';\n    });\n    var selectedId = scope.selectedOrder ? scope.selectedOrder.id : null;\n    \n    if (elements.tbody) {\n    elements.tbody.textContent = '';\n    scope.selectedRow = null;\n    \n    orders.forEach(function(order) {\n    var tr = document.createElement('tr');\n    tr.dataset.orderId = order.id || '';\n    \n    function appendCell(content, alignRight) {\n    var td = document.createElement('td');\n    if (alignRight) td.style.textAlign = 'right';\n    if (content instanceof Node) {\n    td.appendChild(content);\n    } else {\n    td.textContent = content;\n    }\n    tr.appendChild(td);\n    }\n    \n    appendCell(order.id || '—');\n    appendCell(order.sku || '—');\n    appendCell(formatNumber(order.target), true);\n    appendCell(formatNumber(order.good), true);\n    appendCell(formatNumber(order.scrap), true);\n    \n    var progressCell = document.createElement('td');\n    progressCell.className = 'progress-cell';\n    var bar = document.createElement('div');\n    bar.className = 'progress-bar';\n    var fill = document.createElement('div');\n    fill.className = 'progress-bar__fill ' + progressFillClass(order.status);\n    var percent = Math.max(0, Math.min(100, Math.round(Number(order.progressPercent) || 0)));\n    fill.style.width = percent + '%';\n    bar.appendChild(fill);\n    progressCell.appendChild(bar);\n    tr.appendChild(progressCell);\n    \n    var statusCell = document.createElement('td');\n    var badge = document.createElement('span');\n    badge.className = statusBadgeClass(order.status);\n    badge.textContent = (order.status || 'PENDING').toUpperCase();\n    statusCell.appendChild(badge);\n    tr.appendChild(statusCell);\n    \n    appendCell(formatDate(order.lastUpdateIso));\n    \n    tr.addEventListener('click', function() {\n    if (scope.selectedRow && scope.selectedRow !== tr) {\n    scope.selectedRow.classList.remove('row-selected');\n    }\n    scope.selectedRow = tr;\n    scope.selectedOrder = order;\n    tr.classList.add('row-selected');\n    scope.$applyAsync();\n    });\n    \n    if (selectedId && selectedId === (order.id || '')) {\n    tr.classList.add('row-selected');\n    scope.selectedRow = tr;\n    }\n    \n    elements.tbody.appendChild(tr);\n    });\n    }\n    \n    if (elements.count) {\n    var countText = orders.length + (orders.length === 1 ? ' item' : ' items');\n    elements.count.textContent = countText;\n    }\n    }\n\n  scope.renderWorkOrders = renderWorkOrders;\n  renderWorkOrders();\n\nif (elements.buttons) {\nelements.buttons.forEach(function(btn) {\nbtn.addEventListener('click', function() {\nconst action = btn.getAttribute(\"data-action\");\nswitch (action) {\ncase \"upload-excel\": handleUploadExcel(); break;\ncase \"refresh-work-orders\": handleRefresh(); break;\ncase \"start-work-order\": handleStart(); break;\ncase \"complete-work-order\": handleComplete(); break;\ndefault: scope.send({ action }); break;\n}\n});\n});\n}\n  function handleUploadExcel() {\n  const input = document.getElementById(\"wo-file\");\n  input.value = \"\"; // reset\n  input.onchange = function (event) {\n    const file = event.target.files[0];\n    if (!file) return;\n    const reader = new FileReader();\n    reader.onload = function (e) {\n      const base64 = e.target.result.split(\",\")[1];\n      // Send Base64 file to Node-RED\n      scope.send({\n        action: \"upload-excel\",\n        filename: file.name,\n        payload: base64\n      });\n    };\n    reader.readAsDataURL(file);\n  };\n  input.click();\n}\n\n// 2️⃣ Refresh work orders\nfunction handleRefresh() {\n  scope.send({ action: \"refresh-work-orders\" });\n}\n\n// 3️⃣ Start a work order\nfunction handleStart() {\nif (!scope.selectedOrder) return alert(\"Please select a work order first.\");\n  scope.send({ action: \"start-work-order\", payload: scope.selectedOrder });\n  handleRefresh(); // fetch latest statuses immediately\n}\n\n// 4️⃣ Complete a work order\nfunction handleComplete() {\nif (!scope.selectedOrder) return alert(\"No active work order selected.\");\n  scope.send({ action: \"complete-work-order\", payload: scope.selectedOrder });\n  handleRefresh(); // keep table in sync after completion\n}\n\n// 5️⃣ Listen to messages from Node-RED\nscope.$watch(\"msg\", function(msg) {\n  if (!msg) return;\n  if (msg.topic === \"workOrdersList\") {\n    // Update frontend with DB data\n    window.workOrders = msg.payload || [];\n    scope.renderWorkOrders();\n  }\n  if (msg.topic === \"uploadStatus\") {\n    alert(msg.payload.message || \"Upload complete\");\n    handleRefresh();\n  }\n});\n\nfunction handleUploadExcel() {\nconst input = document.getElementById(\"wo-file\");\ninput.value = \"\"; // reset\ninput.onchange = function (event) {\nconst file = event.target.files[0];\nif (!file) return;\nconst reader = new FileReader();\nreader.onload = function (e) {\nconst base64 = e.target.result.split(\",\")[1];\n// Send Base64 file to Node-RED\nscope.send({\naction: \"upload-excel\",\nfilename: file.name,\npayload: base64\n});\n};\nreader.readAsDataURL(file);\n};\ninput.click();\n}\n\n// 2️⃣ Refresh work orders\nfunction handleRefresh() {\nscope.send({ action: \"refresh-work-orders\" });\n}\n\n// 3️⃣ Start a work order\nfunction handleStart() {\nif (!scope.selectedOrder) return alert(\"Please select a work order first.\");\nscope.send({ action: \"start-work-order\", payload: scope.selectedOrder });\n}\n\n// 4️⃣ Complete a work order\nfunction handleComplete() {\nif (!scope.selectedOrder) return alert(\"No active work order selected.\");\nscope.send({ action: \"complete-work-order\", payload: scope.selectedOrder });\n}\n\n// 5️⃣ Listen to messages from Node-RED\n  scope.$watch(\"msg\", function(msg) {\n  if (!msg) return;\n  \n  if (msg.topic === \"workOrderCycle\") {\n  var update = msg.payload || {};\n  var orders = Array.isArray(window.workOrders) ? window.workOrders.slice() : [];\n  var found = false;\n  \n  orders = orders.map(function(order) {\n  if ((order.id || \"\") === (update.id || \"\")) {\n  found = true;\n  return Object.assign({}, order, {\n  good: Number(update.good) || 0,\n  scrap: Number(update.scrap) || 0,\n  target: Number(update.target) || 0,\n  progressPercent: Number(update.progressPercent) || 0,\n  status: update.status ? update.status.toUpperCase() : (order.status || \"PENDING\"),\n  lastUpdateIso: update.lastUpdateIso || order.lastUpdateIso\n  });\n  }\n  return order;\n  });\n  \n  if (!found && update.id) {\n  orders.push(update);\n  }\n  \n  window.workOrders = orders;\n  scope.renderWorkOrders();\n  return;\n  }\n  \n  if (msg.topic === \"workOrdersList\") {\n  window.workOrders = msg.payload || [];\n  scope.renderWorkOrders();\n  }\n  \n  if (msg.topic === \"uploadStatus\") {\n  alert(msg.payload.message || \"Upload complete\");\n  handleRefresh();\n  }\n  });\n\n\n})(scope);\n\n(function ensureNoMaterialTint(){\n  const root = document.getElementById('oee');\n  if (!root) return;\n\n  const targets = root.querySelectorAll([\n    '.md-toolbar',\n    'md-toolbar',\n    '.md-subheader',\n    'md-subheader',\n    '.md-toolbar-tools',\n    '.md-card-title'\n  ].join(','));\n\n  targets.forEach(el => {\n    if (el && el.style) {\n      if (el.style.background) {\n        el.style.background = 'transparent';\n      }\n      if (el.style.backgroundColor) {\n        el.style.backgroundColor = 'transparent';\n      }\n    }\n    if (el && el.classList) {\n      el.classList.remove(\n        'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n        'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n      );\n    }\n  });\n\n  if (!document.getElementById('oee-theme-sentinel')) {\n    const style = document.createElement('style');\n    style.id = 'oee-theme-sentinel';\n    style.textContent = `\n      #oee .md-toolbar::before, #oee .md-toolbar::after,\n      #oee .md-subheader::before, #oee .md-subheader::after,\n      #oee md-toolbar::before, #oee md-toolbar::after,\n      #oee md-subheader::before, #oee md-subheader::after {\n        display: none !important;\n        content: none !important;\n      }\n    `;\n    document.head.appendChild(style);\n  }\n})();\n\n\n// optional render trigger\nscope.$evalAsync(scope.renderWorkOrders);\n</script>\n",
+        "format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n  font-size: 125%;\n  --bg-0: #0c1117;\n  --bg-1: #131a23;\n  --panel: #151e2b;\n  --panel-hi: #1a2433;\n  --text: #ecf3ff;\n  --muted: #96a5b7;\n  --accent: #2ea3ff;\n  --accent-2: #1f8cf3;\n  --good: #24d06f;\n  --warn: #ffd100;\n  --bad: #ff4d4f;\n  --radius: 0.75rem;\n  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n  --sidebar-width: 3.75rem;\n  --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n  --content-max: 100rem;\n  --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n  --section-gap: clamp(0.75rem, 1vw, 1rem);\n  --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n  --card-pad-lg: clamp(1.1rem, 1.2vw, 1.35rem);\n  --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n  --fs-section-title: clamp(0.95rem, 0.9vw + 0.25rem, 1.25rem);\n  --fs-label: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);\n  --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n  --progress-height: 0.875rem;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n  width: 100vw;\n  height: 100vh;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  background: var(--bg-0);\n  color: var(--text);\n  font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n  font-weight: 600;\n}\n\nbody {\n  overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n  background: transparent !important;\n  height: 100%;\n  overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n  background: transparent !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  overflow: hidden;\n}\n\n.sidebar {\n  width: var(--sidebar-width);\n  background: #0b1119;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sidebar-gap);\n  align-items: center;\n}\n\n.sb-btn {\n  width: 2.75rem;\n  height: 2.75rem;\n  border-radius: 0.75rem;\n  background: #0f1721;\n  border: 1px solid #19222e;\n  display: grid;\n  place-items: center;\n  color: #8fb3d9;\n  cursor: pointer;\n  transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n  border-color: #2fd289;\n  box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n  color: #2fd289;\n}\n\n.sb-ico {\n  font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n  line-height: 1;\n}\n\n.sb-foot {\n  font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n  color: #6c7b8d;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.main {\n  flex: 1;\n  overflow: auto;\n  padding: var(--content-pad);\n}\n\n.container {\n  max-width: var(--content-max);\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--section-gap);\n}\n\n.card {\n  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n}\n\n/* HEADER: keep title and CTA row on one line */\n.page-heading {\n  display: flex;\n  align-items: center;\n  gap: var(--section-gap);\n  padding: 0 0.25rem;\n  flex-wrap: wrap;\n}\n\n.page-title {\n  margin: 0;\n  font-size: var(--fs-page-title);\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--text);\n}\n\n.page-actions {\n  margin-left: auto;\n  display: flex;\n  gap: clamp(0.65rem, 1vw, 0.9rem);\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.action-btn {\n  background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n  box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n  border: none;\n  border-radius: var(--radius);\n  color: var(--text);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-weight: 700;\n  padding: clamp(0.75rem, 1vw, 0.9rem) clamp(1rem, 1.4vw, 1.25rem);\n  cursor: pointer;\n  transition: 0.16s transform, 0.16s filter, 0.16s opacity;\n  min-width: clamp(8.75rem, 12vw, 10rem);\n}\n\n.action-btn:hover:not(:disabled) {\n  transform: translateY(-0.05rem);\n  filter: brightness(1.08);\n}\n\n.action-btn:active:not(:disabled) {\n  transform: none;\n  filter: brightness(0.96);\n}\n\n.action-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  filter: grayscale(0.6);\n}\n\n.exit-multi-select {\n  background: linear-gradient(180deg, #ff6b6b 0%, #ff5252 100%);\n  box-shadow: 0 0 1.25rem rgba(255, 75, 75, .4), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n}\n\n.multi-select-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);\n  color: var(--text);\n  padding: 0.5rem 1rem;\n  border-radius: 999px;\n  font-size: clamp(0.8rem, 0.9vw, 0.95rem);\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  box-shadow: 0 0.25rem 0.75rem rgba(46, 163, 255, 0.4);\n  animation: badge-appear 0.3s ease;\n}\n\n@keyframes badge-appear {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* TABLE: keep density + typography aligned with Home */\n.table-card {\npadding: var(--card-pad-lg);\ndisplay: flex;\nflex-direction: column;\ngap: clamp(0.75rem, 0.9vw, 0.95rem);\n}\n\n.table-scroll {\noverflow: auto;\nborder-radius: 0.625rem;\nborder: 1px solid rgba(31, 44, 60, 0.55);\nbackground: rgba(13, 19, 27, 0.6);\n}\n\n.workorders-table {\nwidth: 100%;\ntable-layout: fixed;\nborder-collapse: separate;\nborder-spacing: 0;\nmin-width: 52rem;\nfont-variant-numeric: tabular-nums;\n}\n\n.workorders-table thead th {\nposition: sticky;\ntop: 0;\nz-index: 2;\ncolor: var(--text);\ntext-transform: uppercase;\nletter-spacing: 0.04em;\nfont-size: clamp(0.75rem, 0.9vw, 0.85rem);\npadding: clamp(0.65rem, 0.9vw, 0.9rem);\nbackground: rgba(21, 30, 43, 0.9);\ntext-align: left;\nborder-bottom: 1px solid rgba(47, 67, 95, 0.55);\n}\n\n.workorders-table tbody td {\npadding: clamp(0.65rem, 0.95vw, 0.95rem);\ncolor: var(--text);\nfont-size: var(--fs-body);\nbackground: rgba(17, 24, 34, 0.7);\nborder-bottom: 1px solid rgba(31, 44, 60, 0.45);\n}\n\n.workorders-table thead th:not(:last-child),\n.workorders-table tbody td:not(:last-child) {\nborder-right: 1px solid rgba(31, 44, 60, 0.35);\n}\n\n.workorders-table tbody tr:nth-child(odd) td {\nbackground: rgba(17, 27, 39, 0.82);\n}\n\n.workorders-table tbody tr:hover td {\nbackground: rgba(36, 56, 80, 0.55);\n}\n\n.workorders-table thead th:nth-child(4),\n.workorders-table thead th:nth-child(5),\n.workorders-table thead th:nth-child(6),\n.workorders-table thead th:nth-child(9),\n.workorders-table tbody td:nth-child(4),\n.workorders-table tbody td:nth-child(5),\n.workorders-table tbody td:nth-child(6),\n.workorders-table tbody td:nth-child(9) {\ntext-align: right;\n}\n\n.progress-cell {\nmin-width: 9.5rem;\n}\n\n.progress-bar {\nheight: var(--progress-height);\nborder-radius: 999px;\nbackground: #111a24;\nborder: 1px solid #243244;\noverflow: hidden;\n}\n\n.progress-bar__fill {\nheight: 100%;\nwidth: 0;\ntransition: width 0.4s ease;\n}\n\n.workorders-table tbody tr {\ncursor: pointer;\ntransition: background 0.18s ease, border-color 0.18s ease;\nuser-select: none;\n}\n\n.workorders-table tbody tr.row-selected td {\nbackground: rgba(46, 163, 255, 0.18);\nborder-bottom-color: rgba(46, 163, 255, 0.45);\nbox-shadow: inset 0 0 0 1px rgba(46, 163, 255, 0.28);\n}\n\n.checkbox-cell {\nwidth: 3rem;\npadding-left: clamp(0.75rem, 1vw, 1rem) !important;\nopacity: 0;\npointer-events: none;\ntransition: opacity 0.2s ease;\n}\n\n.multi-select-mode .checkbox-cell {\nopacity: 1;\npointer-events: auto;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\nwidth: 1.125rem;\nheight: 1.125rem;\ncursor: pointer;\naccent-color: var(--accent);\n}\n\n.progress-bar__fill--pending {\n  background: linear-gradient(90deg, rgba(150, 165, 183, .5), rgba(150, 165, 183, .8));\n}\n\n.progress-bar__fill--running {\n  background: linear-gradient(90deg, rgba(46, 163, 255, .6), rgba(46, 163, 255, .85));\n}\n\n.progress-bar__fill--done {\n  background: linear-gradient(90deg, rgba(36, 208, 111, .75), rgba(36, 208, 111, .95));\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem 0.875rem;\n  border-radius: 999px;\n  font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  font-weight: 700;\n}\n\n.status-badge--pending {\n  color: var(--muted);\n  background: rgba(20, 28, 40, .65);\n  border: 1px solid rgba(150, 165, 183, .35);\n}\n\n.status-badge--running {\n  color: var(--text);\n  background: rgba(30, 52, 73, .7);\n  border: 1px solid rgba(46, 163, 255, .45);\n}\n\n.status-badge--done {\n  color: var(--good);\n  background: rgba(20, 56, 44, .7);\n  border: 1px solid rgba(36, 208, 111, .45);\n}\n\n.table-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n  color: var(--muted);\n}\n\n.table-footer-hint {\n  font-size: clamp(0.7rem, 0.8vw, 0.8rem);\n  color: rgba(150, 165, 183, 0.6);\n  font-style: italic;\n}\n\n@media (max-width: 68.75rem) {\n  .page-actions {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n  background-color: transparent !important;\n}\n</style>\n<div id=\"oee\">\n  <aside class=\"sidebar\">\n    <div class=\"side-top\">\n      <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">🏠</span></button>\n      <button class=\"sb-btn active\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">📋</span></button>\n      <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">⚠️</span></button>\n      <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">📊</span></button>\n      <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">❓</span></button>\n      <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">⚙️</span></button>\n    </div>\n    <div class=\"sb-foot\">OEE V1.0</div>\n  </aside>\n\n  <main class=\"main\">\n    <div class=\"container\">\n      <section class=\"page-heading\">\n        <h1 class=\"page-title\">Work Orders</h1>\n        <div class=\"page-actions\">\n          <span id=\"multi-select-badge\" class=\"multi-select-badge\" style=\"display:none;\">\n            <span id=\"selected-count\">0</span> selected\n          </span>\n          <button class=\"action-btn\" data-action=\"upload-excel\">Upload Excel</button>\n          <button class=\"action-btn\" data-action=\"start-work-order\" id=\"load-btn\">Load</button>\n          <button class=\"action-btn\" data-action=\"complete-work-order\" id=\"done-btn\">Done</button>\n          <button class=\"action-btn\" data-action=\"refresh-work-orders\">Refresh</button>\n          <button class=\"action-btn exit-multi-select\" id=\"exit-multi-select-btn\" style=\"display:none;\">Exit Multi-Select</button>\n          <input type=\"file\" id=\"wo-file\" accept=\".xlsx\" style=\"display:none\" />\n        </div>\n      </section>\n\n      <section class=\"card table-card\">\n        <div class=\"table-scroll\">\n          <table class=\"workorders-table\" id=\"workorders-table\">\n            <thead>\n              <tr>\n                <th class=\"checkbox-cell\"></th>\n                <th>ID</th>\n                <th>SKU</th>\n                <th>TARGET</th>\n                <th>GOOD</th>\n                <th>SCRAP</th>\n                <th>PROGRESS</th>\n                <th>STATUS</th>\n                <th>LAST UPDATE</th>\n              </tr>\n            </thead>\n            <tbody id=\"workorders-body\"></tbody>\n          </table>\n        </div>\n        <div class=\"table-footer\">\n          <span id=\"workorders-count\">0 items</span>\n          <span class=\"table-footer-hint\">Tip: Long-press or right-click to multi-select</span>\n        </div>\n      </section>\n    </div>\n  </main>\n</div>\n\n<script>\n(function(scope) {\n  // Multi-select state\n  scope.multiSelectMode = false;\n  scope.selectedOrders = [];\n  scope.longPressTimer = null;\n  scope.longPressDuration = 500; // ms\n\n  scope.gotoTab = function(tabName) {\n    scope.send({ ui_control: { tab: tabName } });\n  };\n\n  window.workOrders = window.workOrders || [\n    { id:\"WO-101\", sku:\"ST-003\", target:250, good:0, scrap:0, progressPercent:0, status:\"PENDING\", lastUpdateIso:\"\" }\n  ];\n\n  var elements = {\n    tbody: document.getElementById('workorders-body'),\n    count: document.getElementById('workorders-count'),\n    buttons: document.querySelectorAll('[data-action]'),\n    table: document.getElementById('workorders-table'),\n    loadBtn: document.getElementById('load-btn'),\n    doneBtn: document.getElementById('done-btn'),\n    exitMultiSelectBtn: document.getElementById('exit-multi-select-btn'),\n    multiSelectBadge: document.getElementById('multi-select-badge'),\n    selectedCount: document.getElementById('selected-count')\n  };\n\n  function formatNumber(value) {\n    var num = Number(value);\n    return Number.isFinite(num) ? num.toLocaleString() : '0';\n  }\n\n  function formatDate(isoString) {\n    if (!isoString) {\n      return '—';\n    }\n    var date = new Date(isoString);\n    if (Number.isNaN(date.valueOf())) {\n      return isoString;\n    }\n    return date.toLocaleString();\n  }\n\n  function progressFillClass(status) {\n    switch ((status || '').toUpperCase()) {\n      case 'DONE': return 'progress-bar__fill--done';\n      case 'RUNNING': return 'progress-bar__fill--running';\n      default: return 'progress-bar__fill--pending';\n    }\n  }\n\n  function statusBadgeClass(status) {\n    switch ((status || '').toUpperCase()) {\n      case 'DONE': return 'status-badge status-badge--done';\n      case 'RUNNING': return 'status-badge status-badge--running';\n      default: return 'status-badge status-badge--pending';\n    }\n  }\n\n  function enterMultiSelectMode() {\n    scope.multiSelectMode = true;\n    elements.table.classList.add('multi-select-mode');\n    elements.exitMultiSelectBtn.style.display = 'inline-block';\n    updateButtonStates();\n    scope.$applyAsync();\n  }\n\n  function exitMultiSelectMode() {\n    scope.multiSelectMode = false;\n    scope.selectedOrders = [];\n    elements.table.classList.remove('multi-select-mode');\n    elements.exitMultiSelectBtn.style.display = 'none';\n    elements.multiSelectBadge.style.display = 'none';\n\n    // Uncheck all checkboxes\n    var checkboxes = elements.tbody.querySelectorAll('input[type=\"checkbox\"]');\n    checkboxes.forEach(function(cb) {\n      cb.checked = false;\n    });\n\n    // Remove all row selections\n    var rows = elements.tbody.querySelectorAll('tr');\n    rows.forEach(function(row) {\n      row.classList.remove('row-selected');\n    });\n\n    updateButtonStates();\n    scope.$applyAsync();\n  }\n\n  function updateButtonStates() {\n    var selectedCount = scope.selectedOrders.length;\n\n    if (scope.multiSelectMode && selectedCount > 0) {\n      elements.multiSelectBadge.style.display = 'inline-flex';\n      elements.selectedCount.textContent = selectedCount;\n\n      // Disable Load button if multiple selected\n      if (selectedCount > 1) {\n        elements.loadBtn.disabled = true;\n      } else {\n        elements.loadBtn.disabled = false;\n      }\n\n      elements.doneBtn.disabled = false;\n    } else if (scope.multiSelectMode) {\n      elements.multiSelectBadge.style.display = 'none';\n      elements.loadBtn.disabled = true;\n      elements.doneBtn.disabled = true;\n    } else {\n      elements.loadBtn.disabled = false;\n      elements.doneBtn.disabled = false;\n    }\n  }\n\n  function toggleOrderSelection(order, checkbox, row) {\n    var index = scope.selectedOrders.findIndex(function(o) {\n      return o.id === order.id;\n    });\n\n    if (index === -1) {\n      // Add to selection\n      scope.selectedOrders.push(order);\n      checkbox.checked = true;\n      row.classList.add('row-selected');\n    } else {\n      // Remove from selection\n      scope.selectedOrders.splice(index, 1);\n      checkbox.checked = false;\n      row.classList.remove('row-selected');\n    }\n\n    updateButtonStates();\n  }\n\n  function renderWorkOrders() {\n    var orders = Array.isArray(window.workOrders) ? window.workOrders : [];\n    orders = orders.filter(function(order) {\n      return (order.status || '').toUpperCase() !== 'DONE';\n    });\n\n    if (elements.tbody) {\n      elements.tbody.textContent = '';\n\n      orders.forEach(function(order) {\n        var tr = document.createElement('tr');\n        tr.dataset.orderId = order.id || '';\n\n        function appendCell(content, alignRight, className) {\n          var td = document.createElement('td');\n          if (className) td.className = className;\n          if (alignRight) td.style.textAlign = 'right';\n          if (content instanceof Node) {\n            td.appendChild(content);\n          } else {\n            td.textContent = content;\n          }\n          tr.appendChild(td);\n        }\n\n        // Checkbox cell\n        var checkboxTd = document.createElement('td');\n        checkboxTd.className = 'checkbox-cell';\n        var checkbox = document.createElement('input');\n        checkbox.type = 'checkbox';\n        checkbox.addEventListener('click', function(e) {\n          e.stopPropagation();\n          if (scope.multiSelectMode) {\n            toggleOrderSelection(order, checkbox, tr);\n          }\n        });\n        checkboxTd.appendChild(checkbox);\n        tr.appendChild(checkboxTd);\n\n        appendCell(order.id || '—');\n        appendCell(order.sku || '—');\n        appendCell(formatNumber(order.target), true);\n        appendCell(formatNumber(order.good), true);\n        appendCell(formatNumber(order.scrap), true);\n\n        var progressCell = document.createElement('td');\n        progressCell.className = 'progress-cell';\n        var bar = document.createElement('div');\n        bar.className = 'progress-bar';\n        var fill = document.createElement('div');\n        fill.className = 'progress-bar__fill ' + progressFillClass(order.status);\n        var percent = Math.max(0, Math.min(100, Math.round(Number(order.progressPercent) || 0)));\n        fill.style.width = percent + '%';\n        bar.appendChild(fill);\n        progressCell.appendChild(bar);\n        tr.appendChild(progressCell);\n\n        var statusCell = document.createElement('td');\n        var badge = document.createElement('span');\n        badge.className = statusBadgeClass(order.status);\n        badge.textContent = (order.status || 'PENDING').toUpperCase();\n        statusCell.appendChild(badge);\n        tr.appendChild(statusCell);\n\n        appendCell(formatDate(order.lastUpdateIso));\n\n        // Long-press functionality for entering multi-select mode\n        tr.addEventListener('mousedown', function(e) {\n          if (scope.multiSelectMode) return;\n\n          scope.longPressTimer = setTimeout(function() {\n            enterMultiSelectMode();\n            toggleOrderSelection(order, checkbox, tr);\n          }, scope.longPressDuration);\n        });\n\n        tr.addEventListener('mouseup', function() {\n          if (scope.longPressTimer) {\n            clearTimeout(scope.longPressTimer);\n            scope.longPressTimer = null;\n          }\n        });\n\n        tr.addEventListener('mouseleave', function() {\n          if (scope.longPressTimer) {\n            clearTimeout(scope.longPressTimer);\n            scope.longPressTimer = null;\n          }\n        });\n\n        // Right-click to enter multi-select mode\n        tr.addEventListener('contextmenu', function(e) {\n          e.preventDefault();\n          if (!scope.multiSelectMode) {\n            enterMultiSelectMode();\n          }\n          toggleOrderSelection(order, checkbox, tr);\n        });\n\n        // Regular click behavior\n        tr.addEventListener('click', function(e) {\n          if (scope.multiSelectMode) {\n            toggleOrderSelection(order, checkbox, tr);\n          } else {\n            // Single-select mode (original behavior)\n            if (scope.selectedRow && scope.selectedRow !== tr) {\n              scope.selectedRow.classList.remove('row-selected');\n            }\n            scope.selectedRow = tr;\n            scope.selectedOrder = order;\n            tr.classList.add('row-selected');\n            scope.$applyAsync();\n          }\n        });\n\n        elements.tbody.appendChild(tr);\n      });\n    }\n\n    if (elements.count) {\n      var countText = orders.length + (orders.length === 1 ? ' item' : ' items');\n      elements.count.textContent = countText;\n    }\n  }\n\n  scope.renderWorkOrders = renderWorkOrders;\n  renderWorkOrders();\n\n  // Exit multi-select button\n  elements.exitMultiSelectBtn.addEventListener('click', function() {\n    exitMultiSelectMode();\n  });\n\n  if (elements.buttons) {\n    elements.buttons.forEach(function(btn) {\n      btn.addEventListener('click', function() {\n        const action = btn.getAttribute(\"data-action\");\n        switch (action) {\n          case \"upload-excel\": handleUploadExcel(); break;\n          case \"refresh-work-orders\": handleRefresh(); break;\n          case \"start-work-order\": handleStart(); break;\n          case \"complete-work-order\": handleComplete(); break;\n          default: scope.send({ action }); break;\n        }\n      });\n    });\n  }\n\n  function handleUploadExcel() {\n    const input = document.getElementById(\"wo-file\");\n    input.value = \"\";\n    input.onchange = function (event) {\n      const file = event.target.files[0];\n      if (!file) return;\n      const reader = new FileReader();\n      reader.onload = function (e) {\n        const base64 = e.target.result.split(\",\")[1];\n        scope.send({\n          action: \"upload-excel\",\n          filename: file.name,\n          payload: base64\n        });\n      };\n      reader.readAsDataURL(file);\n    };\n    input.click();\n  }\n\n  function handleRefresh() {\n    scope.send({ action: \"refresh-work-orders\" });\n  }\n\n  function handleStart() {\n    if (scope.multiSelectMode) {\n      if (scope.selectedOrders.length === 0) {\n        return alert(\"Please select a work order first.\");\n      }\n      if (scope.selectedOrders.length > 1) {\n        return alert(\"Cannot load multiple work orders at once.\");\n      }\n      scope.send({ action: \"start-work-order\", payload: scope.selectedOrders[0] });\n      exitMultiSelectMode();\n    } else {\n      if (!scope.selectedOrder) return alert(\"Please select a work order first.\");\n      scope.send({ action: \"start-work-order\", payload: scope.selectedOrder });\n    }\n    handleRefresh();\n  }\n\n  function handleComplete() {\n    if (scope.multiSelectMode) {\n      if (scope.selectedOrders.length === 0) {\n        return alert(\"No work orders selected.\");\n      }\n\n      // Confirm multi-complete\n      var confirmMsg = \"Mark \" + scope.selectedOrders.length + \" work order(s) as done?\";\n      if (!confirm(confirmMsg)) return;\n\n      // Send all selected orders for completion\n      scope.selectedOrders.forEach(function(order) {\n        scope.send({ action: \"complete-work-order\", payload: order });\n      });\n\n      exitMultiSelectMode();\n    } else {\n      if (!scope.selectedOrder) return alert(\"No active work order selected.\");\n      scope.send({ action: \"complete-work-order\", payload: scope.selectedOrder });\n    }\n    handleRefresh();\n  }\n\n  scope.$watch(\"msg\", function(msg) {\n    if (!msg) return;\n\n    if (msg.topic === \"workOrderCycle\") {\n      var update = msg.payload || {};\n      var orders = Array.isArray(window.workOrders) ? window.workOrders.slice() : [];\n      var found = false;\n\n      orders = orders.map(function(order) {\n        if ((order.id || \"\") === (update.id || \"\")) {\n          found = true;\n          return Object.assign({}, order, {\n            good: Number(update.good) || 0,\n            scrap: Number(update.scrap) || 0,\n            target: Number(update.target) || 0,\n            progressPercent: Number(update.progressPercent) || 0,\n            status: update.status ? update.status.toUpperCase() : (order.status || \"PENDING\"),\n            lastUpdateIso: update.lastUpdateIso || order.lastUpdateIso\n          });\n        }\n        return order;\n      });\n\n      if (!found && update.id) {\n        orders.push(update);\n      }\n\n      window.workOrders = orders;\n      scope.renderWorkOrders();\n      return;\n    }\n\n    if (msg.topic === \"workOrdersList\") {\n      window.workOrders = msg.payload || [];\n      scope.renderWorkOrders();\n    }\n\n    if (msg.topic === \"uploadStatus\") {\n      alert(msg.payload.message || \"Upload complete\");\n      handleRefresh();\n    }\n  });\n\n})(scope);\n\n(function ensureNoMaterialTint(){\n  const root = document.getElementById('oee');\n  if (!root) return;\n\n  const targets = root.querySelectorAll([\n    '.md-toolbar',\n    'md-toolbar',\n    '.md-subheader',\n    'md-subheader',\n    '.md-toolbar-tools',\n    '.md-card-title'\n  ].join(','));\n\n  targets.forEach(el => {\n    if (el && el.style) {\n      if (el.style.background) {\n        el.style.background = 'transparent';\n      }\n      if (el.style.backgroundColor) {\n        el.style.backgroundColor = 'transparent';\n      }\n    }\n    if (el && el.classList) {\n      el.classList.remove(\n        'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n        'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n      );\n    }\n  });\n\n  if (!document.getElementById('oee-theme-sentinel')) {\n    const style = document.createElement('style');\n    style.id = 'oee-theme-sentinel';\n    style.textContent = `\n      #oee .md-toolbar::before, #oee .md-toolbar::after,\n      #oee .md-subheader::before, #oee .md-subheader::after,\n      #oee md-toolbar::before, #oee md-toolbar::after,\n      #oee md-subheader::before, #oee md-subheader::after {\n        display: none !important;\n        content: none !important;\n      }\n    `;\n    document.head.appendChild(style);\n  }\n})();\n\nscope.$evalAsync(scope.renderWorkOrders);\n</script>\n",
         "storeOutMessages": true,
         "fwdInMessages": true,
         "resendOnRefresh": true,
@@ -777,7 +777,9 @@
         "x": 910,
         "y": 120,
         "wires": [
-            []
+            [
+                "b2c3d4e5f6a7b8c9"
+            ]
         ]
     },
     {
@@ -968,7 +970,21 @@
         "y": 400,
         "wires": [
             [
-                "578c92e75bf0f266",
+                "578c92e75bf0f266"
+            ]
+        ]
+    },
+    {
+        "id": "graph_mariadb_node",
+        "type": "mysql",
+        "z": "cac3a4383120cb57",
+        "g": "b7ab5e0cc02b9508",
+        "mydb": "00d8ad2b0277f906",
+        "name": "mariaDB (Graph Data)",
+        "x": 860,
+        "y": 560,
+        "wires": [
+            [
                 "format_graph_data_node_id"
             ]
         ]
@@ -1661,7 +1677,7 @@
         "y": 560,
         "wires": [
             [
-                "f6ad294bc02618c9"
+                "graph_mariadb_node"
             ]
         ]
     },