myio-js-library 0.1.430 → 0.1.432

package/dist/index.cjs

@@ -1137,7 +1137,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.430",
+  version: "0.1.432",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -31007,14 +31007,11 @@ var AllReportModal = class {
       totalMappedConsumption += consumption;
       rows.push(result);
     }
-    this.debugLog(
-      "[AllReportModal] API-driven filter \u2014 matched:",
-      rows.length,
-      "| discarded:",
-      apiArray.length - rows.length,
-      "| total consumption:",
-      totalMappedConsumption
-    );
+    this.debugLog("[AllReportModal] API-driven filter", {
+      matched: rows.length,
+      discarded: apiArray.length - rows.length,
+      totalConsumption: totalMappedConsumption
+    });
     return rows;
   }
   parseConsumptionValue(item) {
@@ -55677,9 +55674,6 @@ function removeAlarmsNotificationsPanelStyles() {
 }
 
 // src/components/premium-modals/settings/alarms/AlarmsTab.ts
-var GCDR_INTEGRATION_API_KEY = "gcdr_cust_tb_integration_key_2026";
-var GCDR_DEFAULT_BASE_URL = "https://gcdr-api.a.myio-bas.com";
-var ALARMS_DEFAULT_BASE_URL = "https://alarms-api.a.myio-bas.com";
 var PRIORITY_ORDER = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 };
 var PRIORITY_COLORS = {
   CRITICAL: "#dc2626",
@@ -55707,10 +55701,15 @@ var AlarmsTab = class {
     const { container } = this.config;
     this.injectStyles();
     container.innerHTML = this.getLoadingHTML();
+    const orch = this.orch;
+    if (!orch?.gcdrFetchCustomerRules) {
+      this.showToast("AlarmsTab: MyIOOrchestrator n\xE3o inicializado");
+      container.innerHTML = this.getErrorHTML("MyIOOrchestrator n\xE3o inicializado com API GCDR");
+      return;
+    }
     try {
-      const gcdrBaseUrl = this.config.gcdrApiBaseUrl || GCDR_DEFAULT_BASE_URL;
       const alarms = this.readAlarmsFromASO();
-      const rules = this.config.prefetchedRules != null ? this.config.prefetchedRules : await this.fetchCustomerRules(gcdrBaseUrl);
+      const rules = this.config.prefetchedRules != null ? this.config.prefetchedRules : await this.orch.gcdrFetchCustomerRules();
       this.activeAlarms = alarms;
       this.customerRules = rules;
       for (const rule of this.customerRules) {
@@ -55749,9 +55748,7 @@ var AlarmsTab = class {
     }
     const prefetched = this.config.prefetchedAlarms;
     if (prefetched != null) {
-      return prefetched.filter(
-        (a) => a.deviceId === this.config.gcdrDeviceId
-      );
+      return prefetched.filter((a) => a.deviceId === this.config.gcdrDeviceId);
     }
     return [];
   }
@@ -55765,7 +55762,7 @@ var AlarmsTab = class {
   mapAlarmToCard(alarm) {
     return {
       id: alarm.id,
-      customerId: this.config.gcdrCustomerId,
+      customerId: this.orch?.gcdrCustomerId ?? "",
       customerName: "",
       source: alarm.deviceName || "",
       severity: alarm.severity || "LOW",
@@ -55779,121 +55776,12 @@ var AlarmsTab = class {
     };
   }
   // ============================================================================
-  // Data fetching
-  // ============================================================================
-  async fetchActiveAlarms(baseUrl) {
-    const url = `${baseUrl}/api/v1/alarms?deviceId=${encodeURIComponent(this.config.gcdrDeviceId)}&state=OPEN,ACK,ESCALATED,SNOOZED&limit=100&page=1`;
-    const response = await fetch(url, {
-      method: "GET",
-      headers: {
-        "X-API-Key": this.config.alarmsApiKey ?? GCDR_INTEGRATION_API_KEY,
-        "X-Tenant-ID": this.config.gcdrTenantId,
-        Accept: "application/json"
-      }
-    });
-    if (response.status === 404) return [];
-    if (!response.ok) {
-      throw new Error(`Alarms API error (${response.status}): ${response.statusText}`);
-    }
-    const json = await response.json();
-    if (Array.isArray(json.data)) return json.data;
-    return json.items ?? json.data?.items ?? [];
-  }
-  async fetchCustomerRules(baseUrl) {
-    const url = `${baseUrl}/api/v1/customers/${encodeURIComponent(this.config.gcdrCustomerId)}/rules`;
-    const response = await fetch(url, {
-      method: "GET",
-      headers: {
-        "X-API-Key": this.config.gcdrApiKey ?? GCDR_INTEGRATION_API_KEY,
-        "X-Tenant-ID": this.config.gcdrTenantId,
-        Accept: "application/json"
-      }
-    });
-    if (response.status === 404) return [];
-    if (!response.ok) {
-      throw new Error(`GCDR error fetching rules (${response.status}): ${response.statusText}`);
-    }
-    const json = await response.json();
-    return json.items ?? json.data?.items ?? [];
-  }
-  async postAlarmAction(baseUrl, alarmId, action) {
-    try {
-      const response = await fetch(`${baseUrl}/api/v1/alarms/${encodeURIComponent(alarmId)}/${action}`, {
-        method: "POST",
-        headers: {
-          "X-API-Key": this.config.alarmsApiKey ?? GCDR_INTEGRATION_API_KEY,
-          "X-Tenant-ID": this.config.gcdrTenantId
-        }
-      });
-      return response.ok;
-    } catch {
-      return false;
-    }
-  }
-  async patchRuleScope(baseUrl, ruleId, entityIds) {
-    try {
-      const url = `${baseUrl}/api/v1/rules/${encodeURIComponent(ruleId)}`;
-      const resolvedKey = this.config.gcdrApiKey ?? GCDR_INTEGRATION_API_KEY;
-      const body = { scope: { type: "DEVICE", entityIds } };
-      console.group("[AlarmsTab] patchRuleScope");
-      console.log("url         :", url);
-      console.log("ruleId      :", ruleId);
-      console.log("apiKey (used):", resolvedKey);
-      console.log("tenantId    :", this.config.gcdrTenantId);
-      console.log("body        :", body);
-      console.groupEnd();
-      const response = await fetch(url, {
-        method: "PATCH",
-        headers: {
-          "X-API-Key": resolvedKey,
-          "X-Tenant-ID": this.config.gcdrTenantId,
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(body)
-      });
-      console.log(`[AlarmsTab] patchRuleScope response: ${response.status} ${response.statusText} ok=${response.ok}`);
-      return response.ok;
-    } catch (err) {
-      console.error("[AlarmsTab] patchRuleScope error:", err);
-      return false;
-    }
-  }
-  async patchRuleValue(baseUrl, ruleId, alarmConfig) {
-    try {
-      const url = `${baseUrl}/api/v1/rules/${encodeURIComponent(ruleId)}`;
-      const resolvedKey = this.config.gcdrApiKey ?? GCDR_INTEGRATION_API_KEY;
-      const body = { alarmConfig };
-      console.group("[AlarmsTab] patchRuleValue");
-      console.log("url          :", url);
-      console.log("ruleId       :", ruleId);
-      console.log("apiKey (used):", resolvedKey);
-      console.log("tenantId     :", this.config.gcdrTenantId);
-      console.log("body         :", body);
-      console.groupEnd();
-      const response = await fetch(url, {
-        method: "PATCH",
-        headers: {
-          "X-API-Key": resolvedKey,
-          "X-Tenant-ID": this.config.gcdrTenantId,
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(body)
-      });
-      console.log(`[AlarmsTab] patchRuleValue response: ${response.status} ${response.statusText} ok=${response.ok}`);
-      return response.ok;
-    } catch (err) {
-      console.error("[AlarmsTab] patchRuleValue error:", err);
-      return false;
-    }
-  }
-  // ============================================================================
   // Alarm grid population
   // ============================================================================
   populateAlarmsGrid() {
     const grid = this.config.container.querySelector("#at-alarms-grid");
     if (!grid) return;
     grid.innerHTML = "";
-    const alarmsBaseUrl = this.config.alarmsApiBaseUrl || ALARMS_DEFAULT_BASE_URL;
     const AlarmService2 = window.MyIOLibrary?.AlarmService;
     const userEmail = window.MyIOUtils?.currentUserEmail || "";
     for (const rawAlarm of this.activeAlarms) {
@@ -55904,22 +55792,22 @@ var AlarmsTab = class {
             if (AlarmService2?.batchAcknowledge) {
               await AlarmService2.batchAcknowledge([alarmId], userEmail);
             } else {
-              await this.postAlarmAction(alarmsBaseUrl, alarmId, "acknowledge");
+              await this.orch.gcdrPostAlarmAction(alarmId, "acknowledge");
             }
           } else if (action === "snooze") {
             if (AlarmService2?.batchSilence) {
               await AlarmService2.batchSilence([alarmId], userEmail, "4h");
             } else {
-              await this.postAlarmAction(alarmsBaseUrl, alarmId, "snooze");
+              await this.orch.gcdrPostAlarmAction(alarmId, "snooze");
             }
           } else if (action === "escalate") {
             if (AlarmService2?.batchEscalate) {
               await AlarmService2.batchEscalate([alarmId], userEmail);
             } else {
-              await this.postAlarmAction(alarmsBaseUrl, alarmId, "escalate");
+              await this.orch.gcdrPostAlarmAction(alarmId, "escalate");
             }
           }
-          await this.refreshAlarmsGrid(alarmsBaseUrl);
+          await this.refreshAlarmsGrid();
         };
         doAction().catch(() => {
         });
@@ -55933,25 +55821,25 @@ var AlarmsTab = class {
           if (AlarmService2?.batchAcknowledge) {
             await AlarmService2.batchAcknowledge([rawAlarm.id], userEmail);
           } else {
-            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "acknowledge");
+            await this.orch.gcdrPostAlarmAction(rawAlarm.id, "acknowledge");
           }
-          await this.refreshAlarmsGrid(alarmsBaseUrl);
+          await this.refreshAlarmsGrid();
         },
         onSnooze: async () => {
           if (AlarmService2?.batchSilence) {
             await AlarmService2.batchSilence([rawAlarm.id], userEmail, "4h");
           } else {
-            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "snooze");
+            await this.orch.gcdrPostAlarmAction(rawAlarm.id, "snooze");
           }
-          await this.refreshAlarmsGrid(alarmsBaseUrl);
+          await this.refreshAlarmsGrid();
         },
         onEscalate: async () => {
           if (AlarmService2?.batchEscalate) {
             await AlarmService2.batchEscalate([rawAlarm.id], userEmail);
           } else {
-            await this.postAlarmAction(alarmsBaseUrl, rawAlarm.id, "escalate");
+            await this.orch.gcdrPostAlarmAction(rawAlarm.id, "escalate");
           }
-          await this.refreshAlarmsGrid(alarmsBaseUrl);
+          await this.refreshAlarmsGrid();
         },
         onDetails: () => {
           openAlarmDetailsModal(alarm, "light", "separado", onAction);
@@ -55966,7 +55854,7 @@ var AlarmsTab = class {
    * The myio:alarms-updated event will update this component automatically.
    * Also updates the grid immediately from the post-action ASO data.
    */
-  async refreshAlarmsGrid(_alarmsBaseUrl) {
+  async refreshAlarmsGrid() {
     const aso = window.AlarmServiceOrchestrator;
     if (aso) {
       await aso.refresh().catch(() => {
@@ -56135,7 +56023,6 @@ var AlarmsTab = class {
     if (chipWrap.querySelector(".at-rule-edit-inline")) return;
     const { metric, operator, value, valueHigh } = rule.alarmConfig;
     const opLabel = OPERATOR_LABELS[operator] ?? operator;
-    const baseUrl = this.config.gcdrApiBaseUrl || GCDR_DEFAULT_BASE_URL;
     const statusId = `at-edit-status-${ruleId}`;
     chipWrap.innerHTML = `
       <div class="at-rule-edit-inline">
@@ -56156,7 +56043,9 @@ var AlarmsTab = class {
     const confirmBtn = chipWrap.querySelector(".at-rule-edit-confirm");
     const cancelBtn = chipWrap.querySelector(".at-rule-edit-cancel");
     const statusEl = chipWrap.querySelector(`#${statusId}`);
-    const inputLow = chipWrap.querySelector(".at-rule-edit-input:not(.at-rule-edit-input--high)");
+    const inputLow = chipWrap.querySelector(
+      ".at-rule-edit-input:not(.at-rule-edit-input--high)"
+    );
     const inputHigh = chipWrap.querySelector(".at-rule-edit-input--high");
     const restoreChip = (v, vh) => {
       const vhStr = vh != null ? ` \u2013 ${vh}` : "";
@@ -56184,7 +56073,7 @@ var AlarmsTab = class {
         value: newVal,
         ...newValHigh !== void 0 && !isNaN(newValHigh) ? { valueHigh: newValHigh } : {}
       };
-      const ok = await this.patchRuleValue(baseUrl, ruleId, updatedConfig);
+      const ok = await this.orch.gcdrPatchRuleValue(ruleId, updatedConfig);
       if (ok) {
         rule.alarmConfig = updatedConfig;
         restoreChip(newVal, updatedConfig.valueHigh ?? null);
@@ -56203,7 +56092,6 @@ var AlarmsTab = class {
     const container = this.config.container;
     const saveBtn = container.querySelector("#at-save-btn");
     const msgEl = container.querySelector("#at-save-msg");
-    const baseUrl = this.config.gcdrApiBaseUrl || GCDR_DEFAULT_BASE_URL;
     if (saveBtn) {
       saveBtn.disabled = true;
       saveBtn.textContent = "Salvando\u2026";
@@ -56230,7 +56118,7 @@ var AlarmsTab = class {
       if (!rule) continue;
       const ids = [...rule.scope?.entityIds ?? []];
       if (!ids.includes(this.config.gcdrDeviceId)) ids.push(this.config.gcdrDeviceId);
-      const ok = await this.patchRuleScope(baseUrl, ruleId, ids);
+      const ok = await this.orch.gcdrPatchRuleScope(ruleId, ids);
       if (ok) {
         rule.scope = { ...rule.scope, entityIds: ids };
       } else {
@@ -56241,7 +56129,7 @@ var AlarmsTab = class {
       const rule = ruleMap.get(ruleId);
       if (!rule) continue;
       const ids = (rule.scope?.entityIds ?? []).filter((id) => id !== this.config.gcdrDeviceId);
-      const ok = await this.patchRuleScope(baseUrl, ruleId, ids);
+      const ok = await this.orch.gcdrPatchRuleScope(ruleId, ids);
       if (ok) {
         rule.scope = { ...rule.scope, entityIds: ids };
       } else {
@@ -56268,9 +56156,20 @@ var AlarmsTab = class {
   // ============================================================================
   // Utilities
   // ============================================================================
+  /** Typed accessor to window.MyIOOrchestrator GCDR API methods. */
+  get orch() {
+    return window.MyIOOrchestrator;
+  }
   esc(str) {
     return String(str ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
+  showToast(msg) {
+    const el2 = document.createElement("div");
+    el2.style.cssText = "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;z-index:99999;box-shadow:0 4px 12px rgba(0,0,0,0.25);pointer-events:none;font-family:Inter,system-ui,-apple-system,sans-serif;white-space:nowrap;";
+    el2.textContent = `\u26A0\uFE0F ${msg}`;
+    document.body.appendChild(el2);
+    setTimeout(() => el2.remove(), 4e3);
+  }
   getLoadingHTML() {
     return `
       <div style="padding:32px;text-align:center;color:#6c757d;">
@@ -56655,18 +56554,36 @@ var SettingsModalView = class {
   async initAlarmsTab() {
     const container = this.modal.querySelector("#alarms-tab-content");
     if (!container) return;
-    const { gcdrDeviceId, gcdrCustomerId, gcdrTenantId, gcdrApiBaseUrl, prefetchedBundle, prefetchedAlarms, deviceId, jwtToken } = this.config;
-    if (!gcdrDeviceId || !gcdrCustomerId || !gcdrTenantId) {
-      container.innerHTML = '<p style="color:#6c757d;padding:20px;text-align:center;font-style:italic;">Alarm data not available (missing GCDR identifiers).</p>';
+    const { gcdrDeviceId, prefetchedBundle, prefetchedAlarms, deviceId, jwtToken } = this.config;
+    if (!gcdrDeviceId) {
+      const tabBtn = this.modal.querySelector('.modal-tab[data-tab="alarms"]');
+      if (tabBtn) tabBtn.classList.add("locked");
+      container.innerHTML = `
+        <div style="
+          display:flex; flex-direction:column; align-items:center; justify-content:center;
+          min-height:320px; padding:40px 24px; text-align:center;
+        ">
+          <div style="
+            width:72px; height:72px; border-radius:50%;
+            background:#f3f4f6; border:1.5px solid #e5e7eb;
+            display:flex; align-items:center; justify-content:center;
+            font-size:32px; margin-bottom:20px; opacity:0.7;
+          ">\u{1F512}</div>
+          <div style="font-size:15px; font-weight:600; color:#374151; margin-bottom:8px;">
+            Alarmes n\xE3o dispon\xEDveis
+          </div>
+          <div style="font-size:13px; color:#9ca3af; max-width:320px; line-height:1.6;">
+            Este dispositivo n\xE3o est\xE1 vinculado ao sistema GCDR.<br>
+            O identificador <code style="font-size:11px;background:#f3f4f6;padding:1px 5px;border-radius:3px;">gcdrDeviceId</code>
+            n\xE3o foi encontrado nos atributos do servidor.
+          </div>
+        </div>`;
       return;
     }
     try {
       this.alarmsTab = new AlarmsTab({
         container,
         gcdrDeviceId,
-        gcdrCustomerId,
-        gcdrTenantId,
-        gcdrApiBaseUrl,
         tbDeviceId: deviceId ?? "",
         jwtToken: jwtToken ?? "",
         prefetchedBundle: prefetchedBundle ?? null,
@@ -57677,6 +57594,12 @@ var SettingsModalView = class {
           background: #fff;
         }
 
+        .modal-tab.locked {
+          opacity: 0.5;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+
         .modal-tab svg {
           width: 16px;
           height: 16px;
@@ -78314,7 +78237,8 @@ function openUpsellModal(params) {
       label: 120,
       type: 140,
       createdTime: 90,
-      relationTo: 110,
+      relationTo: 120,
+      relationFrom: 110,
       centralId: 80,
       slaveId: 60,
       deviceType: 80,
@@ -78330,7 +78254,9 @@ function openUpsellModal(params) {
     telemetryLoadedCount: 0,
     deviceRelations: [],
     allRelations: [],
-    deviceToAssetMap: /* @__PURE__ */ new Map(),
+    deviceRelToMap: /* @__PURE__ */ new Map(),
+    deviceRelFromMap: /* @__PURE__ */ new Map(),
+    relationsDetailModal: { open: false, deviceId: "", deviceName: "", direction: "to", relations: [], removing: null },
     relationsLoaded: false,
     relationsLoading: false,
     deviceProfiles: [],
@@ -79557,11 +79483,13 @@ function renderStep2(state6, modalId, colors2, t) {
         </div>`;
     }
     return `
+      <div style="overflow-x:auto; overflow-y:visible;">
       <div id="${modalId}-grid-header" style="
         display:flex; align-items:center; gap:0; padding:8px 12px;
         background:${colors2.cardBg}; border:1px solid ${colors2.border};
         border-bottom:none; border-radius:8px 8px 0 0; font-size:9px;
         font-weight:600; color:${colors2.textMuted}; text-transform:uppercase;
+        min-width:max-content;
       ">
         ${multiCol ? `<div style="width:28px; text-align:center;">\u2611</div>` : ""}
         <div style="width:28px;"></div>
@@ -79572,6 +79500,9 @@ function renderStep2(state6, modalId, colors2, t) {
         <div style="width:${state6.columnWidths.relationTo}px; padding:0 6px; text-align:center; border-right:1px solid ${colors2.border};">
           relTO ${!state6.relationsLoaded ? "\u23F3" : ""}
         </div>
+        <div style="width:${state6.columnWidths.relationFrom}px; padding:0 6px; text-align:center; border-right:1px solid ${colors2.border};">
+          relFROM ${!state6.relationsLoaded ? "\u23F3" : ""}
+        </div>
         ${renderSortableHeader("centralId", "centralId" + (!state6.deviceAttrsLoaded ? " \u{1F512}" : ""), "centralId", state6.columnWidths.centralId)}
         ${renderSortableHeader("slaveId", "slaveId" + (!state6.deviceAttrsLoaded ? " \u{1F512}" : ""), "slaveId", state6.columnWidths.slaveId)}
         <div style="width:${state6.columnWidths.deviceType}px; padding:0 6px; text-align:center; border-right:1px solid ${colors2.border};">
@@ -79589,10 +79520,11 @@ function renderStep2(state6, modalId, colors2, t) {
         <div style="width:24px;"></div>
       </div>
       <div style="
-        max-height:${gridHeight}; overflow-y:auto; border:1px solid ${colors2.border};
-        border-radius:0 0 8px 8px; background:${colors2.surface};
+        max-height:${gridHeight}; overflow-y:auto; overflow-x:visible; border:1px solid ${colors2.border};
+        border-radius:0 0 8px 8px; background:${colors2.surface}; min-width:max-content;
       " id="${modalId}-device-list">
         ${sortedDevices.length === 0 ? `<div style="padding:40px; text-align:center; color:${colors2.textMuted};">${t.noResults}</div>` : sortedDevices.map((device) => renderDeviceRow(device, state6, modalId, colors2)).join("")}
+      </div>
       </div>`;
   })()}
   `;
@@ -79752,11 +79684,24 @@ function renderDeviceRow(device, state6, modalId, colors2) {
       <div style="width: ${state6.columnWidths.createdTime}px; padding: 0 6px; text-align: center; flex-shrink: 0;">
         <span style="font-size: 9px; color: ${colors2.textMuted};">${createdTimeStr}</span>
       </div>
-      <div style="width: ${state6.columnWidths.relationTo}px; padding: 0 6px; text-align: center; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
+      <div style="width: ${state6.columnWidths.relationTo}px; padding: 0 6px; flex-shrink: 0; overflow: hidden; display:flex; align-items:center; justify-content:center; gap:3px;">
         ${(() => {
     if (!state6.relationsLoaded) return `<span style="font-size: 8px; color: ${colors2.textMuted}; font-style: italic;">\u2014</span>`;
-    const assetName = state6.deviceToAssetMap.get(deviceId);
-    return assetName ? `<span style="font-size: 9px; color: ${colors2.text};" title="${assetName}">${assetName}</span>` : `<span style="font-size: 9px; color: ${colors2.textMuted};">\u2014</span>`;
+    const rels = state6.deviceRelToMap.get(deviceId) || [];
+    if (rels.length === 0) return `<span style="font-size: 9px; color: ${colors2.textMuted};">\u2014</span>`;
+    const first = rels[0];
+    const more = rels.length - 1;
+    return `<span style="font-size:9px;color:${colors2.text};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:${more > 0 ? 68 : 108}px" title="${first.name}">${first.name}</span>${more > 0 ? `<button data-show-relto="${deviceId}" data-device-name="${encodeURIComponent(device.name || "")}" style="flex-shrink:0;font-size:9px;background:#ede9ff;color:#4c1d95;border:none;border-radius:3px;padding:1px 4px;cursor:pointer;font-weight:700;line-height:1.4">+${more}</button>` : ""}`;
+  })()}
+      </div>
+      <div style="width: ${state6.columnWidths.relationFrom}px; padding: 0 6px; flex-shrink: 0; overflow: hidden; display:flex; align-items:center; justify-content:center; gap:3px;">
+        ${(() => {
+    if (!state6.relationsLoaded) return `<span style="font-size: 8px; color: ${colors2.textMuted}; font-style: italic;">\u2014</span>`;
+    const rels = state6.deviceRelFromMap.get(deviceId) || [];
+    if (rels.length === 0) return `<span style="font-size: 9px; color: ${colors2.textMuted};">\u2014</span>`;
+    const first = rels[0];
+    const more = rels.length - 1;
+    return `<span style="font-size:9px;color:${colors2.text};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:${more > 0 ? 68 : 98}px" title="${first.name}">${first.name}</span>${more > 0 ? `<button data-show-relfrom="${deviceId}" data-device-name="${encodeURIComponent(device.name || "")}" style="flex-shrink:0;font-size:9px;background:#dbeafe;color:#1e40af;border:none;border-radius:3px;padding:1px 4px;cursor:pointer;font-weight:700;line-height:1.4">+${more}</button>` : ""}`;
   })()}
       </div>
       <div style="width: ${state6.columnWidths.centralId}px; padding: 0 6px; text-align: center; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
@@ -80316,6 +80261,109 @@ function renderEntityLabelRow(currentLabel, deviceName, colors2, modalId, t) {
     </div>
   `;
 }
+function openRelationsDetailPanel(deviceId, deviceName, direction, rels, state6, t) {
+  document.getElementById("myio-rel-detail-panel")?.remove();
+  const isDark = state6.theme === "dark";
+  const colors2 = {
+    bg: isDark ? "#1f2937" : "#ffffff",
+    border: isDark ? "#374151" : "#e5e7eb",
+    text: isDark ? "#f9fafb" : "#111827",
+    muted: isDark ? "#9ca3af" : "#6b7280",
+    surface: isDark ? "#111827" : "#f9fafb",
+    danger: "#dc2626",
+    dangerBg: "#fee2e2"
+  };
+  const dirLabel = direction === "to" ? "relTO" : "relFROM";
+  const dirDesc = direction === "to" ? "Entidades que apontam para este dispositivo" : "Entidades que este dispositivo aponta para";
+  const typeColor = (et) => ({
+    ASSET: ["#dbeafe", "#1e40af"],
+    CUSTOMER: ["#d1fae5", "#065f46"],
+    DEVICE: ["#ede9ff", "#4c1d95"]
+  })[et] || ["#f3f4f6", "#374151"];
+  let currentRels = [...rels];
+  function renderPanel() {
+    document.getElementById("myio-rel-detail-panel")?.remove();
+    const panel = document.createElement("div");
+    panel.id = "myio-rel-detail-panel";
+    panel.style.cssText = `
+      position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
+      z-index:99999; background:${colors2.bg}; border:1px solid ${colors2.border};
+      border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35);
+      min-width:380px; max-width:500px; width:90vw; max-height:70vh;
+      display:flex; flex-direction:column; font-family:system-ui,sans-serif;
+    `;
+    const rows = currentRels.map((rel, idx) => {
+      const [tcBg, tcColor] = typeColor(rel.entityType);
+      return `
+        <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid ${colors2.border}">
+          <span style="font-size:9px;background:${tcBg};color:${tcColor};padding:2px 6px;border-radius:3px;font-weight:700;white-space:nowrap;flex-shrink:0">${rel.entityType}</span>
+          <div style="flex:1;overflow:hidden">
+            <div style="font-size:12px;font-weight:600;color:${colors2.text};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${rel.name}</div>
+            <div style="font-size:10px;color:${colors2.muted};font-family:monospace">${rel.id}</div>
+            <div style="font-size:10px;color:${colors2.muted}">tipo: <em>${rel.relationType}</em></div>
+          </div>
+          <button data-rel-remove="${idx}" style="flex-shrink:0;font-size:11px;background:${colors2.dangerBg};color:${colors2.danger};border:1px solid ${colors2.danger};border-radius:5px;padding:3px 8px;cursor:pointer;font-weight:600">
+            Remover
+          </button>
+        </div>`;
+    }).join("");
+    panel.innerHTML = `
+      <div style="padding:14px 16px 10px;border-bottom:1px solid ${colors2.border};display:flex;align-items:flex-start;justify-content:space-between;gap:8px">
+        <div>
+          <div style="font-size:13px;font-weight:700;color:${colors2.text}">${dirLabel} \u2014 ${deviceName}</div>
+          <div style="font-size:11px;color:${colors2.muted};margin-top:2px">${dirDesc}</div>
+        </div>
+        <button id="myio-rel-panel-close" style="font-size:16px;background:none;border:none;cursor:pointer;color:${colors2.muted};padding:0 4px;line-height:1">\u2715</button>
+      </div>
+      <div style="overflow-y:auto;flex:1">
+        ${currentRels.length === 0 ? `<div style="padding:24px;text-align:center;color:${colors2.muted};font-size:12px">Nenhuma rela\xE7\xE3o</div>` : rows}
+      </div>
+    `;
+    const overlay = document.createElement("div");
+    overlay.id = "myio-rel-detail-overlay";
+    overlay.style.cssText = "position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.3)";
+    overlay.addEventListener("click", () => {
+      panel.remove();
+      overlay.remove();
+    });
+    document.body.appendChild(overlay);
+    document.body.appendChild(panel);
+    panel.querySelector("#myio-rel-panel-close")?.addEventListener("click", () => {
+      panel.remove();
+      overlay.remove();
+    });
+    panel.querySelectorAll("[data-rel-remove]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const idx = parseInt(btn.dataset.relRemove || "0", 10);
+        const rel = currentRels[idx];
+        if (!rel) return;
+        btn.disabled = true;
+        btn.textContent = "\u2026";
+        try {
+          const fromId = direction === "to" ? rel.id : deviceId;
+          const fromType = direction === "to" ? rel.entityType : "DEVICE";
+          const toId = direction === "to" ? deviceId : rel.id;
+          const toType = direction === "to" ? "DEVICE" : rel.entityType;
+          const token = state6.token;
+          const base = state6.tbApiBase || "";
+          await fetch(
+            `${base}/api/relation?fromId=${fromId}&fromType=${fromType}&toId=${toId}&toType=${toType}&relationType=${encodeURIComponent(rel.relationType)}&typeGroup=COMMON`,
+            { method: "DELETE", headers: { "X-Authorization": `Bearer ${token}` } }
+          );
+          currentRels = currentRels.filter((_, i) => i !== idx);
+          const map = direction === "to" ? state6.deviceRelToMap : state6.deviceRelFromMap;
+          map.set(deviceId, [...currentRels]);
+          renderPanel();
+        } catch {
+          btn.disabled = false;
+          btn.textContent = "Remover";
+        }
+      });
+    });
+  }
+  renderPanel();
+  void t;
+}
 function setupEventListeners3(container, state6, modalId, t, onClose) {
   const closeHandler = () => closeModal(container, onClose);
   const overlay = container.querySelector(".myio-upsell-modal-overlay");
@@ -80518,6 +80566,18 @@ function setupEventListeners3(container, state6, modalId, t, onClose) {
   document.getElementById(`${modalId}-load-relations`)?.addEventListener("click", () => {
     void loadDeviceRelations(state6, container, modalId, t, onClose);
   });
+  container.addEventListener("click", (e) => {
+    const target = e.target;
+    const btn = target.closest("[data-show-relto],[data-show-relfrom]");
+    if (!btn) return;
+    e.stopPropagation();
+    const isTo = !!btn.dataset.showRelto;
+    const deviceId = isTo ? btn.dataset.showRelto : btn.dataset.showRelfrom;
+    const deviceName = decodeURIComponent(btn.dataset.deviceName || "");
+    const direction = isTo ? "to" : "from";
+    const rels = (isTo ? state6.deviceRelToMap : state6.deviceRelFromMap).get(deviceId) || [];
+    openRelationsDetailPanel(deviceId, deviceName, direction, rels, state6, t);
+  });
   document.getElementById(`${modalId}-load-attrs`)?.addEventListener("click", async () => {
     if (state6.attrsLoading) return;
     console.log(
@@ -81892,7 +81952,9 @@ async function loadDevices(state6, container, modalId, t, onClose) {
     state6.telemetryLoadedCount = 0;
     state6.relationsLoaded = false;
     state6.relationsLoading = false;
-    state6.deviceToAssetMap = /* @__PURE__ */ new Map();
+    state6.deviceRelToMap = /* @__PURE__ */ new Map();
+    state6.deviceRelFromMap = /* @__PURE__ */ new Map();
+    state6.relationsDetailModal = { open: false, deviceId: "", deviceName: "", direction: "to", relations: [], removing: null };
     state6.isLoading = false;
     renderModal4(container, state6, modalId, t);
     setupEventListeners3(container, state6, modalId, t, onClose);
@@ -81915,8 +81977,9 @@ async function loadDeviceRelations(state6, container, modalId, t, onClose) {
     }
     const assets = state6.customerAssets;
     const BATCH_SIZE = 20;
-    const deviceToAssetMap = /* @__PURE__ */ new Map();
-    showBusyProgress("Carregando rela\xE7\xF5es...", assets.length);
+    const deviceRelToMap = /* @__PURE__ */ new Map();
+    const deviceRelFromMap = /* @__PURE__ */ new Map();
+    showBusyProgress("Carregando rela\xE7\xF5es (relTO)...", assets.length);
     for (let i = 0; i < assets.length; i += BATCH_SIZE) {
       const batch = assets.slice(i, i + BATCH_SIZE);
       await Promise.all(
@@ -81928,7 +81991,10 @@ async function loadDeviceRelations(state6, container, modalId, t, onClose) {
             );
             rels.forEach((rel) => {
               if (rel.to.entityType === "DEVICE") {
-                deviceToAssetMap.set(rel.to.id, asset.name);
+                const entry = { id: asset.id, name: asset.name, entityType: "ASSET", relationType: rel.type || "Contains" };
+                const list = deviceRelToMap.get(rel.to.id) || [];
+                list.push(entry);
+                deviceRelToMap.set(rel.to.id, list);
               }
             });
           } catch {
@@ -81937,7 +82003,34 @@ async function loadDeviceRelations(state6, container, modalId, t, onClose) {
       );
       updateBusyProgress(Math.min(i + BATCH_SIZE, assets.length));
     }
-    state6.deviceToAssetMap = deviceToAssetMap;
+    const allDeviceIds = state6.devices.map((d) => getEntityId(d));
+    showBusyProgress("Carregando rela\xE7\xF5es (relFROM)...", allDeviceIds.length);
+    for (let i = 0; i < allDeviceIds.length; i += BATCH_SIZE) {
+      const batch = allDeviceIds.slice(i, i + BATCH_SIZE);
+      await Promise.all(
+        batch.map(async (devId) => {
+          try {
+            const rels = await tbFetch(
+              state6,
+              `/api/relations?fromId=${devId}&fromType=DEVICE`
+            );
+            if (rels.length > 0) {
+              const entries = rels.map((rel) => ({
+                id: rel.to.id,
+                name: rel.toName || rel.to.id,
+                entityType: rel.to.entityType,
+                relationType: rel.type || "Contains"
+              }));
+              deviceRelFromMap.set(devId, entries);
+            }
+          } catch {
+          }
+        })
+      );
+      updateBusyProgress(Math.min(i + BATCH_SIZE, allDeviceIds.length));
+    }
+    state6.deviceRelToMap = deviceRelToMap;
+    state6.deviceRelFromMap = deviceRelFromMap;
     state6.relationsLoaded = true;
     state6.relationsLoading = false;
     hideBusyProgress();
@@ -125426,8 +125519,8 @@ async function openGCDRSyncModal(params) {
 
 // src/components/premium-modals/alarm-bundle-map/openAlarmBundleMapModal.ts
 var MODAL_ID3 = "myio-alarm-bundle-map-modal";
-var GCDR_INTEGRATION_API_KEY2 = "gcdr_cust_tb_integration_key_2026";
-var GCDR_DEFAULT_BASE_URL2 = "https://gcdr-api.a.myio-bas.com";
+var GCDR_INTEGRATION_API_KEY = "gcdr_cust_tb_integration_key_2026";
+var GCDR_DEFAULT_BASE_URL = "https://gcdr-api.a.myio-bas.com";
 var TEAL2 = "#0a6d5e";
 var TEAL_DARK2 = "#084f44";
 var STYLES3 = `
@@ -125726,7 +125819,7 @@ async function fetchBundle(customerTB_ID, gcdrTenantId, baseUrl) {
   const response = await fetch(url, {
     method: "GET",
     headers: {
-      "X-API-Key": GCDR_INTEGRATION_API_KEY2,
+      "X-API-Key": GCDR_INTEGRATION_API_KEY,
       "X-Tenant-ID": gcdrTenantId,
       "Accept": "application/json"
     }
@@ -125757,7 +125850,7 @@ async function openAlarmBundleMapModal(params) {
     alert("GCDR Tenant ID n\xE3o encontrado. Configure o atributo gcdrTenantId no cliente ThingsBoard.");
     return;
   }
-  const baseUrl = params.gcdrApiBaseUrl || GCDR_DEFAULT_BASE_URL2;
+  const baseUrl = params.gcdrApiBaseUrl || GCDR_DEFAULT_BASE_URL;
   const overlay = document.createElement("div");
   overlay.id = MODAL_ID3;
   const card = document.createElement("div");