myio-js-library 0.1.414 → 0.1.415

package/dist/index.cjs

@@ -1122,7 +1122,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.414",
+  version: "0.1.415",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -49980,11 +49980,14 @@ function renderAlarmCard(alarm, _params) {
   ).join("")}</div>
       <button class="alarm-type-scroll-btn alarm-type-scroll-btn--right" tabindex="-1" aria-hidden="true">&#8250;</button>
     </div>` : "";
-  return `<article class="alarm-card${isSelected ? " alarm-card--selected" : ""}" data-alarm-id="${alarm.id}" data-severity="${alarm.severity}" data-state="${alarm.state}">
+  const hideSelect = _params?.hideSelect ?? false;
+  const hideDetails = _params?.hideDetails ?? false;
+  const hideOccurrenceCount = _params?.hideOccurrenceCount ?? false;
+  return `<article class="alarm-card${isSelected ? " alarm-card--selected" : ""}${hideDetails ? " alarm-card--clickable" : ""}" data-alarm-id="${alarm.id}" data-severity="${alarm.severity}" data-state="${alarm.state}">
   <header class="alarm-card-header">
-    <label class="alarm-card-checkbox-wrap" title="Selecionar para a\xE7\xE3o em lote" onclick="event.stopPropagation()">
+    ${!hideSelect ? `<label class="alarm-card-checkbox-wrap" title="Selecionar para a\xE7\xE3o em lote" onclick="event.stopPropagation()">
       <input type="checkbox" class="alarm-card-select" data-alarm-id="${alarm.id}" data-alarm-title="${escapeHtml3(rawTitle)}"${isSelected ? " checked" : ""}>
-    </label>
+    </label>` : ""}
     ${showDeviceBadge && safeSource ? `<span class="alarm-card-device-badge" title="${safeSource}"><svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M4 6h16v10H4zm8 12c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-4 0h8v-1H8v1z"/></svg>${safeSource}</span>` : ""}
     <div class="alarm-card-badges">
       <span class="alarm-severity-badge" data-severity="${alarm.severity}" title="${severityConfig.label}">${severityConfig.icon}</span>
@@ -49996,10 +49999,10 @@ function renderAlarmCard(alarm, _params) {
     ${typeChipsHtml}
     ${showCustomer ? `<span class="alarm-shopping-chip">${BUILDING_ICON}<span class="chip-text">${safeCustomerName}</span></span>` : ""}
     <div class="alarm-card-stats">
-      <div class="alarm-stat">
+      ${!hideOccurrenceCount ? `<div class="alarm-stat">
         <span class="alarm-stat-value alarm-stat-value--large">${safeOccurrences}</span>
         <span class="alarm-stat-label">Qte.</span>
-      </div>
+      </div>` : ""}
       <div class="alarm-stat">
         <span class="alarm-stat-value">${firstSeenRelative}</span>
         <span class="alarm-stat-label">1a. Ocorr\xEAncia</span>
@@ -50011,10 +50014,10 @@ function renderAlarmCard(alarm, _params) {
     </div>
   </div>
   <footer class="alarm-card-footer">
-    ${isActive ? `<button class="btn btn-ack" data-action="acknowledge" data-alarm-id="${alarm.id}" title="Reconhecer"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></button>` : ""}
-    ${alarm.state !== "CLOSED" ? `<button class="btn btn-snooze" data-action="snooze" data-alarm-id="${alarm.id}" title="Adiar"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg></button>` : ""}
-    ${alarm.state !== "CLOSED" ? `<button class="btn btn-escalate" data-action="escalate" data-alarm-id="${alarm.id}" title="Escalar"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg></button>` : ""}
-    <button class="btn btn-details" data-action="details" data-alarm-id="${alarm.id}" title="Detalhes"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></button>
+    ${!_params?.hideActions && isActive ? `<button class="btn btn-ack" data-action="acknowledge" data-alarm-id="${alarm.id}" title="Reconhecer"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></button>` : ""}
+    ${!_params?.hideActions && alarm.state !== "CLOSED" ? `<button class="btn btn-snooze" data-action="snooze" data-alarm-id="${alarm.id}" title="Adiar"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg></button>` : ""}
+    ${!_params?.hideActions && alarm.state !== "CLOSED" ? `<button class="btn btn-escalate" data-action="escalate" data-alarm-id="${alarm.id}" title="Escalar"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg></button>` : ""}
+    ${!hideDetails ? `<button class="btn btn-details" data-action="details" data-alarm-id="${alarm.id}" title="Detalhes"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></button>` : ""}
   </footer>
 </article>`;
 }
@@ -50445,7 +50448,7 @@ function createHodChart(canvas, vals) {
 function parseDevices(source) {
   return source.split(/[,;]+/).map((s) => s.trim()).filter(Boolean);
 }
-function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
+function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction) {
   const sev = SEVERITY_CONFIG[alarm.severity];
   const st = STATE_CONFIG[alarm.state];
   const count = alarm.occurrenceCount || 1;
@@ -50517,9 +50520,9 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
           <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
           Resumo
         </button>
-        <button class="adm-tab" data-panel="relatorio">
-          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
-          Relat\xF3rio <span class="adm-tab-badge">${count}</span>
+        <button class="adm-tab" data-panel="timeline">
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="7.05" y2="7.05"/><line x1="16.95" y1="16.95" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="7.05" y2="16.95"/><line x1="16.95" y1="7.05" x2="19.78" y2="4.22"/></svg>
+          Timeline <span class="adm-tab-badge">${count}</span>
         </button>
         <button class="adm-tab" data-panel="dispositivos">
           <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M20 3H4a1 1 0 00-1 1v12a1 1 0 001 1h8v2H8v2h8v-2h-4v-2h8a1 1 0 001-1V4a1 1 0 00-1-1zm-1 12H5V5h14v10z"/></svg>
@@ -50540,7 +50543,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
 
         <!-- RESUMO -->
         <div class="adm-panel is-active" data-panel="resumo">
-          <div class="adm-kpi-grid">
+          ${groupMode !== "separado" ? `<div class="adm-kpi-grid">
             <div class="adm-kpi">
               <div class="adm-kpi-value" style="color:${sev.text}">${count}</div>
               <div class="adm-kpi-label">Ocorr\xEAncias</div>
@@ -50553,7 +50556,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
               <div class="adm-kpi-value">${durLabel}</div>
               <div class="adm-kpi-label">Dura\xE7\xE3o</div>
             </div>
-          </div>
+          </div>` : ""}
 
           ${alarm.description ? `<div class="adm-description">${escHtml(alarm.description)}</div>` : ""}
 
@@ -50609,8 +50612,32 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
 
         </div>
 
-        <!-- RELAT\xD3RIO (unificado: timeline + estat\xEDsticas + sum\xE1rio + exporta\xE7\xE3o) -->
-        <div class="adm-panel" data-panel="relatorio">
+        <!-- TIMELINE (ocorr\xEAncias + a\xE7\xF5es individuais e em lote) -->
+        <div class="adm-panel" data-panel="timeline">
+          <div class="adm-tl-header" id="admTlHeader">
+            <div class="adm-tl-toolbar">
+              <span class="adm-tl-summary" id="admTlSummary">${count} ocorr\xEAncia${count !== 1 ? "s" : ""}</span>
+              <button class="adm-tl-batch-toggle" id="admTlBatchToggle" title="A\xE7\xF5es em lote">
+                <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="4" height="4" rx="1"/><path d="M10 7h11"/><rect x="3" y="12" width="4" height="4" rx="1"/><path d="M10 14h11"/><rect x="3" y="19" width="4" height="4" rx="1"/><path d="M10 21h11"/></svg>
+                A\xE7\xE3o em lote
+              </button>
+            </div>
+            <div class="adm-tl-batch-bar" id="admTlBatchBar">
+              <label class="adm-tl-sel-all-label">
+                <input type="checkbox" id="admTlSelAll" class="adm-tl-sel-all-cb">
+                <span>Todos</span>
+              </label>
+              <span class="adm-tl-sel-count" id="admTlSelCount">0 selecionados</span>
+              <select class="adm-tl-action-sel" id="admTlActionSel">
+                <option value="">Selecione a\xE7\xE3o\u2026</option>
+                <option value="acknowledge">Reconhecer</option>
+                <option value="snooze">Adiar</option>
+                <option value="escalate">Escalar</option>
+              </select>
+              <button class="adm-tl-exec-btn" id="admTlExecBtn" disabled>Executar</button>
+              <button class="adm-tl-cancel-btn" id="admTlCancelBtn">Cancelar</button>
+            </div>
+          </div>
           <div class="adm-report-toolbar">
             <label class="adm-report-label">De</label>
             <input type="date" class="adm-report-date-input" id="admRptStart" value="${fmtDateInput(firstMs)}">
@@ -50756,7 +50783,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
       }, 30));
     });
   }
-  const rptPanel = overlay.querySelector('.adm-panel[data-panel="relatorio"]');
+  const rptPanel = overlay.querySelector('.adm-panel[data-panel="timeline"]');
   if (rptPanel) {
     const emitBtn = rptPanel.querySelector("#admRptEmit");
     const csvBtn = rptPanel.querySelector("#admExportCsv");
@@ -50764,11 +50791,18 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
     const grid = rptPanel.querySelector("#admRptGrid");
     const isSeparado = groupMode === "separado";
     let lastCsvRows = [];
+    let batchActive = false;
+    const batchSelectedIds = /* @__PURE__ */ new Set();
+    const _svgAck = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`;
+    const _svgSnooze = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>`;
+    const _svgEscalate = `<svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
     const buildOccurrenceSection = (occFirst, occLast) => {
       const intervalMs = count > 1 ? (occLast - occFirst) / (count - 1) : 0;
       const trigStr = alarm.triggerValue != null ? String(alarm.triggerValue) : null;
       const hasTrigger = trigStr != null;
       const showDevice = !isSeparado && devices.length > 0;
+      const isActive = alarm.state === "OPEN" || alarm.state === "ESCALATED";
+      const isClosed = alarm.state === "CLOSED";
       const idxStyle = (isSingle, isLatest, isFirst) => {
         if (isSingle) return "color:#7c3aed;font-weight:700";
         if (isLatest) return "color:#3b82f6;font-weight:700";
@@ -50816,7 +50850,16 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
           }
           const sepStyle = gi > 0 ? ' style="margin-top:12px;padding-top:12px;border-top:1px dashed #e5e7eb"' : "";
           return `<div${sepStyle}>
-            <div class="adm-timeline-group-header">${escHtml(grp.title)}<span class="adm-timeline-group-count">${gCount}</span></div>
+            <div class="adm-timeline-group-header">
+              <label class="adm-tl-cb-wrap" data-cb-wrap><input type="checkbox" class="adm-tl-row-cb" data-item-id="${alarm.id}__grp${gi}"></label>
+              <span class="adm-tl-group-title">${escHtml(grp.title)}</span>
+              <span class="adm-timeline-group-count">${gCount}</span>
+              <div class="adm-tl-row-btns adm-tl-row-btns--group" data-row-btns>
+                ${isActive ? `<button class="adm-tl-row-btn adm-tl-row-btn--ack" data-action="acknowledge" data-item-id="${alarm.id}" title="Reconhecer">${_svgAck}</button>` : ""}
+                ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--snooze" data-action="snooze" data-item-id="${alarm.id}" title="Adiar">${_svgSnooze}</button>` : ""}
+                ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--escalate" data-action="escalate" data-item-id="${alarm.id}" title="Escalar">${_svgEscalate}</button>` : ""}
+              </div>
+            </div>
             <div class="adm-rpt-table-wrap" style="margin-bottom:0">
               <table class="adm-rpt-table">${gThead}<tbody>${gRows.join("")}</tbody></table>
             </div>
@@ -50830,6 +50873,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
         <th class="adm-rpt-th">Data/Hora</th>
         ${showDevice ? `<th class="adm-rpt-th">Dispositivo</th>` : ""}
         ${hasTrigger ? `<th class="adm-rpt-th adm-rpt-th--num">Trigger</th>` : ""}
+        <th class="adm-rpt-th adm-tl-actions-th">A\xE7\xF5es</th>
       </tr></thead>`;
       const MAX_SHOWN = 30;
       for (let i = count; i >= 1; i--) {
@@ -50846,6 +50890,14 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
           <td class="adm-rpt-cell">${timeStr}</td>
           ${showDevice ? `<td class="adm-rpt-cell adm-rpt-cell--dev">${escHtml(device)}</td>` : ""}
           ${hasTrigger ? `<td class="adm-rpt-cell adm-rpt-cell--num">${escHtml(trigStr)}</td>` : ""}
+          <td class="adm-rpt-cell adm-tl-action-cell">
+            <label class="adm-tl-cb-wrap" data-cb-wrap><input type="checkbox" class="adm-tl-row-cb" data-item-id="${alarm.id}__row${i}"></label>
+            <div class="adm-tl-row-btns" data-row-btns>
+              ${isActive ? `<button class="adm-tl-row-btn adm-tl-row-btn--ack" data-action="acknowledge" data-item-id="${alarm.id}" title="Reconhecer">${_svgAck}</button>` : ""}
+              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--snooze" data-action="snooze" data-item-id="${alarm.id}" title="Adiar">${_svgSnooze}</button>` : ""}
+              ${!isClosed ? `<button class="adm-tl-row-btn adm-tl-row-btn--escalate" data-action="escalate" data-item-id="${alarm.id}" title="Escalar">${_svgEscalate}</button>` : ""}
+            </div>
+          </td>
         </tr>`);
         const csvRow = [`#${i}`, fmt(tsMs)];
         if (showDevice) csvRow.push(device);
@@ -50860,6 +50912,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
           <tfoot><tr>
             <td class="adm-rpt-cell adm-rpt-cell--total" colspan="${showDevice ? hasTrigger ? 3 : 2 : hasTrigger ? 2 : 1}">Total</td>
             <td class="adm-rpt-cell adm-rpt-cell--num adm-rpt-cell--total">${count} ocorr\xEAncia${count !== 1 ? "s" : ""}</td>
+            <td class="adm-rpt-cell adm-rpt-cell--total"></td>
           </tr></tfoot>
         </table>
       </div>`;
@@ -50958,8 +51011,89 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode) {
         </body></html>`);
       win.document.close();
     });
-    emitBtn?.addEventListener("click", () => buildReportTable());
+    emitBtn?.addEventListener("click", () => {
+      buildReportTable();
+      if (batchActive && grid) {
+        grid.querySelectorAll("[data-cb-wrap]").forEach((el) => {
+          el.style.display = "inline-flex";
+        });
+        grid.querySelectorAll("[data-row-btns]").forEach((el) => {
+          el.style.display = "none";
+        });
+      }
+    });
     buildReportTable();
+    const batchToggleBtn = rptPanel.querySelector("#admTlBatchToggle");
+    const batchBar = rptPanel.querySelector("#admTlBatchBar");
+    const selAllCb = rptPanel.querySelector("#admTlSelAll");
+    const selCountEl = rptPanel.querySelector("#admTlSelCount");
+    const actionSel = rptPanel.querySelector("#admTlActionSel");
+    const execBtn = rptPanel.querySelector("#admTlExecBtn");
+    const cancelBatchBtn = rptPanel.querySelector("#admTlCancelBtn");
+    const getAllRowCbs = () => Array.from((grid ?? rptPanel).querySelectorAll(".adm-tl-row-cb"));
+    const updateBatchSelCount = () => {
+      if (selCountEl) selCountEl.textContent = `${batchSelectedIds.size} selecionado${batchSelectedIds.size !== 1 ? "s" : ""}`;
+      if (execBtn) execBtn.disabled = batchSelectedIds.size === 0 || !actionSel?.value;
+    };
+    const applyBatchVisuals = (active) => {
+      (grid ?? rptPanel).querySelectorAll("[data-cb-wrap]").forEach((el) => {
+        el.style.display = active ? "inline-flex" : "none";
+      });
+      (grid ?? rptPanel).querySelectorAll("[data-row-btns]").forEach((el) => {
+        el.style.display = active ? "none" : "inline-flex";
+      });
+    };
+    const setBatchMode = (active) => {
+      batchActive = active;
+      batchToggleBtn?.classList.toggle("is-active", active);
+      if (batchBar) batchBar.style.display = active ? "flex" : "none";
+      applyBatchVisuals(active);
+      if (!active) {
+        batchSelectedIds.clear();
+        if (selAllCb) selAllCb.checked = false;
+        if (actionSel) actionSel.value = "";
+        updateBatchSelCount();
+      }
+    };
+    batchToggleBtn?.addEventListener("click", () => setBatchMode(!batchActive));
+    cancelBatchBtn?.addEventListener("click", () => setBatchMode(false));
+    selAllCb?.addEventListener("change", () => {
+      const checked = selAllCb.checked;
+      getAllRowCbs().forEach((cb) => {
+        cb.checked = checked;
+        if (checked && cb.dataset.itemId) batchSelectedIds.add(cb.dataset.itemId);
+      });
+      if (!checked) batchSelectedIds.clear();
+      updateBatchSelCount();
+    });
+    actionSel?.addEventListener("change", () => updateBatchSelCount());
+    grid?.addEventListener("change", (e) => {
+      const cb = e.target.closest(".adm-tl-row-cb");
+      if (!cb) return;
+      const id = cb.dataset.itemId;
+      if (!id) return;
+      if (cb.checked) batchSelectedIds.add(id);
+      else {
+        batchSelectedIds.delete(id);
+        if (selAllCb) selAllCb.checked = false;
+      }
+      updateBatchSelCount();
+    });
+    grid?.addEventListener("click", (e) => {
+      const btn = e.target.closest("[data-action][data-item-id]");
+      if (!btn || !onAction) return;
+      const action = btn.dataset.action;
+      const itemId = btn.dataset.itemId;
+      const baseId = itemId.split("__")[0];
+      if (action && baseId) onAction(action, baseId);
+    });
+    execBtn?.addEventListener("click", () => {
+      const action = actionSel?.value;
+      if (!action || batchSelectedIds.size === 0 || !onAction) return;
+      const uniqueBaseIds = [...new Set([...batchSelectedIds].map((id) => id.split("__")[0]))];
+      uniqueBaseIds.forEach((id) => onAction(action, id));
+      setBatchMode(false);
+    });
   }
   const annotPanelEl = overlay.querySelector('.adm-panel[data-panel="anotacoes"]');
   if (annotPanelEl) {
@@ -51611,6 +51745,11 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   background: var(--alarms-card-hover);
 }
 
+/* Grouped modes (consolidado/porDispositivo): whole card is the click target */
+.alarm-card--clickable {
+  cursor: pointer;
+}
+
 /* Severity border colors */
 .alarm-card[data-severity="CRITICAL"] {
   border-left-color: var(--severity-critical);
@@ -52583,7 +52722,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 100002;
+  z-index: 10000010;
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -52854,7 +52993,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   inset: 0;
   background: rgba(0, 0, 0, 0.52);
   backdrop-filter: blur(4px);
-  z-index: 100004;
+  z-index: 10000010;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -53361,6 +53500,141 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   border-radius: 8px;
 }
 
+/* ---- Timeline tab: batch toolbar + per-row actions ---- */
+.adm-tl-header {
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 6px;
+  margin-bottom: 4px;
+}
+.adm-tl-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 0 5px;
+}
+.adm-tl-summary {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+}
+.adm-tl-batch-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  color: #374151;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.adm-tl-batch-toggle:hover {
+  border-color: #7c3aed;
+  color: #7c3aed;
+  background: rgba(124, 58, 237, 0.04);
+}
+.adm-tl-batch-toggle.is-active {
+  border-color: #7c3aed;
+  background: rgba(124, 58, 237, 0.08);
+  color: #7c3aed;
+}
+.adm-tl-batch-bar {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px 0 2px;
+  border-top: 1px dashed #e5e7eb;
+}
+.adm-tl-sel-all-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: #374151;
+  cursor: pointer;
+}
+.adm-tl-sel-count {
+  font-size: 11px;
+  color: #7c3aed;
+  font-weight: 600;
+  min-width: 86px;
+}
+.adm-tl-action-sel {
+  padding: 4px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 11px;
+  color: #374151;
+  background: #fff;
+  cursor: pointer;
+}
+.adm-tl-exec-btn {
+  padding: 4px 12px;
+  background: #7c3aed;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.adm-tl-exec-btn:disabled { background: #d1d5db; cursor: not-allowed; }
+.adm-tl-exec-btn:not(:disabled):hover { background: #6d28d9; }
+.adm-tl-cancel-btn {
+  padding: 4px 10px;
+  background: transparent;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.adm-tl-cancel-btn:hover { border-color: #9ca3af; color: #374151; }
+
+/* ---- Row action cell ---- */
+.adm-tl-action-cell { white-space: nowrap; padding: 3px 6px !important; vertical-align: middle; text-align: right; }
+.adm-tl-actions-th { text-align: right; min-width: 76px; }
+.adm-tl-cb-wrap {
+  display: none;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 2px;
+}
+.adm-tl-row-btns {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+}
+.adm-tl-row-btns--group { margin-left: auto; }
+.adm-tl-row-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  flex-shrink: 0;
+}
+.adm-tl-row-btn--ack      { background: rgba(22, 163, 74, 0.1);  color: #16a34a; }
+.adm-tl-row-btn--ack:hover { background: #16a34a; color: #fff; }
+.adm-tl-row-btn--snooze      { background: rgba(217, 119, 6, 0.1);  color: #d97706; }
+.adm-tl-row-btn--snooze:hover { background: #d97706; color: #fff; }
+.adm-tl-row-btn--escalate      { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
+.adm-tl-row-btn--escalate:hover { background: #dc2626; color: #fff; }
+
+/* ---- group-header flex adjustments ---- */
+.adm-timeline-group-header { gap: 6px; }
+.adm-tl-group-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* ---- Device list ---- */
 .adm-devices-list {
   border: 1px solid #e5e7eb;
@@ -54369,6 +54643,19 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   color: #a78bfa;
 }
 
+.adm-overlay[data-theme="dark"] .adm-tl-header { border-color: #334155; }
+.adm-overlay[data-theme="dark"] .adm-tl-toolbar {}
+.adm-overlay[data-theme="dark"] .adm-tl-summary { color: #94a3b8; }
+.adm-overlay[data-theme="dark"] .adm-tl-batch-toggle { border-color: #475569; background: #1e293b; color: #e2e8f0; }
+.adm-overlay[data-theme="dark"] .adm-tl-batch-toggle:hover,
+.adm-overlay[data-theme="dark"] .adm-tl-batch-toggle.is-active { border-color: #a78bfa; color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-tl-batch-bar { border-color: #334155; }
+.adm-overlay[data-theme="dark"] .adm-tl-sel-all-label { color: #e2e8f0; }
+.adm-overlay[data-theme="dark"] .adm-tl-sel-count { color: #a78bfa; }
+.adm-overlay[data-theme="dark"] .adm-tl-action-sel { background: #1e293b; border-color: #475569; color: #e2e8f0; }
+.adm-overlay[data-theme="dark"] .adm-tl-cancel-btn { border-color: #475569; color: #94a3b8; }
+.adm-overlay[data-theme="dark"] .adm-tl-cancel-btn:hover { color: #e2e8f0; }
+
 .adm-overlay[data-theme="dark"] .adm-devices-list {
   border-color: #2a2b3d;
 }
@@ -55145,32 +55432,10 @@ var OPERATOR_LABELS = {
   GTE: "\u2265",
   EQ: "="
 };
-var STATE_PRIORITY = {
-  OPEN: 0,
-  ESCALATED: 1,
-  SNOOZED: 2,
-  ACK: 3,
-  CLOSED: 4
-};
-var SEVERITY_PRIORITY = {
-  CRITICAL: 0,
-  HIGH: 1,
-  MEDIUM: 2,
-  LOW: 3,
-  INFO: 4
-};
-var STATE_LABELS = {
-  OPEN: "Aberto",
-  ACK: "Reconhecido",
-  ESCALATED: "Escalado",
-  SNOOZED: "Silenciado",
-  CLOSED: "Fechado"
-};
 var AlarmsTab = class {
   config;
   customerRules = [];
   activeAlarms = [];
-  alarmGroups = [];
   initialCheckedRuleIds = /* @__PURE__ */ new Set();
   constructor(config) {
     this.config = config;
@@ -55196,7 +55461,6 @@ var AlarmsTab = class {
       ]);
       this.activeAlarms = alarms;
       this.customerRules = rules;
-      this.alarmGroups = this.groupAlarms(alarms);
       for (const rule of this.customerRules) {
         if (rule.scope?.entityIds?.includes(this.config.gcdrDeviceId)) {
           this.initialCheckedRuleIds.add(rule.id);
@@ -55213,74 +55477,26 @@ var AlarmsTab = class {
   destroy() {
   }
   // ============================================================================
-  // Grouping
+  // Card mapping — separado (Disp. + Tipo) view: one card per individual alarm
   // ============================================================================
   /**
-   * Group raw alarms by metadata.ruleId (fallback: title).
-   * One card per group; occurrenceCount = total alarms in group.
+   * Map a raw GCDRAlarm → Alarm for createAlarmCardElement.
+   * Each alarm is its own card (no grouping by ruleId).
    */
-  groupAlarms(alarms) {
-    const map = /* @__PURE__ */ new Map();
-    for (const alarm of alarms) {
-      const key = alarm.metadata?.ruleId || alarm.title || alarm.id;
-      if (!map.has(key)) {
-        map.set(key, {
-          ruleId: key,
-          title: alarm.title || "",
-          alarmType: alarm.alarmType,
-          severity: alarm.severity || "LOW",
-          dominantState: alarm.state || "OPEN",
-          stateCounts: {},
-          totalCount: 0,
-          firstOccurrence: alarm.raisedAt || "",
-          lastOccurrence: alarm.lastUpdatedAt || alarm.raisedAt || "",
-          alarmIds: []
-        });
-      }
-      const g = map.get(key);
-      g.totalCount++;
-      g.alarmIds.push(alarm.id);
-      g.stateCounts[alarm.state] = (g.stateCounts[alarm.state] || 0) + 1;
-      if ((STATE_PRIORITY[alarm.state] ?? 99) < (STATE_PRIORITY[g.dominantState] ?? 99)) {
-        g.dominantState = alarm.state;
-      }
-      if ((SEVERITY_PRIORITY[alarm.severity] ?? 99) < (SEVERITY_PRIORITY[g.severity] ?? 99)) {
-        g.severity = alarm.severity;
-      }
-      if (alarm.raisedAt && (!g.firstOccurrence || alarm.raisedAt < g.firstOccurrence)) {
-        g.firstOccurrence = alarm.raisedAt;
-      }
-      const lastTs = alarm.lastUpdatedAt || alarm.raisedAt || "";
-      if (lastTs && lastTs > g.lastOccurrence) {
-        g.lastOccurrence = lastTs;
-      }
-    }
-    return [...map.values()].sort((a, b) => {
-      const sd = (STATE_PRIORITY[a.dominantState] ?? 99) - (STATE_PRIORITY[b.dominantState] ?? 99);
-      if (sd !== 0) return sd;
-      return (SEVERITY_PRIORITY[a.severity] ?? 99) - (SEVERITY_PRIORITY[b.severity] ?? 99);
-    });
-  }
-  /**
-   * Map an aggregated GCDRAlarmGroup → Alarm so createAlarmCardElement can be used.
-   * State-count chips go into _alarmTypes → rendered as type chips in the card body.
-   */
-  mapGroupToAlarm(group) {
-    const stateChips = Object.entries(group.stateCounts).sort((a, b) => (STATE_PRIORITY[a[0]] ?? 99) - (STATE_PRIORITY[b[0]] ?? 99)).map(([state6, count]) => `${STATE_LABELS[state6] || state6} \xD7 ${count}`);
+  mapAlarmToCard(alarm) {
     return {
-      id: group.ruleId,
+      id: alarm.id,
       customerId: this.config.gcdrCustomerId,
       customerName: "",
-      source: "",
-      severity: group.severity,
-      state: group.dominantState,
-      title: group.title,
-      description: "",
+      source: alarm.deviceName || "",
+      severity: alarm.severity || "LOW",
+      state: alarm.state || "OPEN",
+      title: alarm.title || "",
+      description: alarm.description || "",
       tags: {},
-      firstOccurrence: group.firstOccurrence,
-      lastOccurrence: group.lastOccurrence,
-      occurrenceCount: group.totalCount,
-      _alarmTypes: stateChips
+      firstOccurrence: alarm.raisedAt || "",
+      lastOccurrence: alarm.lastUpdatedAt || alarm.raisedAt || "",
+      occurrenceCount: 1
     };
   }
   // ============================================================================
@@ -55362,44 +55578,65 @@ var AlarmsTab = class {
     const alarmsBaseUrl = this.config.alarmsApiBaseUrl || ALARMS_DEFAULT_BASE_URL;
     const AlarmService2 = window.MyIOLibrary?.AlarmService;
     const userEmail = window.MyIOUtils?.currentUserEmail || "";
-    for (const group of this.alarmGroups) {
-      const alarm = this.mapGroupToAlarm(group);
+    for (const rawAlarm of this.activeAlarms) {
+      const alarm = this.mapAlarmToCard(rawAlarm);
+      const onAction = (action, alarmId) => {
+        const doAction = async () => {
+          if (action === "acknowledge") {
+            if (AlarmService2?.batchAcknowledge) {
+              await AlarmService2.batchAcknowledge([alarmId], userEmail);
+            } else {
+              await this.postAlarmAction(alarmsBaseUrl, alarmId, "acknowledge");
+            }
+          } else if (action === "snooze") {
+            if (AlarmService2?.batchSilence) {
+              await AlarmService2.batchSilence([alarmId], userEmail, "4h");
+            } else {
+              await this.postAlarmAction(alarmsBaseUrl, alarmId, "snooze");
+            }
+          } else if (action === "escalate") {
+            if (AlarmService2?.batchEscalate) {
+              await AlarmService2.batchEscalate([alarmId], userEmail);
+            } else {
+              await this.postAlarmAction(alarmsBaseUrl, alarmId, "escalate");
+            }
+          }
+          await this.refreshAlarmsGrid(alarmsBaseUrl);
+        };
+        doAction().catch(() => {
+        });
+      };
       const params = {
         showCustomerName: false,
         showDeviceBadge: false,
-        alarmTypes: alarm._alarmTypes,
+        hideOccurrenceCount: true,
+        // always 1 in separado — not meaningful
         onAcknowledge: async () => {
           if (AlarmService2?.batchAcknowledge) {
-            await AlarmService2.batchAcknowledge(group.alarmIds, userEmail);
+            await AlarmService2.batchAcknowledge([rawAlarm.id], userEmail);
           } else {
-            await Promise.all(
-              group.alarmIds.map((id) => this.postAlarmAction(alarmsBaseUrl, id, "acknowledge"))
-            );
+            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "acknowledge");
           }
           await this.refreshAlarmsGrid(alarmsBaseUrl);
         },
         onSnooze: async () => {
           if (AlarmService2?.batchSilence) {
-            await AlarmService2.batchSilence(group.alarmIds, userEmail, "4h");
+            await AlarmService2.batchSilence([rawAlarm.id], userEmail, "4h");
           } else {
-            await Promise.all(
-              group.alarmIds.map((id) => this.postAlarmAction(alarmsBaseUrl, id, "snooze"))
-            );
+            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "snooze");
           }
           await this.refreshAlarmsGrid(alarmsBaseUrl);
         },
         onEscalate: async () => {
           if (AlarmService2?.batchEscalate) {
-            await AlarmService2.batchEscalate(group.alarmIds, userEmail);
+            await AlarmService2.batchEscalate([rawAlarm.id], userEmail);
           } else {
-            await Promise.all(
-              group.alarmIds.map((id) => this.postAlarmAction(alarmsBaseUrl, id, "escalate"))
-            );
+            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "escalate");
           }
           await this.refreshAlarmsGrid(alarmsBaseUrl);
         },
         onDetails: () => {
-          openAlarmDetailsModal(alarm);
+          openAlarmDetailsModal(alarm, "light", "separado", onAction);
         }
       };
       const el = createAlarmCardElement(alarm, params);
@@ -55408,16 +55645,16 @@ var AlarmsTab = class {
   }
   async refreshAlarmsGrid(alarmsBaseUrl) {
     this.activeAlarms = await this.fetchActiveAlarms(alarmsBaseUrl);
-    this.alarmGroups = this.groupAlarms(this.activeAlarms);
     const aso = window.AlarmServiceOrchestrator;
     if (aso) {
       await aso.refresh().catch(() => {
       });
     }
+    const count = this.activeAlarms.length;
     const badge = this.config.container.querySelector("#at-alarms-count");
     if (badge) {
-      badge.textContent = String(this.alarmGroups.length);
-      badge.style.display = this.alarmGroups.length > 0 ? "" : "none";
+      badge.textContent = String(count);
+      badge.style.display = count > 0 ? "" : "none";
     }
     const sub = this.config.container.querySelector("#at-alarms-sub");
     if (sub) {
@@ -55425,7 +55662,7 @@ var AlarmsTab = class {
     }
     const grid = this.config.container.querySelector("#at-alarms-grid");
     const empty = this.config.container.querySelector("#at-alarms-empty");
-    if (this.alarmGroups.length === 0) {
+    if (count === 0) {
       if (grid) grid.style.display = "none";
       if (empty) empty.style.display = "";
     } else {
@@ -55439,9 +55676,8 @@ var AlarmsTab = class {
   // ============================================================================
   buildSectionSubtitle() {
     const total = this.activeAlarms.length;
-    const groups = this.alarmGroups.length;
     if (total === 0) return "Nenhum alarme ativo para este dispositivo";
-    return `${total} ocorr\xEAncia${total !== 1 ? "s" : ""} em ${groups} tipo${groups !== 1 ? "s" : ""}`;
+    return `${total} alarme${total !== 1 ? "s" : ""} ativo${total !== 1 ? "s" : ""} para este dispositivo`;
   }
   renderTab() {
     return `
@@ -55452,7 +55688,7 @@ var AlarmsTab = class {
     `;
   }
   renderSection1() {
-    const groups = this.alarmGroups.length;
+    const count = this.activeAlarms.length;
     return `
       <div class="at-section">
         <div class="at-section-header">
@@ -55462,16 +55698,16 @@ var AlarmsTab = class {
             <div class="at-section-sub" id="at-alarms-sub">${this.buildSectionSubtitle()}</div>
           </div>
           <span class="at-count-badge" id="at-alarms-count"
-                style="${groups === 0 ? "display:none;" : ""}">${groups}</span>
+                style="${count === 0 ? "display:none;" : ""}">${count}</span>
         </div>
         <!-- .myio-alarms-panel wrapper so panel CSS variables / alarm-card styles apply -->
         <div class="myio-alarms-panel at-alarms-panel-host">
           <div class="at-empty" id="at-alarms-empty"
-               style="${groups > 0 ? "display:none;" : ""}">
+               style="${count > 0 ? "display:none;" : ""}">
             Nenhum alarme ativo para este dispositivo.
           </div>
           <div class="alarms-grid" id="at-alarms-grid"
-               style="${groups === 0 ? "display:none;" : ""}"></div>
+               style="${count === 0 ? "display:none;" : ""}"></div>
         </div>
       </div>
     `;
@@ -105681,7 +105917,7 @@ var AlarmsNotificationsPanelView = class {
   //   'consolidado'    – Por Tipo de Alarme  (one row per alarm type, all devices merged)
   //   'separado'       – Por Dispositivo - Tipo  (one row per device × alarm type pair)
   //   'porDispositivo' – Por Dispositivo  (one row per device, all alarm types merged)
-  groupMode = "consolidado";
+  groupMode = "separado";
   // Table sort state
   sortCol = "";
   sortDir = "asc";
@@ -106039,7 +106275,8 @@ var AlarmsNotificationsPanelView = class {
       grid.className = "alarms-grid";
       cards.forEach((alarm) => {
         const card = createAlarmCardElement(alarm, {
-          onCardClick: (a) => this.handleAlarmClick(a),
+          // Card click: in grouped modes opens modal directly; in separado fires generic click
+          onCardClick: isSeparado ? (a) => this.handleAlarmClick(a) : (a) => this.handleDetails(a.id),
           onAcknowledge: (id) => this.openAlarmActionModal("acknowledge", id),
           onDetails: (id) => this.handleDetails(id),
           onMore: (id, e) => this.handleMore(id, e),
@@ -106048,7 +106285,15 @@ var AlarmsNotificationsPanelView = class {
           selected: this.selectedTitles.has(alarm.title),
           showDeviceBadge: isSeparado,
           // separado: show device badge in header
-          alarmTypes: isPorDispositivo ? alarm._alarmTypes ?? [] : void 0
+          alarmTypes: isPorDispositivo ? alarm._alarmTypes ?? [] : void 0,
+          hideActions: !isSeparado,
+          // ACK/Snooze/Escalate only in separado (unit alarm)
+          hideSelect: !isSeparado,
+          // bulk-select only meaningful in separado
+          hideDetails: !isSeparado,
+          // card click opens modal in grouped modes
+          hideOccurrenceCount: isSeparado
+          // Qte. always 1 in separado — not useful
         });
         grid.appendChild(card);
       });
@@ -106839,7 +107084,12 @@ var AlarmsNotificationsPanelView = class {
     this.log("Details", alarmId);
     const alarm = this.groupedAlarms.find((a) => a.id === alarmId) ?? this.controller.getAlarms().find((a) => a.id === this.stripSeparadoId(alarmId));
     if (alarm) {
-      openAlarmDetailsModal(alarm, this.controller.getState().themeMode, this.groupMode);
+      openAlarmDetailsModal(
+        alarm,
+        this.controller.getState().themeMode,
+        this.groupMode,
+        (action, id) => this.openAlarmActionModal(action, id)
+      );
       this.emit("alarm-click", alarm);
     }
   }