myio-js-library 0.1.430 → 0.1.433

package/dist/index.cjs

@@ -1075,6 +1075,7 @@ __export(index_exports, {
   openTemperatureSettingsModal: () => openTemperatureSettingsModal,
   openTutorialModal: () => openTutorialModal,
   openUpsellModal: () => openUpsellModal,
+  openUserManagementModal: () => openUserManagementModal,
   openWelcomeModal: () => openWelcomeModal,
   parseInputDateToDate: () => parseInputDateToDate,
   periodKey: () => periodKey,
@@ -1137,7 +1138,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",
@@ -24519,7 +24520,8 @@ var EnergyDataFetcher = class {
    */
   buildEnergyApiUrl(params) {
     const baseUrl = this.config.dataApiHost;
-    const endpoint = `/api/v1/telemetry/devices/${params.ingestionId}/energy`;
+    const segment = params.readingType === "water" || params.readingType === "tank" ? "water" : "energy";
+    const endpoint = `/api/v1/telemetry/devices/${params.ingestionId}/${segment}`;
     const queryParams = new URLSearchParams({
       startTime: params.startISO,
       endTime: params.endISO,
@@ -28084,14 +28086,17 @@ var EnergyModalView = class {
     const totalConsumption = this.currentEnergyData.consumption.reduce((sum, item) => sum + item.value, 0);
     const now = /* @__PURE__ */ new Date();
     const timestamp = now.toLocaleDateString("pt-BR") + " - " + now.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+    const rt = this.config.params.readingType;
+    const unit = rt === "water" || rt === "tank" ? "m\xB3" : rt === "temperature" ? "\xB0C" : "kWh";
+    const reportTitle = rt === "water" || rt === "tank" ? "WATER REPORT" : rt === "temperature" ? "TEMPERATURE REPORT" : "ENERGY REPORT";
     const csvData = [
-      ["ENERGY REPORT - DEVICE DETAILS", "", ""],
+      [`${reportTitle} - DEVICE DETAILS`, "", ""],
       ["Device", device.label, ""],
       ["Device ID", device.id, ""],
       ["Export Date", timestamp, ""],
-      ["Total Consumption", formatNumber(totalConsumption), "kWh"],
+      ["Total Consumption", formatNumber(totalConsumption), unit],
       ["", "", ""],
-      ["Date", "Consumption (kWh)", ""],
+      ["Date", `Consumption (${unit})`, ""],
       ...this.currentEnergyData.consumption.map((row) => [
         formatDate(row.timestamp),
         formatNumber(row.value),
@@ -28099,7 +28104,7 @@ var EnergyModalView = class {
       ])
     ];
     const csvContent = toCsv(csvData);
-    this.downloadCSV(csvContent, `energy-report-${device.id}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
+    this.downloadCSV(csvContent, `${rt || "energy"}-report-${device.id}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
   }
   /**
    * Downloads CSV file
@@ -28239,7 +28244,7 @@ var EnergyModalView = class {
             endDate,
             label: this.config.params.deviceLabel || "Dispositivo",
             locale: "pt-BR",
-            readingType: this.config.params.readingType || "energy",
+            readingType: (this.config.params.readingType === "tank" ? "water" : this.config.params.readingType) || "energy",
             enableRealTimeMode: true,
             realTimeInterval: 8e3,
             realTimeAutoScroll: true
@@ -28854,7 +28859,8 @@ var EnergyModal = class {
         ingestionId: this.context.resolved.ingestionId,
         startISO,
         endISO,
-        granularity: this.params.granularity || "1d"
+        granularity: this.params.granularity || "1d",
+        readingType: this.params.readingType
       });
       console.log("[EnergyModal] Energy data loaded:", {
         dataPoints: energyData.consumption.length,
@@ -28936,7 +28942,8 @@ var EnergyModal = class {
         ingestionId: this.context.resolved.ingestionId,
         startISO,
         endISO,
-        granularity: this.params.granularity || "1d"
+        granularity: this.params.granularity || "1d",
+        readingType: this.params.readingType
       });
       console.log("[EnergyModal] Energy data reloaded:", {
         dataPoints: energyData.consumption.length,
@@ -29201,9 +29208,10 @@ var DeviceReportModal = class {
               <label class="myio-label" for="date-range">Per\xEDodo</label>
               <input type="text" id="date-range" class="myio-input" readonly placeholder="Selecione o per\xEDodo" style="width: 300px;">
             </div>
-            <div id="granularity-toggle" role="group" aria-label="Granularidade" style="display:inline-flex;align-items:center;border:1px solid var(--myio-border,#e5e7eb);border-radius:8px;overflow:hidden;background:#f3f4f6;flex-shrink:0;height:36px;">
-              <button type="button" data-gran="1d" style="height:36px;padding:0 12px;font-size:13px;font-weight:600;border:none;background:var(--myio-primary,#1565c0);color:#fff;cursor:pointer;white-space:nowrap;">1d</button>
-              <button type="button" data-gran="1h" style="height:36px;padding:0 12px;font-size:13px;font-weight:600;border:none;background:transparent;color:#6b7280;cursor:pointer;white-space:nowrap;">1h</button>
+            <!-- granularity-toggle hidden: 1h not yet supported, default stays 1d -->
+            <div id="granularity-toggle" role="group" aria-label="Granularidade" style="display:none;">
+              <button type="button" data-gran="1d">1d</button>
+              <button type="button" data-gran="1h">1h</button>
             </div>
             <button id="load-btn" class="myio-btn myio-btn-primary">
               <span class="myio-spinner" id="load-spinner" style="display: none;"></span>
@@ -30456,9 +30464,10 @@ var AllReportModal = class {
               <label class="myio-label" for="date-range">Per\xEDodo</label>
               <input type="text" id="date-range" class="myio-input" readonly placeholder="Selecione o per\xEDodo" style="width: 300px;">
             </div>
-            <div id="granularity-toggle" role="group" aria-label="Granularidade" style="display:inline-flex;align-items:center;border:1px solid var(--myio-border,#e5e7eb);border-radius:8px;overflow:hidden;background:#f3f4f6;flex-shrink:0;height:36px;">
-              <button type="button" data-gran="1d" style="height:36px;padding:0 12px;font-size:13px;font-weight:600;border:none;background:var(--myio-primary,#1565c0);color:#fff;cursor:pointer;white-space:nowrap;">1d</button>
-              <button type="button" data-gran="1h" style="height:36px;padding:0 12px;font-size:13px;font-weight:600;border:none;background:transparent;color:#6b7280;cursor:pointer;white-space:nowrap;">1h</button>
+            <!-- granularity-toggle hidden: 1h not yet supported, default stays 1d -->
+            <div id="granularity-toggle" role="group" aria-label="Granularidade" style="display:none;">
+              <button type="button" data-gran="1d">1d</button>
+              <button type="button" data-gran="1h">1h</button>
             </div>
             <button id="load-btn" class="myio-btn myio-btn-primary">
               <span class="myio-spinner" id="load-spinner" style="display: none;"></span>
@@ -31007,14 +31016,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) {
@@ -49587,7 +49593,7 @@ function bindAnnotationsPanelEvents(panel, alarmId, currentUser, onCountChange,
 }
 
 // src/utils/AnnotationTooltip.ts
-var CSS = `
+var CSS2 = `
 .annot-tooltip {
   position: fixed;
   z-index: 99999;
@@ -49779,7 +49785,7 @@ function injectCSS7() {
   }
   const style = document.createElement("style");
   style.id = id;
-  style.textContent = CSS;
+  style.textContent = CSS2;
   document.head.appendChild(style);
   _cssInjected = true;
 }
@@ -55677,9 +55683,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",
@@ -55700,6 +55703,7 @@ var AlarmsTab = class {
   activeAlarms = [];
   initialCheckedRuleIds = /* @__PURE__ */ new Set();
   alarmsUpdatedHandler = null;
+  rulesFetchError = null;
   constructor(config) {
     this.config = config;
   }
@@ -55707,30 +55711,35 @@ 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;
+    }
+    this.activeAlarms = this.readAlarmsFromASO();
+    let rulesFetchError = null;
     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);
-      this.activeAlarms = alarms;
-      this.customerRules = rules;
+      this.customerRules = this.config.prefetchedRules != null ? this.config.prefetchedRules : await this.orch.gcdrFetchCustomerRules();
       for (const rule of this.customerRules) {
         if (rule.scope?.entityIds?.includes(this.config.gcdrDeviceId)) {
           this.initialCheckedRuleIds.add(rule.id);
         }
       }
-      container.innerHTML = this.renderTab();
-      this.populateAlarmsGrid();
-      this.attachTabListeners();
-      this.alarmsUpdatedHandler = () => {
-        const fresh = this.readAlarmsFromASO();
-        this.activeAlarms = fresh;
-        this.refreshAlarmsGridFromCurrentData();
-      };
-      window.addEventListener("myio:alarms-updated", this.alarmsUpdatedHandler);
     } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      container.innerHTML = this.getErrorHTML(msg);
-    }
+      rulesFetchError = this.classifyRulesError(err);
+      this.customerRules = [];
+    }
+    this.rulesFetchError = rulesFetchError;
+    container.innerHTML = this.renderTab();
+    this.populateAlarmsGrid();
+    this.attachTabListeners();
+    this.alarmsUpdatedHandler = () => {
+      const fresh = this.readAlarmsFromASO();
+      this.activeAlarms = fresh;
+      this.refreshAlarmsGridFromCurrentData();
+    };
+    window.addEventListener("myio:alarms-updated", this.alarmsUpdatedHandler);
   }
   destroy() {
     if (this.alarmsUpdatedHandler) {
@@ -55749,9 +55758,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 +55772,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 +55786,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 +55802,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 +55831,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 +55864,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(() => {
@@ -56042,7 +55940,32 @@ var AlarmsTab = class {
   }
   // ---------- Section 2: Parametrize rules (multi-select + save) ----------
   renderSection2() {
-    const sorted = [...this.customerRules].sort(
+    if (this.rulesFetchError) {
+      return `
+        <div class="at-section">
+          <div class="at-section-header">
+            <span class="at-section-icon">\u2699\uFE0F</span>
+            <div>
+              <div class="at-section-title">Parametrizar Regras de Alarme</div>
+              <div class="at-section-sub">N\xE3o foi poss\xEDvel carregar as regras</div>
+            </div>
+          </div>
+          <div class="at-rules-error">
+            <div class="at-rules-error-icon">\u26A0\uFE0F</div>
+            <div class="at-rules-error-body">
+              <div class="at-rules-error-title">${this.esc(this.rulesFetchError)}</div>
+              <div class="at-rules-error-hint">Verifique a conex\xE3o com o servidor e tente reabrir este painel.</div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    const deviceProfile = (this.config.deviceProfile ?? "").toUpperCase();
+    const compatible = this.customerRules.filter(
+      (rule) => rule.scopeProfiles && rule.scopeProfiles.length > 0 && rule.scopeProfiles.some((p) => p.toUpperCase() === deviceProfile)
+    );
+    const filtered = compatible.length > 0 ? compatible : this.customerRules;
+    const sorted = [...filtered].sort(
       (a, b) => (PRIORITY_ORDER[a.priority] ?? 99) - (PRIORITY_ORDER[b.priority] ?? 99)
     );
     return `
@@ -56066,6 +55989,26 @@ var AlarmsTab = class {
       </div>
     `;
   }
+  /**
+   * Translates a raw rules-fetch error into a user-friendly message.
+   * Hides internal HTTP codes and stack traces from the operator.
+   */
+  classifyRulesError(err) {
+    const raw = err instanceof Error ? err.message : String(err);
+    if (/HTTP 5\d\d/i.test(raw)) {
+      return "O servidor de regras est\xE1 temporariamente indispon\xEDvel. Tente novamente em instantes.";
+    }
+    if (/HTTP 401|HTTP 403|unauthorized|forbidden/i.test(raw)) {
+      return "Sem permiss\xE3o para carregar as regras de alarme deste cliente.";
+    }
+    if (/HTTP 404/i.test(raw)) {
+      return "Nenhuma regra de alarme encontrada para este cliente.";
+    }
+    if (/network|failed to fetch|net::/i.test(raw)) {
+      return "Erro de rede ao carregar as regras. Verifique a conex\xE3o e tente novamente.";
+    }
+    return "N\xE3o foi poss\xEDvel carregar as regras de alarme.";
+  }
   renderCustomerRuleSelectable(rule) {
     const checked = this.initialCheckedRuleIds.has(rule.id);
     const color = PRIORITY_COLORS[rule.priority] ?? "#6b7280";
@@ -56135,7 +56078,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 +56098,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 +56128,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 +56147,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 +56173,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 {
@@ -56240,8 +56183,17 @@ var AlarmsTab = class {
     for (const ruleId of toRemove) {
       const rule = ruleMap.get(ruleId);
       if (!rule) continue;
+      const confirmed = await this.confirmRuleUnassign(rule);
+      if (!confirmed) {
+        this.restoreRuleCheckbox(ruleId);
+        continue;
+      }
+      const enqueued = await this.orch.gcdrEnqueueCloseAlarms(ruleId, this.config.gcdrDeviceId);
+      if (!enqueued) {
+        console.warn("[AlarmsTab] RFC-0191: enqueue-close failed for rule", ruleId);
+      }
       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 +56220,89 @@ 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;");
   }
+  // ============================================================================
+  // RFC-0191: Confirmation modal + checkbox restore
+  // ============================================================================
+  /**
+   * Renders a premium confirmation modal and waits for the user's decision.
+   * Resolves true = confirmed (proceed with unassignment), false = cancelled.
+   */
+  confirmRuleUnassign(rule) {
+    return new Promise((resolve) => {
+      const PRIORITY_COLORS_LOCAL = {
+        CRITICAL: "#dc2626",
+        HIGH: "#f59e0b",
+        MEDIUM: "#3b82f6",
+        LOW: "#6b7280"
+      };
+      const color = PRIORITY_COLORS_LOCAL[rule.priority] ?? "#6b7280";
+      const overlay = document.createElement("div");
+      overlay.className = "at-confirm-overlay";
+      overlay.innerHTML = `
+        <div class="at-confirm-modal">
+          <div class="at-confirm-warning-bar"></div>
+          <div class="at-confirm-body">
+            <div class="at-confirm-icon">\u26A0\uFE0F</div>
+            <div class="at-confirm-content">
+              <div class="at-confirm-title">Aten\xE7\xE3o \u2014 Remo\xE7\xE3o de Regra de Alarme</div>
+              <div class="at-confirm-text">
+                Voc\xEA est\xE1 removendo este dispositivo da regra de alarme:
+              </div>
+              <div class="at-confirm-rule-name">
+                ${this.esc(rule.name)}
+                <span class="at-confirm-priority-badge"
+                      style="background:${color}20;color:${color};">${this.esc(rule.priority)}</span>
+              </div>
+              <div class="at-confirm-text at-confirm-text--sub">
+                Esta a\xE7\xE3o pode fechar alarmes abertos ou na fila associados a esta regra neste
+                dispositivo. O motor de alarmes ir\xE1 enfileirar o fechamento; o hist\xF3rico e os
+                registros de auditoria s\xE3o preservados.
+              </div>
+            </div>
+          </div>
+          <div class="at-confirm-footer">
+            <button type="button" class="at-confirm-btn at-confirm-btn--cancel">Cancelar</button>
+            <button type="button" class="at-confirm-btn at-confirm-btn--confirm">Confirmar e Remover Regra</button>
+          </div>
+        </div>
+      `;
+      const close = (result) => {
+        overlay.remove();
+        resolve(result);
+      };
+      overlay.querySelector(".at-confirm-btn--cancel").addEventListener("click", () => close(false));
+      overlay.querySelector(".at-confirm-btn--confirm").addEventListener("click", () => close(true));
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) close(false);
+      });
+      document.body.appendChild(overlay);
+    });
+  }
+  /**
+   * Restores the checkbox of a rule to checked after the user cancels the confirmation.
+   */
+  restoreRuleCheckbox(ruleId) {
+    const cb = this.config.container.querySelector(
+      `.at-rule-check[data-rule-id="${CSS.escape(ruleId)}"]`
+    );
+    if (!cb) return;
+    cb.checked = true;
+    cb.closest(".at-rule-row")?.classList.add("at-rule-row--checked");
+  }
+  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;">
@@ -56502,6 +56534,28 @@ var AlarmsTab = class {
       .at-rule-edit-cancel:hover { background: #fecaca; }
       .at-rule-edit-status { font-size: 11px; white-space: nowrap; }
 
+      /* ===== Rules fetch error (Section 2) ===== */
+      .at-rules-error {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 16px 20px;
+      }
+      .at-rules-error-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
+      .at-rules-error-body { flex: 1; min-width: 0; }
+      .at-rules-error-title {
+        font-size: 13px;
+        font-weight: 500;
+        color: #92400e;
+        line-height: 1.5;
+      }
+      .at-rules-error-hint {
+        font-size: 12px;
+        color: #6b7280;
+        margin-top: 4px;
+        line-height: 1.4;
+      }
+
       /* ===== Footer / save ===== */
       .at-footer {
         padding: 12px 20px;
@@ -56538,6 +56592,104 @@ var AlarmsTab = class {
         margin: 0 auto 12px;
       }
       @keyframes at-spin { to { transform: rotate(360deg); } }
+
+      /* ===== RFC-0191: Rule unassign confirmation modal ===== */
+      .at-confirm-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.55);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 99999;
+      }
+      .at-confirm-modal {
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.22);
+        max-width: 440px;
+        width: calc(100% - 32px);
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+      .at-confirm-warning-bar {
+        height: 4px;
+        background: #f59e0b;
+      }
+      .at-confirm-body {
+        display: flex;
+        gap: 14px;
+        padding: 20px 20px 16px;
+      }
+      .at-confirm-icon { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
+      .at-confirm-content { flex: 1; min-width: 0; }
+      .at-confirm-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 8px;
+      }
+      .at-confirm-text {
+        font-size: 13px;
+        color: #374151;
+        line-height: 1.5;
+        margin-bottom: 8px;
+      }
+      .at-confirm-text--sub {
+        color: #6b7280;
+        font-size: 12px;
+        margin-bottom: 0;
+      }
+      .at-confirm-rule-name {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #1a1a1a;
+        background: #f8f9fa;
+        border-radius: 6px;
+        padding: 6px 10px;
+        margin-bottom: 10px;
+        flex-wrap: wrap;
+      }
+      .at-confirm-priority-badge {
+        font-size: 10px;
+        font-weight: 700;
+        padding: 2px 7px;
+        border-radius: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        flex-shrink: 0;
+      }
+      .at-confirm-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10px;
+        padding: 12px 20px;
+        border-top: 1px solid #e9ecef;
+        background: #fafafa;
+      }
+      .at-confirm-btn {
+        border: none;
+        border-radius: 6px;
+        padding: 8px 16px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.15s, opacity 0.15s;
+      }
+      .at-confirm-btn--cancel {
+        background: #f1f3f5;
+        color: #374151;
+      }
+      .at-confirm-btn--cancel:hover { background: #e2e8f0; }
+      .at-confirm-btn--confirm {
+        background: #dc2626;
+        color: #fff;
+      }
+      .at-confirm-btn--confirm:hover { background: #b91c1c; }
     `;
     document.head.appendChild(style);
   }
@@ -56655,22 +56807,42 @@ 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, prefetchedRules, 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,
-        prefetchedAlarms: prefetchedAlarms ?? null
+        prefetchedAlarms: prefetchedAlarms ?? null,
+        prefetchedRules: prefetchedRules ?? null,
+        deviceProfile: this.config.deviceProfile
       });
       await this.alarmsTab.init();
       console.log("[SettingsModalView] RFC-0180: Alarms tab initialized");
@@ -57677,6 +57849,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;
@@ -59567,6 +59745,8 @@ var SettingsController = class {
       gcdrTenantId: params.gcdrTenantId,
       gcdrApiBaseUrl: params.gcdrApiBaseUrl,
       prefetchedBundle: params.prefetchedBundle,
+      prefetchedAlarms: params.prefetchedAlarms,
+      prefetchedRules: params.prefetchedRules,
       // Device timestamps
       createdTime: params.createdTime ?? null,
       lastActivityTime: params.lastActivityTime ?? null
@@ -78314,7 +78494,8 @@ function openUpsellModal(params) {
       label: 120,
       type: 140,
       createdTime: 90,
-      relationTo: 110,
+      relationTo: 120,
+      relationFrom: 110,
       centralId: 80,
       slaveId: 60,
       deviceType: 80,
@@ -78330,7 +78511,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 +79740,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 +79757,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 +79777,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 +79941,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 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 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.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 +80518,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 +80823,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 +82209,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 +82234,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 +82248,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 +82260,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();
@@ -82413,6 +82763,1151 @@ ${errors.slice(0, 5).join("\n")}` + (errors.length > 5 ? `
   renderModal4(container, state6, modalId, t);
 }
 
+// src/components/premium-modals/user-management/tabs/UserListTab.ts
+var UserListTab = class {
+  config;
+  callbacks;
+  el;
+  currentPage = 0;
+  totalPages = 0;
+  searchQuery = "";
+  searchTimer = null;
+  loading = false;
+  users = [];
+  highlightedUserId = null;
+  constructor(config, callbacks) {
+    this.config = config;
+    this.callbacks = callbacks;
+  }
+  render() {
+    this.el = document.createElement("div");
+    this.el.className = "um-tab-content um-user-list";
+    this.el.innerHTML = `
+      <div class="um-list-toolbar">
+        <div class="um-search-wrap">
+          <svg class="um-search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+          </svg>
+          <input type="text" class="um-search-input" placeholder="Buscar por nome ou e-mail..." />
+        </div>
+        <button class="um-btn um-btn--primary um-btn--sm um-new-user-btn">+ Novo Usu\xE1rio</button>
+      </div>
+      <div class="um-table-wrap">
+        <table class="um-table">
+          <thead>
+            <tr>
+              <th>Nome</th>
+              <th>E-mail</th>
+              <th>Perfil</th>
+              <th class="um-col-actions">A\xE7\xF5es</th>
+            </tr>
+          </thead>
+          <tbody class="um-tbody"></tbody>
+        </table>
+        <div class="um-list-empty" style="display:none">Nenhum usu\xE1rio encontrado.</div>
+        <div class="um-list-loading" style="display:none">
+          <span class="um-spinner"></span> Carregando...
+        </div>
+      </div>
+      <div class="um-pagination" style="display:none">
+        <button class="um-btn um-btn--ghost um-btn--sm um-prev-btn">\u2190 Anterior</button>
+        <span class="um-page-info"></span>
+        <button class="um-btn um-btn--ghost um-btn--sm um-next-btn">Pr\xF3xima \u2192</button>
+      </div>
+    `;
+    const searchInput = this.el.querySelector(".um-search-input");
+    searchInput.addEventListener("input", () => {
+      if (this.searchTimer) clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.searchQuery = searchInput.value.trim();
+        this.currentPage = 0;
+        this.fetchUsers();
+      }, 300);
+    });
+    this.el.querySelector(".um-new-user-btn").addEventListener("click", () => {
+      this.callbacks.onSwitchToNewUser();
+    });
+    this.el.querySelector(".um-prev-btn").addEventListener("click", () => {
+      if (this.currentPage > 0) {
+        this.currentPage--;
+        this.fetchUsers();
+      }
+    });
+    this.el.querySelector(".um-next-btn").addEventListener("click", () => {
+      if (this.currentPage < this.totalPages - 1) {
+        this.currentPage++;
+        this.fetchUsers();
+      }
+    });
+    this.fetchUsers();
+    return this.el;
+  }
+  /** Called by NewUserTab/UserDetailTab after a mutation so we refresh the list */
+  refresh(highlightUserId) {
+    if (highlightUserId) this.highlightedUserId = highlightUserId;
+    this.fetchUsers();
+  }
+  async fetchUsers() {
+    if (this.loading) return;
+    this.loading = true;
+    this.setLoading(true);
+    try {
+      const { tbBaseUrl, jwtToken, customerId } = this.config;
+      const q = encodeURIComponent(this.searchQuery);
+      const url = `${tbBaseUrl}/api/customer/${customerId}/users?pageSize=20&page=${this.currentPage}${q ? `&textSearch=${q}` : ""}`;
+      const res = await fetch(url, {
+        headers: { "X-Authorization": `Bearer ${jwtToken}` }
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const page = await res.json();
+      this.users = page.data;
+      this.totalPages = page.totalPages;
+      this.renderRows();
+      this.renderPagination(page);
+    } catch (err) {
+      console.error("[UserListTab] fetchUsers error", err);
+      this.callbacks.showToast("Erro ao carregar usu\xE1rios. Tente novamente.", "error");
+    } finally {
+      this.loading = false;
+      this.setLoading(false);
+    }
+  }
+  renderRows() {
+    const tbody = this.el.querySelector(".um-tbody");
+    const empty = this.el.querySelector(".um-list-empty");
+    tbody.innerHTML = "";
+    if (this.users.length === 0) {
+      empty.style.display = "";
+      return;
+    }
+    empty.style.display = "none";
+    for (const user of this.users) {
+      const tr = document.createElement("tr");
+      tr.dataset.userId = user.id.id;
+      if (this.highlightedUserId === user.id.id) {
+        tr.classList.add("um-row--highlight");
+        this.highlightedUserId = null;
+      }
+      const name = [user.firstName, user.lastName].filter(Boolean).join(" ") || "\u2014";
+      const role = user.authority === "TENANT_ADMIN" ? "Admin" : "Usu\xE1rio";
+      tr.innerHTML = `
+        <td>${this.esc(name)}</td>
+        <td>${this.esc(user.email)}</td>
+        <td><span class="um-badge um-badge--${user.authority === "TENANT_ADMIN" ? "admin" : "user"}">${role}</span></td>
+        <td class="um-col-actions">
+          <button class="um-icon-btn um-edit-btn" title="Editar">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                 stroke-linecap="round" stroke-linejoin="round">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+            </svg>
+          </button>
+          <button class="um-icon-btn um-view-btn" title="Ver Detalhes">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                 stroke-linecap="round" stroke-linejoin="round">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+          </button>
+        </td>
+      `;
+      tr.querySelector(".um-edit-btn").addEventListener("click", () => this.callbacks.onOpenUserDetail(user, true));
+      tr.querySelector(".um-view-btn").addEventListener("click", () => this.callbacks.onOpenUserDetail(user, false));
+      tbody.appendChild(tr);
+    }
+  }
+  renderPagination(page) {
+    const pag = this.el.querySelector(".um-pagination");
+    const info = this.el.querySelector(".um-page-info");
+    const prevBtn = this.el.querySelector(".um-prev-btn");
+    const nextBtn = this.el.querySelector(".um-next-btn");
+    if (page.totalPages <= 1) {
+      pag.style.display = "none";
+      return;
+    }
+    pag.style.display = "";
+    info.textContent = `P\xE1gina ${this.currentPage + 1} de ${page.totalPages}`;
+    prevBtn.disabled = this.currentPage === 0;
+    nextBtn.disabled = !page.hasNext;
+  }
+  setLoading(on) {
+    const loadEl = this.el?.querySelector(".um-list-loading");
+    const tableWrap = this.el?.querySelector(".um-table-wrap");
+    if (loadEl) loadEl.style.display = on ? "" : "none";
+    if (tableWrap) tableWrap.style.opacity = on ? "0.5" : "1";
+  }
+  esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+};
+
+// src/components/premium-modals/user-management/tabs/NewUserTab.ts
+var NewUserTab = class {
+  config;
+  callbacks;
+  el;
+  submitting = false;
+  constructor(config, callbacks) {
+    this.config = config;
+    this.callbacks = callbacks;
+  }
+  render() {
+    this.el = document.createElement("div");
+    this.el.className = "um-tab-content um-new-user";
+    this.el.innerHTML = `
+      <form class="um-form" novalidate>
+        <div class="um-form-row">
+          <div class="um-form-group">
+            <label class="um-label">Nome <span class="um-req">*</span></label>
+            <input type="text" class="um-input" name="firstName" autocomplete="off" />
+            <span class="um-field-error" data-for="firstName"></span>
+          </div>
+          <div class="um-form-group">
+            <label class="um-label">Sobrenome <span class="um-req">*</span></label>
+            <input type="text" class="um-input" name="lastName" autocomplete="off" />
+            <span class="um-field-error" data-for="lastName"></span>
+          </div>
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">E-mail <span class="um-req">*</span></label>
+          <input type="email" class="um-input" name="email" autocomplete="off" />
+          <span class="um-field-error" data-for="email"></span>
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">Telefone</label>
+          <input type="text" class="um-input" name="phone" autocomplete="off" />
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">Descri\xE7\xE3o</label>
+          <textarea class="um-input um-textarea" name="description" rows="2"></textarea>
+        </div>
+        <div class="um-form-group um-form-group--check">
+          <label class="um-check-label">
+            <input type="checkbox" name="sendActivationMail" checked />
+            Enviar e-mail de ativa\xE7\xE3o
+          </label>
+        </div>
+        <div class="um-form-actions">
+          <button type="button" class="um-btn um-btn--ghost um-cancel-btn">Cancelar</button>
+          <button type="submit" class="um-btn um-btn--primary um-submit-btn">Criar Usu\xE1rio</button>
+        </div>
+      </form>
+    `;
+    const form = this.el.querySelector(".um-form");
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.handleSubmit();
+    });
+    this.el.querySelector(".um-cancel-btn").addEventListener("click", () => this.callbacks.onCancel());
+    return this.el;
+  }
+  reset() {
+    const form = this.el?.querySelector(".um-form");
+    if (form) {
+      form.reset();
+      this.el.querySelectorAll(".um-field-error").forEach((el2) => el2.textContent = "");
+    }
+  }
+  validate(data) {
+    const errors = {};
+    if (!data.firstName.trim()) errors.firstName = "Nome \xE9 obrigat\xF3rio.";
+    if (!data.lastName.trim()) errors.lastName = "Sobrenome \xE9 obrigat\xF3rio.";
+    if (!data.email.trim()) {
+      errors.email = "E-mail \xE9 obrigat\xF3rio.";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+      errors.email = "E-mail inv\xE1lido.";
+    }
+    return errors;
+  }
+  showErrors(errors) {
+    this.el.querySelectorAll("[data-for]").forEach((el2) => {
+      el2.textContent = errors[el2.dataset.for] || "";
+    });
+  }
+  async handleSubmit() {
+    if (this.submitting) return;
+    const form = this.el.querySelector(".um-form");
+    const fd = new FormData(form);
+    const data = {
+      firstName: fd.get("firstName") || "",
+      lastName: fd.get("lastName") || "",
+      email: fd.get("email") || "",
+      phone: fd.get("phone") || "",
+      description: fd.get("description") || ""
+    };
+    const sendActivation = fd.get("sendActivationMail") === "on";
+    const errors = this.validate(data);
+    this.showErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+    this.submitting = true;
+    const submitBtn = this.el.querySelector(".um-submit-btn");
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Criando...";
+    try {
+      const { tbBaseUrl, jwtToken, customerId, tenantId } = this.config;
+      const url = `${tbBaseUrl}/api/user?sendActivationMail=${sendActivation}`;
+      const body = {
+        email: data.email,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        phone: data.phone || void 0,
+        authority: "CUSTOMER_USER",
+        customerId: { id: customerId, entityType: "CUSTOMER" },
+        tenantId: { id: tenantId, entityType: "TENANT" },
+        additionalInfo: data.description ? { description: data.description } : void 0
+      };
+      const res = await fetch(url, {
+        method: "POST",
+        headers: {
+          "X-Authorization": `Bearer ${jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const errText = await res.text().catch(() => "");
+        throw new Error(`HTTP ${res.status}${errText ? ": " + errText.slice(0, 120) : ""}`);
+      }
+      const created = await res.json();
+      this.callbacks.showToast(`Usu\xE1rio ${data.firstName} ${data.lastName} criado com sucesso!`, "success");
+      this.reset();
+      this.callbacks.onCreated(created?.id?.id || "");
+    } catch (err) {
+      console.error("[NewUserTab] create user error", err);
+      this.callbacks.showToast("Erro ao criar usu\xE1rio. Verifique os dados e tente novamente.", "error");
+    } finally {
+      this.submitting = false;
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Criar Usu\xE1rio";
+    }
+  }
+};
+
+// src/components/premium-modals/user-management/tabs/ProfileManagementTab.ts
+var ProfileManagementTab = class {
+  config;
+  el;
+  constructor(config) {
+    this.config = config;
+  }
+  render() {
+    this.el = document.createElement("div");
+    this.el.className = "um-tab-content um-profiles";
+    this.el.innerHTML = `
+      <div class="um-profiles-header">
+        <h3 class="um-profiles-title">Perfis configurados para este cliente</h3>
+      </div>
+      <div class="um-profiles-body">
+        <div class="um-profiles-loading">
+          <span class="um-spinner"></span> Carregando perfis...
+        </div>
+        <table class="um-table um-profiles-table" style="display:none">
+          <thead>
+            <tr>
+              <th>Nome do Grupo</th>
+              <th>Tipo</th>
+              <th>Membros</th>
+            </tr>
+          </thead>
+          <tbody class="um-profiles-tbody"></tbody>
+        </table>
+        <div class="um-profiles-empty" style="display:none">Nenhum perfil encontrado.</div>
+        <div class="um-profiles-error" style="display:none"></div>
+      </div>
+      <div class="um-profiles-notice">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/>
+          <line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        Edi\xE7\xE3o de perfis estar\xE1 dispon\xEDvel em vers\xE3o futura.
+      </div>
+    `;
+    this.loadGroups();
+    return this.el;
+  }
+  async loadGroups() {
+    const { tbBaseUrl, jwtToken, customerId } = this.config;
+    const loadingEl = this.el.querySelector(".um-profiles-loading");
+    const tableEl = this.el.querySelector(".um-profiles-table");
+    const emptyEl = this.el.querySelector(".um-profiles-empty");
+    const errorEl = this.el.querySelector(".um-profiles-error");
+    const tbody = this.el.querySelector(".um-profiles-tbody");
+    try {
+      const url = `${tbBaseUrl}/api/entityGroups/CUSTOMER/${customerId}/USER`;
+      const res = await fetch(url, {
+        headers: { "X-Authorization": `Bearer ${jwtToken}` }
+      });
+      loadingEl.style.display = "none";
+      if (!res.ok) {
+        if (res.status === 403 || res.status === 404) {
+          emptyEl.style.display = "";
+          emptyEl.textContent = "Gest\xE3o de grupos n\xE3o dispon\xEDvel nesta edi\xE7\xE3o do ThingsBoard.";
+          return;
+        }
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const groups = await res.json();
+      if (!groups || groups.length === 0) {
+        emptyEl.style.display = "";
+        return;
+      }
+      for (const g of groups) {
+        const tr = document.createElement("tr");
+        const memberCount = g.additionalInfo?.memberCount ?? "\u2014";
+        tr.innerHTML = `
+          <td>${this.esc(g.name || "\u2014")}</td>
+          <td>USER_GROUP</td>
+          <td>${memberCount}</td>
+        `;
+        tbody.appendChild(tr);
+      }
+      tableEl.style.display = "";
+    } catch (err) {
+      console.warn("[ProfileManagementTab] loadGroups error", err);
+      loadingEl.style.display = "none";
+      errorEl.style.display = "";
+      errorEl.textContent = "N\xE3o foi poss\xEDvel carregar os perfis neste momento.";
+    }
+  }
+  esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+};
+
+// src/components/premium-modals/user-management/types.ts
+function buildUserTabLabel(user) {
+  const first = (user.firstName || user.email.split("@")[0] || "?").toUpperCase();
+  const lastInitial = user.lastName ? user.lastName[0].toUpperCase() + "." : "";
+  return lastInitial ? `${first} ${lastInitial}` : first;
+}
+
+// src/components/premium-modals/user-management/tabs/UserDetailTab.ts
+var UserDetailTab = class {
+  config;
+  callbacks;
+  user;
+  el;
+  mode = "view";
+  saving = false;
+  constructor(config, user, callbacks) {
+    this.config = config;
+    this.user = user;
+    this.callbacks = callbacks;
+  }
+  get tabLabel() {
+    return buildUserTabLabel(this.user);
+  }
+  render() {
+    this.el = document.createElement("div");
+    this.el.className = "um-tab-content um-user-detail";
+    this.renderContent();
+    return this.el;
+  }
+  /** Called after tab is re-activated when user already has an open tab */
+  focus() {
+    this.el?.querySelector(".um-detail-card")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  renderContent() {
+    this.el.innerHTML = "";
+    if (this.mode === "view") {
+      this.el.appendChild(this.buildViewMode());
+    } else {
+      this.el.appendChild(this.buildEditMode());
+    }
+  }
+  buildViewMode() {
+    const u = this.user;
+    const name = [u.firstName, u.lastName].filter(Boolean).join(" ") || "\u2014";
+    const role = u.authority === "TENANT_ADMIN" ? "Admin" : "Usu\xE1rio";
+    const createdAt = u.createdTime ? new Date(u.createdTime).toLocaleDateString("pt-BR") : "\u2014";
+    const card = document.createElement("div");
+    card.className = "um-detail-card";
+    card.innerHTML = `
+      <div class="um-detail-section">
+        <div class="um-detail-row"><span class="um-detail-label">Nome</span><span class="um-detail-value">${this.esc(name)}</span></div>
+        <div class="um-detail-row"><span class="um-detail-label">E-mail</span><span class="um-detail-value">${this.esc(u.email)}</span></div>
+        <div class="um-detail-row"><span class="um-detail-label">Telefone</span><span class="um-detail-value">${this.esc(u.phone || "\u2014")}</span></div>
+        <div class="um-detail-row"><span class="um-detail-label">Perfil</span><span class="um-detail-value">
+          <span class="um-badge um-badge--${u.authority === "TENANT_ADMIN" ? "admin" : "user"}">${role}</span>
+        </span></div>
+        <div class="um-detail-row"><span class="um-detail-label">Criado em</span><span class="um-detail-value">${createdAt}</span></div>
+        ${u.additionalInfo?.description ? `<div class="um-detail-row"><span class="um-detail-label">Descri\xE7\xE3o</span><span class="um-detail-value">${this.esc(String(u.additionalInfo.description))}</span></div>` : ""}
+      </div>
+      <div class="um-detail-actions">
+        <button class="um-btn um-btn--secondary um-detail-edit-btn">Editar</button>
+        <button class="um-btn um-btn--ghost um-detail-reset-btn">Redefinir Senha</button>
+        <button class="um-btn um-btn--danger um-detail-delete-btn">Excluir</button>
+      </div>
+    `;
+    card.querySelector(".um-detail-edit-btn").addEventListener("click", () => {
+      this.mode = "edit";
+      this.renderContent();
+    });
+    card.querySelector(".um-detail-reset-btn").addEventListener("click", () => this.handleResetPassword());
+    card.querySelector(".um-detail-delete-btn").addEventListener("click", () => this.handleDelete());
+    return card;
+  }
+  buildEditMode() {
+    const u = this.user;
+    const card = document.createElement("div");
+    card.className = "um-detail-card um-detail-card--edit";
+    card.innerHTML = `
+      <form class="um-form" novalidate>
+        <div class="um-form-row">
+          <div class="um-form-group">
+            <label class="um-label">Nome <span class="um-req">*</span></label>
+            <input type="text" class="um-input" name="firstName" value="${this.esc(u.firstName || "")}" autocomplete="off" />
+            <span class="um-field-error" data-for="firstName"></span>
+          </div>
+          <div class="um-form-group">
+            <label class="um-label">Sobrenome</label>
+            <input type="text" class="um-input" name="lastName" value="${this.esc(u.lastName || "")}" autocomplete="off" />
+          </div>
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">E-mail <span class="um-req">*</span></label>
+          <input type="email" class="um-input" name="email" value="${this.esc(u.email)}" autocomplete="off" />
+          <span class="um-field-error" data-for="email"></span>
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">Telefone</label>
+          <input type="text" class="um-input" name="phone" value="${this.esc(u.phone || "")}" autocomplete="off" />
+        </div>
+        <div class="um-form-group">
+          <label class="um-label">Descri\xE7\xE3o</label>
+          <textarea class="um-input um-textarea" name="description" rows="2">${this.esc(String(u.additionalInfo?.description || ""))}</textarea>
+        </div>
+        <div class="um-form-actions">
+          <button type="button" class="um-btn um-btn--ghost um-cancel-edit-btn">Cancelar</button>
+          <button type="submit" class="um-btn um-btn--primary um-save-btn">Salvar Altera\xE7\xF5es</button>
+        </div>
+      </form>
+    `;
+    card.querySelector(".um-form").addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.handleSave(card);
+    });
+    card.querySelector(".um-cancel-edit-btn").addEventListener("click", () => {
+      this.mode = "view";
+      this.renderContent();
+    });
+    return card;
+  }
+  async handleSave(card) {
+    if (this.saving) return;
+    const form = card.querySelector(".um-form");
+    const fd = new FormData(form);
+    const firstName = (fd.get("firstName") || "").trim();
+    const email = (fd.get("email") || "").trim();
+    const errors = {};
+    if (!firstName) errors.firstName = "Nome \xE9 obrigat\xF3rio.";
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = "E-mail inv\xE1lido.";
+    card.querySelectorAll("[data-for]").forEach((el2) => {
+      el2.textContent = errors[el2.dataset.for] || "";
+    });
+    if (Object.keys(errors).length > 0) return;
+    this.saving = true;
+    const saveBtn = card.querySelector(".um-save-btn");
+    saveBtn.disabled = true;
+    saveBtn.textContent = "Salvando...";
+    try {
+      const { tbBaseUrl, jwtToken } = this.config;
+      const description = (fd.get("description") || "").trim();
+      const updatedUser = {
+        ...this.user,
+        firstName,
+        lastName: (fd.get("lastName") || "").trim() || void 0,
+        email,
+        phone: (fd.get("phone") || "").trim() || void 0,
+        additionalInfo: {
+          ...this.user.additionalInfo,
+          description: description || void 0
+        }
+      };
+      const res = await fetch(`${tbBaseUrl}/api/user`, {
+        method: "POST",
+        headers: {
+          "X-Authorization": `Bearer ${jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(updatedUser)
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const saved = await res.json();
+      this.user = saved;
+      this.mode = "view";
+      this.renderContent();
+      this.callbacks.showToast("Usu\xE1rio atualizado com sucesso!", "success");
+      this.callbacks.onUpdated(saved);
+    } catch (err) {
+      console.error("[UserDetailTab] handleSave error", err);
+      this.callbacks.showToast("Erro ao salvar. Tente novamente.", "error");
+    } finally {
+      this.saving = false;
+      saveBtn.disabled = false;
+      saveBtn.textContent = "Salvar Altera\xE7\xF5es";
+    }
+  }
+  handleResetPassword() {
+    this.showConfirmDialog({
+      title: "Redefinir Senha",
+      message: `Enviar e-mail de redefini\xE7\xE3o de senha para <strong>${this.esc(this.user.email)}</strong>?`,
+      confirmLabel: "Enviar E-mail",
+      confirmClass: "um-btn--secondary",
+      onConfirm: async () => {
+        try {
+          const { tbBaseUrl, jwtToken } = this.config;
+          const res = await fetch(`${tbBaseUrl}/api/noauth/resetPasswordByEmail`, {
+            method: "POST",
+            headers: {
+              "X-Authorization": `Bearer ${jwtToken}`,
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ email: this.user.email })
+          });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          this.callbacks.showToast("E-mail de redefini\xE7\xE3o de senha enviado!", "success");
+        } catch (err) {
+          console.error("[UserDetailTab] resetPassword error", err);
+          this.callbacks.showToast("Erro ao enviar e-mail de redefini\xE7\xE3o.", "error");
+        }
+      }
+    });
+  }
+  handleDelete() {
+    const name = [this.user.firstName, this.user.lastName].filter(Boolean).join(" ") || this.user.email;
+    this.showConfirmDialog({
+      title: "Excluir Usu\xE1rio",
+      message: `Tem certeza que deseja excluir o usu\xE1rio <strong>${this.esc(name)}</strong>? Esta a\xE7\xE3o n\xE3o pode ser desfeita.`,
+      confirmLabel: "Excluir",
+      confirmClass: "um-btn--danger",
+      onConfirm: async () => {
+        try {
+          const { tbBaseUrl, jwtToken } = this.config;
+          const res = await fetch(`${tbBaseUrl}/api/user/${this.user.id.id}`, {
+            method: "DELETE",
+            headers: { "X-Authorization": `Bearer ${jwtToken}` }
+          });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          this.callbacks.showToast(`Usu\xE1rio ${name} exclu\xEDdo.`, "success");
+          this.callbacks.onDeleted();
+        } catch (err) {
+          console.error("[UserDetailTab] delete error", err);
+          this.callbacks.showToast("Erro ao excluir usu\xE1rio. Verifique as permiss\xF5es.", "error");
+        }
+      }
+    });
+  }
+  showConfirmDialog(opts) {
+    const overlay = document.createElement("div");
+    overlay.className = "um-confirm-overlay";
+    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100001;";
+    const modal = document.createElement("div");
+    modal.className = "um-confirm-modal";
+    modal.style.cssText = "background:#1e2433;border:1px solid #3a4160;border-radius:12px;padding:24px;max-width:440px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,0.5);";
+    modal.innerHTML = `
+      <h4 style="margin:0 0 12px;font-size:16px;font-weight:600;color:#e2e8f0;">${opts.title}</h4>
+      <p style="margin:0 0 20px;font-size:14px;color:#94a3b8;line-height:1.5;">${opts.message}</p>
+      <div style="display:flex;gap:8px;justify-content:flex-end;">
+        <button class="um-btn um-btn--ghost um-confirm-cancel">Cancelar</button>
+        <button class="um-btn ${opts.confirmClass} um-confirm-ok">${opts.confirmLabel}</button>
+      </div>
+    `;
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    const close = () => overlay.remove();
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    modal.querySelector(".um-confirm-cancel").addEventListener("click", close);
+    modal.querySelector(".um-confirm-ok").addEventListener("click", async () => {
+      const btn = modal.querySelector(".um-confirm-ok");
+      btn.disabled = true;
+      btn.textContent = "...";
+      close();
+      await opts.onConfirm();
+    });
+  }
+  esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+};
+
+// src/components/premium-modals/user-management/UserManagementModalView.ts
+var UserManagementModalView = class {
+  config;
+  backdrop;
+  modalEl;
+  tabBarEl;
+  contentEl;
+  toastEl;
+  tabs = [];
+  activeTabKey = "user-list";
+  userListTab;
+  newUserTab;
+  constructor(config) {
+    this.config = config;
+  }
+  render() {
+    this.injectStyles();
+    this.buildDOM();
+    this.buildTabs();
+    this.activateTab("user-list");
+    document.body.appendChild(this.backdrop);
+  }
+  destroy() {
+    this.backdrop?.remove();
+  }
+  showToast(msg, type = "success") {
+    if (!this.toastEl) return;
+    this.toastEl.textContent = msg;
+    this.toastEl.className = `um-toast um-toast--${type} um-toast--visible`;
+    setTimeout(() => {
+      this.toastEl.classList.remove("um-toast--visible");
+    }, 3500);
+  }
+  // ── DOM ──────────────────────────────────────────────────────────────────────
+  buildDOM() {
+    this.backdrop = document.createElement("div");
+    this.backdrop.className = "um-backdrop";
+    this.modalEl = document.createElement("div");
+    this.modalEl.className = "um-modal";
+    const customerName = this.config.customerName || "";
+    const header = document.createElement("div");
+    header.className = "um-modal-header";
+    header.innerHTML = `
+      <div class="um-modal-header-left">
+        <span class="um-modal-icon">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+            <circle cx="9" cy="7" r="4"/>
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+          </svg>
+        </span>
+        <span class="um-modal-title">Gest\xE3o de Usu\xE1rios</span>
+        ${customerName ? `<span class="um-modal-subtitle">\xB7 ${this.esc(customerName)}</span>` : ""}
+      </div>
+      <button class="um-modal-close" title="Fechar">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+    `;
+    header.querySelector(".um-modal-close").addEventListener("click", () => this.close());
+    this.tabBarEl = document.createElement("div");
+    this.tabBarEl.className = "um-tab-bar";
+    this.contentEl = document.createElement("div");
+    this.contentEl.className = "um-modal-content";
+    this.toastEl = document.createElement("div");
+    this.toastEl.className = "um-toast";
+    this.modalEl.appendChild(header);
+    this.modalEl.appendChild(this.tabBarEl);
+    this.modalEl.appendChild(this.contentEl);
+    this.modalEl.appendChild(this.toastEl);
+    this.backdrop.appendChild(this.modalEl);
+    this.backdrop.addEventListener("click", (e) => {
+      if (e.target === this.backdrop) this.close();
+    });
+  }
+  close() {
+    this.config.onClose();
+    this.destroy();
+  }
+  // ── Tabs ─────────────────────────────────────────────────────────────────────
+  buildTabs() {
+    const config = this.config;
+    this.userListTab = new UserListTab(config, {
+      onOpenUserDetail: (user, editMode) => this.openUserDetailTab(user, editMode),
+      onSwitchToNewUser: () => this.activateTab("new-user"),
+      showToast: (msg, type) => this.showToast(msg, type)
+    });
+    this.tabs.push({
+      key: "user-list",
+      label: "Usu\xE1rios",
+      closeable: false,
+      getEl: () => this.userListTab.render()
+    });
+    this.newUserTab = new NewUserTab(config, {
+      onCreated: (userId) => {
+        this.activateTab("user-list");
+        this.userListTab.refresh(userId);
+      },
+      onCancel: () => this.activateTab("user-list"),
+      showToast: (msg, type) => this.showToast(msg, type)
+    });
+    this.tabs.push({
+      key: "new-user",
+      label: "Novo Usu\xE1rio",
+      closeable: false,
+      getEl: () => this.newUserTab.render(),
+      onActivate: () => this.newUserTab.reset()
+    });
+    const profileTab = new ProfileManagementTab(config);
+    this.tabs.push({
+      key: "profiles",
+      label: "Perfis",
+      closeable: false,
+      getEl: () => profileTab.render()
+    });
+    this.rebuildTabBar();
+  }
+  openUserDetailTab(user, editMode = false) {
+    const existingKey = `user-detail-${user.id.id}`;
+    const existing = this.tabs.find((t) => t.key === existingKey);
+    if (existing) {
+      this.activateTab(existingKey);
+      existing.detailTab?.focus();
+      return;
+    }
+    const detailTab = new UserDetailTab(this.config, user, {
+      onDeleted: () => {
+        this.removeTab(existingKey);
+        this.userListTab.refresh();
+      },
+      onUpdated: (updated) => {
+        this.userListTab.refresh(updated.id.id);
+        const entry = this.tabs.find((t) => t.key === existingKey);
+        if (entry) {
+          entry.label = detailTab.tabLabel;
+          this.rebuildTabBar();
+        }
+      },
+      showToast: (msg, type) => this.showToast(msg, type)
+    });
+    let el2 = null;
+    this.tabs.push({
+      key: existingKey,
+      label: detailTab.tabLabel,
+      closeable: true,
+      userId: user.id.id,
+      detailTab,
+      getEl: () => {
+        el2 = detailTab.render();
+        if (editMode) {
+          setTimeout(() => el2?.querySelector(".um-detail-edit-btn")?.click(), 0);
+        }
+        return el2;
+      }
+    });
+    this.rebuildTabBar();
+    this.activateTab(existingKey);
+  }
+  removeTab(key) {
+    const idx = this.tabs.findIndex((t) => t.key === key);
+    if (idx === -1) return;
+    this.tabs.splice(idx, 1);
+    if (this.activeTabKey === key) {
+      this.activateTab("user-list");
+    } else {
+      this.rebuildTabBar();
+    }
+  }
+  activateTab(key) {
+    const entry = this.tabs.find((t) => t.key === key);
+    if (!entry) return;
+    this.activeTabKey = key;
+    entry.onActivate?.();
+    this.contentEl.innerHTML = "";
+    this.contentEl.appendChild(entry.getEl());
+    this.rebuildTabBar();
+  }
+  rebuildTabBar() {
+    this.tabBarEl.innerHTML = "";
+    for (const tab of this.tabs) {
+      const btn = document.createElement("button");
+      btn.className = `um-tab-btn${tab.key === this.activeTabKey ? " um-tab-btn--active" : ""}`;
+      btn.textContent = tab.label;
+      btn.addEventListener("click", () => this.activateTab(tab.key));
+      if (tab.closeable) {
+        const close = document.createElement("span");
+        close.className = "um-tab-close";
+        close.innerHTML = "\u2715";
+        close.title = "Fechar aba";
+        close.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.removeTab(tab.key);
+        });
+        btn.appendChild(close);
+      }
+      this.tabBarEl.appendChild(btn);
+    }
+  }
+  // ── Styles ───────────────────────────────────────────────────────────────────
+  injectStyles() {
+    if (document.getElementById("um-styles")) return;
+    const style = document.createElement("style");
+    style.id = "um-styles";
+    style.textContent = `
+/* === UserManagement Modal === */
+.um-backdrop {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.55);
+  backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 99999;
+  padding: 16px;
+}
+.um-modal {
+  background: #131929;
+  border: 1px solid #2a3352;
+  border-radius: 14px;
+  width: 92vw; max-width: 960px;
+  aspect-ratio: 16/9;
+  display: flex; flex-direction: column;
+  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
+  overflow: hidden;
+  position: relative;
+}
+@media (max-height: 600px) { .um-modal { aspect-ratio: unset; height: 90vh; } }
+
+/* Header */
+.um-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid #1e2d4a;
+  flex-shrink: 0;
+}
+.um-modal-header-left { display: flex; align-items: center; gap: 10px; }
+.um-modal-icon { color: #60a5fa; display: flex; }
+.um-modal-title { font-size: 15px; font-weight: 600; color: #e2e8f0; }
+.um-modal-subtitle { font-size: 13px; color: #64748b; }
+.um-modal-close {
+  background: none; border: none; cursor: pointer;
+  color: #64748b; padding: 4px; border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+.um-modal-close:hover { color: #e2e8f0; background: #1e2d4a; }
+
+/* Tab bar */
+.um-tab-bar {
+  display: flex; gap: 2px; padding: 0 16px;
+  border-bottom: 1px solid #1e2d4a; flex-shrink: 0;
+  overflow-x: auto; scrollbar-width: none;
+}
+.um-tab-bar::-webkit-scrollbar { display: none; }
+.um-tab-btn {
+  background: none; border: none; cursor: pointer;
+  color: #64748b; font-size: 12px; font-weight: 500;
+  padding: 10px 14px; border-bottom: 2px solid transparent;
+  white-space: nowrap; display: flex; align-items: center; gap: 6px;
+  transition: color 0.15s, border-color 0.15s;
+}
+.um-tab-btn:hover { color: #94a3b8; }
+.um-tab-btn--active { color: #60a5fa; border-bottom-color: #60a5fa; }
+.um-tab-close {
+  font-size: 9px; color: #475569; padding: 2px 3px;
+  border-radius: 3px; line-height: 1; cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.um-tab-close:hover { background: #3a4160; color: #e2e8f0; }
+
+/* Content */
+.um-modal-content {
+  flex: 1; overflow-y: auto; padding: 20px;
+  scrollbar-width: thin; scrollbar-color: #2a3352 transparent;
+}
+.um-modal-content::-webkit-scrollbar { width: 6px; }
+.um-modal-content::-webkit-scrollbar-thumb { background: #2a3352; border-radius: 3px; }
+
+/* Toast */
+.um-toast {
+  position: absolute; bottom: 16px; right: 16px;
+  background: #1e3a2e; border: 1px solid #22c55e;
+  color: #4ade80; font-size: 12px; font-weight: 500;
+  padding: 10px 16px; border-radius: 8px;
+  opacity: 0; transform: translateY(8px);
+  transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none; z-index: 10;
+  max-width: 300px;
+}
+.um-toast--error { background: #3b1a1a; border-color: #ef4444; color: #f87171; }
+.um-toast--visible { opacity: 1; transform: translateY(0); }
+
+/* Tab content */
+.um-tab-content { min-height: 100%; }
+
+/* Toolbar */
+.um-list-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; margin-bottom: 16px;
+}
+.um-search-wrap {
+  position: relative; flex: 1; max-width: 360px;
+}
+.um-search-icon {
+  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
+  color: #475569; pointer-events: none;
+}
+.um-search-input {
+  width: 100%; background: #1a2235; border: 1px solid #2a3352;
+  border-radius: 8px; padding: 7px 12px 7px 32px;
+  color: #e2e8f0; font-size: 13px; outline: none;
+  transition: border-color 0.15s;
+}
+.um-search-input:focus { border-color: #3b5bdb; }
+.um-search-input::placeholder { color: #475569; }
+
+/* Table */
+.um-table-wrap { position: relative; overflow-x: auto; }
+.um-table {
+  width: 100%; border-collapse: collapse; font-size: 13px;
+}
+.um-table th {
+  text-align: left; padding: 8px 12px;
+  color: #64748b; font-weight: 500; font-size: 11px;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  border-bottom: 1px solid #1e2d4a;
+}
+.um-table td {
+  padding: 10px 12px; color: #c4ccd9;
+  border-bottom: 1px solid #0f1829;
+}
+.um-table tr:hover td { background: #0f1829; }
+.um-col-actions { width: 80px; text-align: center; }
+.um-row--highlight td { background: #0e2a1e !important; }
+
+/* List states */
+.um-list-empty, .um-list-loading, .um-profiles-loading,
+.um-profiles-empty, .um-profiles-error {
+  text-align: center; padding: 32px 16px; color: #475569; font-size: 13px;
+}
+
+/* Pagination */
+.um-pagination {
+  display: flex; align-items: center; justify-content: center;
+  gap: 16px; margin-top: 16px; font-size: 12px; color: #64748b;
+}
+
+/* Icon buttons */
+.um-icon-btn {
+  background: none; border: none; cursor: pointer;
+  color: #475569; padding: 5px; border-radius: 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+.um-icon-btn:hover { color: #60a5fa; background: #1a2a45; }
+
+/* Buttons */
+.um-btn {
+  border: none; cursor: pointer; font-size: 13px; font-weight: 500;
+  padding: 8px 16px; border-radius: 8px; transition: opacity 0.15s, background 0.15s;
+}
+.um-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.um-btn--primary { background: #3b5bdb; color: #fff; }
+.um-btn--primary:hover:not(:disabled) { background: #4c6ef5; }
+.um-btn--secondary { background: #1e2d4a; color: #93c5fd; border: 1px solid #2a3b60; }
+.um-btn--secondary:hover:not(:disabled) { background: #253456; }
+.um-btn--ghost { background: transparent; color: #64748b; border: 1px solid #2a3352; }
+.um-btn--ghost:hover:not(:disabled) { background: #1a2235; color: #94a3b8; }
+.um-btn--danger { background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b; }
+.um-btn--danger:hover:not(:disabled) { background: #991b1b; }
+.um-btn--sm { padding: 6px 12px; font-size: 12px; }
+
+/* Badges */
+.um-badge {
+  display: inline-block; font-size: 10px; font-weight: 600;
+  padding: 2px 8px; border-radius: 9999px;
+}
+.um-badge--admin { background: #1e3a5f; color: #60a5fa; }
+.um-badge--user  { background: #1a2d24; color: #4ade80; }
+
+/* Forms */
+.um-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
+.um-form-row { display: flex; gap: 12px; }
+.um-form-row .um-form-group { flex: 1; }
+.um-form-group { display: flex; flex-direction: column; gap: 5px; }
+.um-form-group--check { flex-direction: row; align-items: center; }
+.um-label { font-size: 12px; font-weight: 500; color: #94a3b8; }
+.um-req { color: #f87171; }
+.um-input {
+  background: #1a2235; border: 1px solid #2a3352;
+  border-radius: 8px; padding: 8px 12px;
+  color: #e2e8f0; font-size: 13px; outline: none; width: 100%;
+  transition: border-color 0.15s; box-sizing: border-box;
+}
+.um-input:focus { border-color: #3b5bdb; }
+.um-textarea { resize: vertical; min-height: 64px; }
+.um-field-error { font-size: 11px; color: #f87171; min-height: 14px; }
+.um-check-label { font-size: 13px; color: #94a3b8; cursor: pointer; display: flex; align-items: center; gap: 8px; }
+.um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
+
+/* Detail card */
+.um-detail-card { max-width: 560px; }
+.um-detail-section { border: 1px solid #1e2d4a; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
+.um-detail-row {
+  display: flex; align-items: flex-start; gap: 16px;
+  padding: 11px 16px; border-bottom: 1px solid #0f1829;
+}
+.um-detail-row:last-child { border-bottom: none; }
+.um-detail-label { width: 100px; font-size: 12px; color: #475569; font-weight: 500; flex-shrink: 0; padding-top: 1px; }
+.um-detail-value { font-size: 13px; color: #c4ccd9; flex: 1; }
+.um-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* Profiles */
+.um-profiles-header { margin-bottom: 16px; }
+.um-profiles-title { font-size: 14px; font-weight: 600; color: #c4ccd9; margin: 0; }
+.um-profiles-notice {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 16px; padding: 10px 14px;
+  background: #1a2537; border: 1px solid #2a3b60; border-radius: 8px;
+  font-size: 12px; color: #64748b;
+}
+
+/* Spinner */
+.um-spinner {
+  display: inline-block; width: 14px; height: 14px;
+  border: 2px solid #2a3352; border-top-color: #60a5fa;
+  border-radius: 50%; animation: um-spin 0.7s linear infinite;
+}
+@keyframes um-spin { to { transform: rotate(360deg); } }
+    `;
+    document.head.appendChild(style);
+  }
+  esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+};
+
+// src/components/premium-modals/user-management/UserManagementController.ts
+var UserManagementController = class {
+  view;
+  constructor(params) {
+    const config = {
+      customerId: params.customerId,
+      tenantId: params.tenantId,
+      customerName: params.customerName || "",
+      jwtToken: params.jwtToken,
+      tbBaseUrl: params.tbBaseUrl.replace(/\/$/, ""),
+      currentUser: params.currentUser,
+      onClose: () => {
+      }
+    };
+    this.view = new UserManagementModalView(config);
+  }
+  show() {
+    this.view.render();
+  }
+};
+
+// src/components/premium-modals/user-management/openUserManagementModal.ts
+function openUserManagementModal(params) {
+  if (!params.jwtToken) {
+    console.warn("[openUserManagementModal] jwtToken is required");
+    return;
+  }
+  if (!params.customerId) {
+    console.warn("[openUserManagementModal] customerId is required");
+    return;
+  }
+  const controller = new UserManagementController(params);
+  controller.show();
+}
+
 // src/components/menu/types.ts
 var DEFAULT_LIGHT_THEME3 = {
   // Tabs
@@ -125426,8 +126921,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 +127221,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 +127252,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");
@@ -127378,6 +128873,7 @@ var version = package_default.version || "0.0.0";
   openTemperatureSettingsModal,
   openTutorialModal,
   openUpsellModal,
+  openUserManagementModal,
   openWelcomeModal,
   parseInputDateToDate,
   periodKey,