myio-js-library 0.1.499 → 0.1.501

package/dist/index.cjs

@@ -1162,7 +1162,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.499",
+  version: "0.1.501",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -15633,6 +15633,57 @@ function renderCardComponentV5({
     `;
     document.head.appendChild(layoutStyle);
   }
+  if (!document.getElementById("myio-card-alert-styles")) {
+    const alertStyle = document.createElement("style");
+    alertStyle.id = "myio-card-alert-styles";
+    alertStyle.textContent = `
+      .myio-alert-overlay {
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000;
+        display: flex; align-items: center; justify-content: center;
+        background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        animation: myio-fadeIn 0.2s ease-out;
+      }
+      @keyframes myio-fadeIn { from { opacity: 0; } to { opacity: 1; } }
+      .myio-alert-box {
+        position: relative; max-width: 480px; width: 90%; padding: 32px;
+        background: #ffffff; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px;
+        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        animation: myio-slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
+      }
+      @keyframes myio-slideUp {
+        from { opacity: 0; transform: translateY(40px) scale(0.95); }
+        to   { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      .myio-alert-icon {
+        width: 64px; height: 64px; margin: 0 auto 20px;
+        display: flex; align-items: center; justify-content: center;
+        background: linear-gradient(135deg, #3E1A7D 0%, #2D1359 100%);
+        border: 2px solid #3E1A7D; border-radius: 50%; color: #ffffff; font-size: 32px;
+      }
+      .myio-alert-title {
+        margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #000000;
+        text-align: center; letter-spacing: -0.02em;
+      }
+      .myio-alert-message {
+        margin: 0 0 28px; font-size: 16px; font-weight: 500; color: #000000;
+        text-align: center; line-height: 1.6;
+      }
+      .myio-alert-button {
+        width: 100%; height: 48px; font-size: 15px; font-weight: 700;
+        text-transform: uppercase;
+        background: linear-gradient(135deg, #3E1A7D 0%, #2D1359 100%);
+        border: none; border-radius: 12px; color: #ffffff; cursor: pointer;
+        box-shadow: 0 4px 16px rgba(62,26,125,0.4);
+        transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
+      }
+      .myio-alert-button:hover {
+        background: linear-gradient(135deg, #4E2A9D 0%, #3E1A7D 100%);
+        box-shadow: 0 6px 24px rgba(62,26,125,0.5); transform: translateY(-2px);
+      }
+    `;
+    document.head.appendChild(alertStyle);
+  }
   const actionsContainer = document.createElement("div");
   actionsContainer.className = "card-actions";
   if (typeof handleActionDashboard === "function") {
@@ -15681,6 +15732,44 @@ function renderCardComponentV5({
   if (enhancedCardElement && actionsContainer.children.length > 0) {
     enhancedCardElement.insertBefore(actionsContainer, enhancedCardElement.firstChild);
   }
+  let _cardAlertOverlay = null;
+  function hideCardAlert() {
+    if (_cardAlertOverlay && _cardAlertOverlay.parentNode) {
+      _cardAlertOverlay.remove();
+      _cardAlertOverlay = null;
+    }
+  }
+  function showCardLimitAlert() {
+    if (_cardAlertOverlay) hideCardAlert();
+    const maxAllowed = MyIOSelectionStore?.MAX_SELECTION ?? 20;
+    const overlay = document.createElement("div");
+    overlay.className = "myio-alert-overlay";
+    overlay.innerHTML = `
+      <div class="myio-alert-box">
+        <div class="myio-alert-icon">\u26A0</div>
+        <h2 class="myio-alert-title">Limite Atingido</h2>
+        <p class="myio-alert-message">
+          Voc\xEA pode selecionar no m\xE1ximo <strong>${maxAllowed} dispositivos</strong> para compara\xE7\xE3o.
+          Remova um dispositivo antes de adicionar outro.
+        </p>
+        <button class="myio-alert-button">FECHAR</button>
+      </div>`;
+    document.body.appendChild(overlay);
+    _cardAlertOverlay = overlay;
+    const closeBtn = overlay.querySelector(".myio-alert-button");
+    const close = () => {
+      document.removeEventListener("keydown", handleEscape);
+      hideCardAlert();
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") close();
+    };
+    closeBtn.addEventListener("click", close);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    document.addEventListener("keydown", handleEscape);
+  }
   if (enableSelection && MyIOSelectionStore) {
     const checkbox = enhancedCardElement.querySelector(".card-checkbox");
     if (checkbox) {
@@ -15691,10 +15780,10 @@ function renderCardComponentV5({
           const selectedEntities = MyIOSelectionStore.getSelectedEntities();
           console.log("selectedEntities", selectedEntities);
           const isTryingToAdd = e.target.checked;
-          if (isTryingToAdd && currentCount >= 6) {
+          if (isTryingToAdd && currentCount >= (MyIOSelectionStore.MAX_SELECTION ?? 20)) {
             e.preventDefault();
             e.target.checked = false;
-            MyIOToast2.show("N\xE3o \xE9 poss\xEDvel selecionar mais de 6 itens.", "warning");
+            showCardLimitAlert();
             return;
           }
           MyIOSelectionStore.add(entityId);
@@ -17936,6 +18025,95 @@ function renderCardComponentV6({
   if (enhancedCardElement && actionsContainer.children.length > 0) {
     enhancedCardElement.insertBefore(actionsContainer, enhancedCardElement.firstChild);
   }
+  let _cardAlertOverlay = null;
+  function hideCardAlert() {
+    if (_cardAlertOverlay && _cardAlertOverlay.parentNode) {
+      _cardAlertOverlay.remove();
+      _cardAlertOverlay = null;
+    }
+  }
+  function showCardLimitAlert() {
+    if (_cardAlertOverlay) hideCardAlert();
+    if (!document.getElementById("myio-card-alert-styles")) {
+      const alertStyle = document.createElement("style");
+      alertStyle.id = "myio-card-alert-styles";
+      alertStyle.textContent = `
+        .myio-alert-overlay {
+          position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000;
+          display: flex; align-items: center; justify-content: center;
+          background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+          -webkit-backdrop-filter: blur(4px);
+          animation: myio-fadeIn 0.2s ease-out;
+        }
+        @keyframes myio-fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        .myio-alert-box {
+          position: relative; max-width: 480px; width: 90%; padding: 32px;
+          background: #ffffff; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px;
+          box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+          animation: myio-slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
+        }
+        @keyframes myio-slideUp {
+          from { opacity: 0; transform: translateY(40px) scale(0.95); }
+          to   { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        .myio-alert-icon {
+          width: 64px; height: 64px; margin: 0 auto 20px;
+          display: flex; align-items: center; justify-content: center;
+          background: linear-gradient(135deg, #3E1A7D 0%, #2D1359 100%);
+          border: 2px solid #3E1A7D; border-radius: 50%; color: #ffffff; font-size: 32px;
+        }
+        .myio-alert-title {
+          margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #000000;
+          text-align: center; letter-spacing: -0.02em;
+        }
+        .myio-alert-message {
+          margin: 0 0 28px; font-size: 16px; font-weight: 500; color: #000000;
+          text-align: center; line-height: 1.6;
+        }
+        .myio-alert-button {
+          width: 100%; height: 48px; font-size: 15px; font-weight: 700;
+          text-transform: uppercase;
+          background: linear-gradient(135deg, #3E1A7D 0%, #2D1359 100%);
+          border: none; border-radius: 12px; color: #ffffff; cursor: pointer;
+          box-shadow: 0 4px 16px rgba(62,26,125,0.4);
+          transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
+        }
+        .myio-alert-button:hover {
+          background: linear-gradient(135deg, #4E2A9D 0%, #3E1A7D 100%);
+          box-shadow: 0 6px 24px rgba(62,26,125,0.5); transform: translateY(-2px);
+        }
+      `;
+      document.head.appendChild(alertStyle);
+    }
+    const maxAllowed = MyIOSelectionStore?.MAX_SELECTION ?? 20;
+    const overlay = document.createElement("div");
+    overlay.className = "myio-alert-overlay";
+    overlay.innerHTML = `
+      <div class="myio-alert-box">
+        <div class="myio-alert-icon">\u26A0</div>
+        <h2 class="myio-alert-title">Limite Atingido</h2>
+        <p class="myio-alert-message">
+          Voc\xEA pode selecionar no m\xE1ximo <strong>${maxAllowed} dispositivos</strong> para compara\xE7\xE3o.
+          Remova um dispositivo antes de adicionar outro.
+        </p>
+        <button class="myio-alert-button">FECHAR</button>
+      </div>`;
+    document.body.appendChild(overlay);
+    _cardAlertOverlay = overlay;
+    const closeBtn = overlay.querySelector(".myio-alert-button");
+    const close = () => {
+      document.removeEventListener("keydown", handleEscape);
+      hideCardAlert();
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") close();
+    };
+    closeBtn.addEventListener("click", close);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    document.addEventListener("keydown", handleEscape);
+  }
   if (enableSelection && MyIOSelectionStore) {
     const checkbox = enhancedCardElement.querySelector(".card-checkbox");
     if (checkbox) {
@@ -17943,10 +18121,10 @@ function renderCardComponentV6({
         e.stopPropagation();
         if (e.target.checked) {
           const currentCount = MyIOSelectionStore.getSelectedEntities().length;
-          if (currentCount >= 6) {
+          if (currentCount >= (MyIOSelectionStore.MAX_SELECTION ?? 20)) {
             e.preventDefault();
             e.target.checked = false;
-            MyIOToast2.show("N\xE3o \xE9 poss\xEDvel selecionar mais de 6 itens.", "warning");
+            showCardLimitAlert();
             return;
           }
           MyIOSelectionStore.add(entityId);
@@ -43692,7 +43870,7 @@ function bindEvents3(container, modalId, state6, onClose) {
 }
 
 // src/components/footer/ComparisonHandler.ts
-var DEFAULT_CHARTS_BASE_URL = "https://graphs.staging.apps.myio-bas.com";
+var DEFAULT_CHARTS_BASE_URL = "https://graphs.apps.myio-bas.com";
 function createLogger(debug) {
   const prefix = "[ComparisonHandler]";
   return {
@@ -52816,6 +52994,8 @@ function createAlarmCardElement(alarm, params) {
   const scrollRight = card.querySelector(".alarm-type-scroll-btn--right");
   if (typeList && scrollLeft && scrollRight) {
     const updateArrows = () => {
+      const hasOverflow = typeList.scrollWidth - typeList.clientWidth > 1;
+      typeList.classList.toggle("is-overflowing", hasOverflow);
       const canLeft = typeList.scrollLeft > 0;
       const canRight = typeList.scrollLeft < typeList.scrollWidth - typeList.clientWidth - 1;
       scrollLeft.style.opacity = canLeft ? "1" : "0";
@@ -53207,6 +53387,7 @@ function resolveDeviceTbId(alarm) {
   }
   return null;
 }
+var HIDE_ANNOTATIONS_TAB = true;
 function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction) {
   const sev = SEVERITY_CONFIG[alarm.severity];
   const st = STATE_CONFIG[alarm.state];
@@ -53291,10 +53472,10 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
           <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 20 9 12 14 16 19 6"/><polyline points="19 6 19 10"/><polyline points="19 6 15 6"/></svg>
           Gr\xE1fico
         </button>
-        <button class="adm-tab" data-panel="anotacoes">
+        ${HIDE_ANNOTATIONS_TAB ? "" : `<button class="adm-tab" data-panel="anotacoes">
           <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 3v4a1 1 0 001 1h4"/><path d="M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
           Anota\xE7\xF5es${annotCount > 0 ? ` <span class="adm-tab-badge">${annotCount}</span>` : ""}
-        </button>
+        </button>`}
       </nav>
 
       <!-- \u2500\u2500 Body \u2500\u2500 -->
@@ -53332,7 +53513,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
             ${row("Shopping", alarm.customerName)}
             ${row("Dispositivo(s)", alarm.source)}
             ${alarm.triggerValue != null ? row("Valor do disparo", String(alarm.triggerValue)) : ""}
-            ${row("ID", alarm.id)}
+            ${groupMode === "separado" ? row("ID", alarm.id) : ""}
           </div>
 
           <div class="adm-section">
@@ -53358,6 +53539,16 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
             </div>
           </div>
 
+          ${groupMode !== "separado" && alarm._groupAlarmIds && alarm._groupAlarmIds.length > 0 ? `
+          <div class="adm-section">
+            <div class="adm-section-title">IDs de Alarme (${alarm._groupAlarmIds.length})</div>
+            <div class="adm-alarm-ids-list" style="display:flex;flex-wrap:wrap;gap:6px;">
+              ${alarm._groupAlarmIds.map(
+    (rawId) => `<span class="adm-alarm-id-chip" title="Clique para copiar" data-copy-id="${escHtml(rawId)}" style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid rgba(124,58,237,0.25);background:rgba(124,58,237,0.08);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#4c1d95;cursor:pointer;user-select:all;">${escHtml(rawId)}</span>`
+  ).join("")}
+            </div>
+          </div>` : ""}
+
           <!-- Occurrence \xD7 Device matrix \u2014 disabled -->
           <!-- <div class="adm-section" style="display:none">
             <div class="adm-section-title">Mapa ocorr\xEAncias \xD7 dispositivos</div>
@@ -53471,9 +53662,9 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
         </div>
 
         <!-- ANOTA\xC7\xD5ES -->
-        <div class="adm-panel" data-panel="anotacoes">
+        ${HIDE_ANNOTATIONS_TAB ? "" : `<div class="adm-panel" data-panel="anotacoes">
           ${buildAnnotationsPanelHtml(alarm.id)}
-        </div>
+        </div>`}
 
       </div><!-- /adm-body -->
     </div><!-- /adm-drawer -->
@@ -53489,6 +53680,21 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
       overlay.querySelector(`.adm-panel[data-panel="${panel}"]`)?.classList.add("is-active");
     });
   });
+  overlay.querySelectorAll(".adm-alarm-id-chip[data-copy-id]").forEach((chip) => {
+    chip.addEventListener("click", async () => {
+      const id = chip.getAttribute("data-copy-id") || "";
+      if (!id) return;
+      try {
+        await navigator.clipboard?.writeText(id);
+        const prev = chip.textContent;
+        chip.textContent = "\u2713 copiado";
+        setTimeout(() => {
+          chip.textContent = prev;
+        }, 900);
+      } catch {
+      }
+    });
+  });
   const chartInstances = [];
   const graficoPanel = overlay.querySelector('.adm-panel[data-panel="grafico"]');
   if (graficoPanel) {
@@ -54884,6 +55090,11 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
+  /* Always dock to the right, even when the header has no checkbox/device-badge
+   * siblings (consolidado / porDispositivo modes). With justify-content:
+   * space-between on the parent and a single child, the child would otherwise
+   * collapse to flex-start. margin-left: auto makes it flex-end regardless. */
+  margin-left: auto;
 }
 
 .alarm-severity-badge {
@@ -55163,6 +55374,11 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .alarm-card-type-list {
   display: flex !important;
   flex-wrap: nowrap;
+  /* Default: center chips when they all fit (common case of 1\u20133 chips).
+   * When content overflows, JS toggles .is-overflowing so we switch to
+   * flex-start \u2014 otherwise browsers anchor at center and the left edge
+   * becomes unreachable via scroll. */
+  justify-content: center;
   gap: 3px;
   overflow-x: auto;
   scrollbar-width: none;
@@ -55170,6 +55386,10 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   min-width: 0;
 }
 
+.alarm-card-type-list.is-overflowing {
+  justify-content: flex-start;
+}
+
 .alarm-card-type-list::-webkit-scrollbar {
   display: none;
 }
@@ -58256,12 +58476,18 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .atbl-cell--num { text-align: center; font-weight: 700; }
 .atbl-cell--date { font-size: 10px; white-space: nowrap; color: var(--alarms-text-muted); }
 
+/* First (primary) column in consolidado (Por Tipo) and porDispositivo modes.
+ * Matches .atbl-cell--device-primary so the typography is consistent across
+ * all three groupModes \u2014 only the semantic label differs. */
 .atbl-cell--title {
-  max-width: 160px;
+  min-width: 160px;
+  max-width: 220px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--alarms-text-primary);
 }
 
 .atbl-cell--device {
@@ -117614,6 +117840,9 @@ var AlarmsNotificationsPanelController = class {
   }
 };
 
+// src/components/AlarmsNotificationsPanel/AlarmsNotificationsPanelView.ts
+var import_jspdf2 = require("jspdf");
+
 // src/components/AlarmsNotificationsPanel/AlarmDashboard.ts
 function renderKPICards(stats) {
   return `
@@ -118897,6 +119126,65 @@ var AlarmsNotificationsPanelView = class {
       close();
     });
   }
+  // =====================================================================
+  // Export helpers
+  // =====================================================================
+  /** Returns the single customer name shared by the filtered alarms, or null
+   *  when the selection spans multiple shoppings. */
+  _exportCustomerName() {
+    const alarms = this.groupMode === "separado" ? this.controller.getState().filteredAlarms : this.groupedAlarms;
+    const names = new Set(alarms.map((a) => a.customerName).filter(Boolean));
+    if (names.size === 1) return [...names][0];
+    return null;
+  }
+  /** Returns "DD/MM/AAAA — DD/MM/AAAA" from the active filters, or null. */
+  _exportPeriodLabel() {
+    const f = this.controller.getFilters();
+    const fromISO = f.fromDate;
+    const toISO = f.toDate;
+    if (!fromISO && !toISO) return null;
+    const fmt2 = (iso) => {
+      if (!iso) return "";
+      const d = new Date(iso);
+      return isNaN(d.getTime()) ? "" : d.toLocaleDateString("pt-BR");
+    };
+    if (fromISO && toISO) return `${fmt2(fromISO)} \u2014 ${fmt2(toISO)}`;
+    return fmt2(fromISO || toISO || "");
+  }
+  _exportDatestamp() {
+    const d = /* @__PURE__ */ new Date();
+    const p = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}`;
+  }
+  _exportSlugify(s) {
+    return s.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^\w]+/g, "-").toLowerCase().replace(/^-+|-+$/g, "").slice(0, 40);
+  }
+  /** Builds `alarmes-[customer-]YYYYMMDD-HHmm` for export filenames. */
+  _exportFilenameBase() {
+    const customer = this._exportCustomerName();
+    const parts = ["alarmes"];
+    if (customer) {
+      const slug = this._exportSlugify(customer);
+      if (slug) parts.push(slug);
+    }
+    parts.push(this._exportDatestamp());
+    return parts.join("-");
+  }
+  /**
+   * Rows for tabular exports (CSV / XLS / PDF). Schema tuned per groupMode:
+   *
+   * - separado (Disp. + Tipo): one row per (device × alarm type). Drops the
+   *   legacy "Fechado em" / "Motivo" columns that only made sense for the
+   *   closed-history path and cluttered normal exports.
+   *
+   * - consolidado (Por Tipo): one row per alarm type. The "Fonte" column is
+   *   renamed to "Dispositivos afetados" — that's semantically what
+   *   alarm.source carries here (comma-separated list of devices).
+   *
+   * - porDispositivo (Por Disp.): one row per device. Adds a "Tipos de Alarme"
+   *   column with the same list rendered as chips on the cards; drops the
+   *   redundant "Fonte" column (device already identifies the row).
+   */
   getCsvRows() {
     const fmtDt3 = (iso) => {
       if (!iso) return "";
@@ -118906,28 +119194,66 @@ var AlarmsNotificationsPanelView = class {
     if (this.groupMode === "separado") {
       const rawAlarms = this.controller.getState().filteredAlarms;
       const hasCustomer2 = rawAlarms.some((a) => !!a.customerName);
-      const header2 = ["Tipo", "Severidade", "Estado", ...hasCustomer2 ? ["Cliente"] : [], "Dispositivo", "1a Ocorr\xEAncia", "\xDAltimo Evento", "Fechado em", "Motivo"];
+      const header2 = [
+        "Dispositivo",
+        "Tipo",
+        "Severidade",
+        "Estado",
+        ...hasCustomer2 ? ["Cliente"] : [],
+        "1a Ocorr\xEAncia",
+        "\xDAltima Ocorr\xEAncia"
+      ];
       const rows = [header2];
       for (const alarm of rawAlarms) {
         const devices = alarm.source ? alarm.source.split(",").map((s) => s.trim()).filter(Boolean) : [""];
         for (const device of devices) {
           rows.push([
+            device,
             alarm.title || "",
             alarm.severity,
             alarm.state,
             ...hasCustomer2 ? [alarm.customerName || ""] : [],
-            device,
             fmtDt3(alarm.firstOccurrence),
-            fmtDt3(alarm.lastOccurrence),
-            fmtDt3(alarm.closedAt),
-            alarm.closedReason || ""
+            fmtDt3(alarm.lastOccurrence)
           ]);
         }
       }
       return rows;
     }
     const hasCustomer = this.groupedAlarms.some((a) => !!a.customerName);
-    const header = ["Tipo", "Severidade", "Estado", ...hasCustomer ? ["Cliente"] : [], "Fonte", "Qte.", "1a Ocorr\xEAncia", "\xDAlt. Ocorr\xEAncia"];
+    if (this.groupMode === "porDispositivo") {
+      const header2 = [
+        "Dispositivo",
+        "Tipos de Alarme",
+        "Severidade",
+        "Estado",
+        ...hasCustomer ? ["Cliente"] : [],
+        "Qte.",
+        "1a Ocorr\xEAncia",
+        "\xDAltima Ocorr\xEAncia"
+      ];
+      const dataRows2 = this.groupedAlarms.map((a) => [
+        a.title || a.source || "",
+        (a._alarmTypes || []).join(", "),
+        a.severity,
+        a.state,
+        ...hasCustomer ? [a.customerName || ""] : [],
+        String(a.occurrenceCount || 1),
+        fmtDt3(a.firstOccurrence),
+        fmtDt3(a.lastOccurrence)
+      ]);
+      return [header2, ...dataRows2];
+    }
+    const header = [
+      "Tipo",
+      "Severidade",
+      "Estado",
+      ...hasCustomer ? ["Cliente"] : [],
+      "Dispositivos afetados",
+      "Qte.",
+      "1a Ocorr\xEAncia",
+      "\xDAltima Ocorr\xEAncia"
+    ];
     const dataRows = this.groupedAlarms.map((a) => [
       a.title || "",
       a.severity,
@@ -118943,36 +119269,153 @@ var AlarmsNotificationsPanelView = class {
   exportToCsv() {
     const rows = this.getCsvRows();
     const BOM = "\uFEFF";
-    const csv = BOM + rows.map((r) => r.map((c) => `"${c.replace(/"/g, '""')}"`).join(",")).join("\r\n");
-    this.triggerDownload(csv, "alarmes.csv", "text/csv;charset=utf-8;");
+    const customer = this._exportCustomerName();
+    const period = this._exportPeriodLabel();
+    const meta = ['"Relat\xF3rio de Alarmes"'];
+    if (customer) meta.push(`"Cliente";"${customer.replace(/"/g, '""')}"`);
+    if (period) meta.push(`"Per\xEDodo";"${period}"`);
+    meta.push(`"Gerado em";"${(/* @__PURE__ */ new Date()).toLocaleString("pt-BR")}"`);
+    meta.push("");
+    const body = rows.map((r) => r.map((c) => `"${c.replace(/"/g, '""')}"`).join(",")).join("\r\n");
+    this.triggerDownload(
+      BOM + meta.join("\r\n") + "\r\n" + body,
+      `${this._exportFilenameBase()}.csv`,
+      "text/csv;charset=utf-8;"
+    );
   }
   exportToExcel() {
     const rows = this.getCsvRows();
+    const customer = this._exportCustomerName();
+    const period = this._exportPeriodLabel();
+    const span = Math.max(1, rows[0]?.length || 1);
+    const metaRow = (k, v) => `<tr><td style="background:#F0EDF9;font-weight:700;border:1px solid #ccc;padding:4px 8px;font-size:11px;">${k}</td><td colspan="${span - 1}" style="border:1px solid #ccc;padding:4px 8px;font-size:11px;">${v}</td></tr>`;
+    const metaBlock = metaRow("Relat\xF3rio", "Alarmes") + (customer ? metaRow("Cliente", customer) : "") + (period ? metaRow("Per\xEDodo", period) : "") + metaRow("Gerado em", (/* @__PURE__ */ new Date()).toLocaleString("pt-BR")) + `<tr><td colspan="${span}" style="border:0;padding:2px;"></td></tr>`;
     const htmlTable = `<html xmlns:x="urn:schemas-microsoft-com:office:excel">
-<head><meta charset="UTF-8"><style>td,th{border:1px solid #ccc;padding:4px 8px;font-size:11px;}th{background:#7c3aed;color:#fff;}</style></head>
-<body><table>${rows.map((r, i) => `<tr>${r.map((c) => i === 0 ? `<th>${c}</th>` : `<td>${c}</td>`).join("")}</tr>`).join("")}</table></body>
+<head><meta charset="UTF-8"><style>td,th{border:1px solid #ccc;padding:4px 8px;font-size:11px;}th{background:#3E1A7D;color:#fff;}</style></head>
+<body><table>${metaBlock}${rows.map((r, i) => `<tr>${r.map((c) => i === 0 ? `<th>${c}</th>` : `<td>${c}</td>`).join("")}</tr>`).join("")}</table></body>
 </html>`;
-    this.triggerDownload(htmlTable, "alarmes.xls", "application/vnd.ms-excel;charset=utf-8;");
+    this.triggerDownload(
+      htmlTable,
+      `${this._exportFilenameBase()}.xls`,
+      "application/vnd.ms-excel;charset=utf-8;"
+    );
   }
+  /**
+   * Premium PDF export (landscape A4) — mirrors the design used by
+   * `src/components/telemetry-grid-shopping/export.ts`: purple top band
+   * with title, right-side metadata line (Período · Gerado em · # alarmes ·
+   * Pág.), purple column-header row, alternating row shading, purple
+   * footer band. Saves directly via `doc.save()` — no window.open detour.
+   */
   exportToPdf() {
     const rows = this.getCsvRows();
-    const tableHtml = `<table style="width:100%;border-collapse:collapse;font-size:11px;">
-      ${rows.map((r, i) => `<tr>${r.map(
-      (c) => i === 0 ? `<th style="background:#7c3aed;color:#fff;padding:5px 8px;border:1px solid #555;">${c}</th>` : `<td style="padding:4px 8px;border:1px solid #ddd;">${c}</td>`
-    ).join("")}</tr>`).join("")}
-    </table>`;
-    const win = window.open("", "_blank");
-    if (!win) return;
-    win.document.write(`<!DOCTYPE html><html><head><title>Alarmes</title>
-      <style>body{font-family:sans-serif;padding:16px;}h2{font-size:14px;margin-bottom:8px;}@media print{button{display:none}}</style>
-    </head><body>
-      <h2>Relat\xF3rio de Alarmes</h2>
-      ${tableHtml}
-      <br><button onclick="window.print()">Imprimir / Salvar PDF</button>
-    </body></html>`);
-    win.document.close();
-    win.focus();
-    setTimeout(() => win.print(), 400);
+    if (rows.length < 1) return;
+    const headerRow = rows[0];
+    const dataRows = rows.slice(1);
+    const customer = this._exportCustomerName();
+    const period = this._exportPeriodLabel();
+    const generatedAt = (/* @__PURE__ */ new Date()).toLocaleString("pt-BR");
+    const title = customer ? `${customer} \u2014 Relat\xF3rio de Alarmes` : "Relat\xF3rio de Alarmes";
+    const doc = new import_jspdf2.jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
+    const PW = doc.internal.pageSize.getWidth();
+    const PH = doc.internal.pageSize.getHeight();
+    const MARGIN = 10;
+    const HDR_H = 13;
+    const FTR_H = 10;
+    const ROW_H = 7;
+    const HEAD_H = 8;
+    const TABLE_Y = HDR_H + MARGIN;
+    const MAX_Y = PH - FTR_H - MARGIN;
+    const TABLE_W = PW - MARGIN * 2;
+    const colWeights = headerRow.map((label) => {
+      const l = label.toLowerCase();
+      if (l.includes("tipos") || l.includes("afetados")) return 4;
+      if (l.includes("dispositivo") || l === "tipo" || l === "cliente") return 3;
+      if (l.includes("ocorr\xEAncia") || l === "estado" || l === "severidade") return 2;
+      return 1.2;
+    });
+    const weightSum = colWeights.reduce((s, w) => s + w, 0);
+    const colWidths = colWeights.map((w) => w / weightSum * TABLE_W);
+    const colX = (ci) => MARGIN + colWidths.slice(0, ci).reduce((s, w) => s + w, 0);
+    const truncate2 = (s, max) => s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
+    const drawHeader2 = (pageNo2) => {
+      doc.setFillColor(62, 26, 125);
+      doc.rect(0, 0, PW, HDR_H, "F");
+      doc.setTextColor(255, 255, 255);
+      doc.setFont("helvetica", "bold");
+      doc.setFontSize(10);
+      doc.text(title, MARGIN, HDR_H / 2 + 1.5);
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(8);
+      const parts = [];
+      if (period) parts.push(`Per\xEDodo: ${period}`);
+      parts.push(`Gerado em: ${generatedAt}`);
+      parts.push(`${dataRows.length} alarme${dataRows.length !== 1 ? "s" : ""}`);
+      parts.push(`P\xE1g. ${pageNo2}`);
+      doc.text(parts.join("  \u2022  "), PW - MARGIN, HDR_H / 2 + 1.5, { align: "right" });
+    };
+    const drawColumnHeaders = (y) => {
+      doc.setFillColor(240, 237, 250);
+      doc.rect(MARGIN, y, TABLE_W, HEAD_H, "F");
+      doc.setTextColor(62, 26, 125);
+      doc.setFont("helvetica", "bold");
+      doc.setFontSize(7);
+      headerRow.forEach((label, ci) => {
+        const x = colX(ci) + 1.5;
+        doc.text(label, x, y + HEAD_H / 2 + 2.5);
+      });
+      doc.setDrawColor(200, 195, 220);
+      doc.setLineWidth(0.2);
+      doc.rect(MARGIN, y, TABLE_W, HEAD_H);
+    };
+    const drawDataRow = (cells, y, even) => {
+      if (even) {
+        doc.setFillColor(250, 249, 255);
+        doc.rect(MARGIN, y, TABLE_W, ROW_H, "F");
+      }
+      doc.setTextColor(40, 40, 40);
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(6.5);
+      cells.forEach((cell, ci) => {
+        const x = colX(ci) + 1.5;
+        const maxChars = Math.floor(colWidths[ci] / 1.8);
+        doc.text(truncate2(String(cell ?? ""), maxChars), x, y + ROW_H / 2 + 2.2);
+      });
+      doc.setDrawColor(230, 228, 240);
+      doc.setLineWidth(0.1);
+      doc.line(MARGIN, y + ROW_H, MARGIN + TABLE_W, y + ROW_H);
+    };
+    const drawFooter2 = () => {
+      doc.setFillColor(250, 249, 255);
+      doc.rect(0, PH - FTR_H, PW, FTR_H, "F");
+      doc.setDrawColor(210, 205, 230);
+      doc.setLineWidth(0.2);
+      doc.line(MARGIN, PH - FTR_H + 0.5, PW - MARGIN, PH - FTR_H + 0.5);
+      doc.setTextColor(120, 110, 150);
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(7);
+      doc.text(`Gerado em ${generatedAt}  \u2014  MyIO`, MARGIN, PH - FTR_H + 6);
+    };
+    let pageNo = 1;
+    let currentY = TABLE_Y;
+    drawHeader2(pageNo);
+    drawColumnHeaders(currentY);
+    currentY += HEAD_H;
+    dataRows.forEach((row, i) => {
+      if (currentY + ROW_H > MAX_Y) {
+        drawFooter2();
+        doc.addPage();
+        pageNo++;
+        currentY = TABLE_Y;
+        drawHeader2(pageNo);
+        drawColumnHeaders(currentY);
+        currentY += HEAD_H;
+      }
+      drawDataRow(row, currentY, i % 2 === 0);
+      currentY += ROW_H;
+    });
+    drawFooter2();
+    doc.save(`${this._exportFilenameBase()}.pdf`);
   }
   triggerDownload(content, filename, mimeType) {
     const blob = new Blob([content], { type: mimeType });
@@ -138543,7 +138986,7 @@ var ProvisioningApiClient = class {
 };
 
 // src/components/PresetupGateway/utils/pdf.ts
-var import_jspdf2 = require("jspdf");
+var import_jspdf3 = require("jspdf");
 var import_qrious = __toESM(require("qrious"), 1);
 async function makeQrDataUrl(value) {
   return new Promise((resolve) => {
@@ -138662,7 +139105,7 @@ async function drawTag(doc, x, y, w, h, device, gateway, allDevices) {
 }
 async function exportDeviceTagsPdf(devices, gateway, layout = "grid_4x7") {
   if (!devices.length) throw new Error("Nenhum dispositivo para exportar");
-  const doc = new import_jspdf2.jsPDF({ orientation: "portrait", unit: "mm", format: "a4" });
+  const doc = new import_jspdf3.jsPDF({ orientation: "portrait", unit: "mm", format: "a4" });
   const pageW = doc.internal.pageSize.getWidth();
   const pageH = doc.internal.pageSize.getHeight();
   const headerH = 16;