myio-js-library 0.1.486 → 0.1.489

package/dist/index.cjs

@@ -1159,7 +1159,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.486",
+  version: "0.1.489",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -62014,7 +62014,7 @@ var SettingsModalView = class {
         <div class="customer-name-container">
           <div class="customer-info-row">
             <div class="device-type-icon-wrapper">
-              ${this.getDeviceTypeIcon(deviceType)}
+              ${this.getDeviceTypeIcon(deviceType ?? "")}
             </div>
             <div class="customer-info-content">
               <div class="customer-name-label">Shopping</div>
@@ -62620,7 +62620,7 @@ var SettingsModalView = class {
       not_installed: { text: "N\xE3o instalado", color: "#94a3b8" },
       unknown: { text: "Sem informa\xE7\xE3o", color: "#94a3b8" }
     };
-    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus) || ""] || {
+    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus ?? "") || ""] || {
       text: "Desconhecido",
       color: "#6b7280"
     };
@@ -62713,6 +62713,13 @@ var SettingsModalView = class {
         }
         
         /* Header handled by ModalHeader (RFC-0121) */
+        .myio-device-settings-modal .myio-modal-header__title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .myio-device-settings-modal .myio-modal-header__icon {
+          font-size: 15px;
+        }
 
         .myio-device-settings-modal.is-maximized {
           width: 100vw !important;
@@ -88352,6 +88359,9 @@ var UserListTab = class {
   loading = false;
   users = [];
   highlightedUserId = null;
+  gcdrConfigs = /* @__PURE__ */ new Map();
+  gcdrSyncing = /* @__PURE__ */ new Set();
+  syncTooltipEl = null;
   constructor(config, callbacks) {
     this.config = config;
     this.callbacks = callbacks;
@@ -88377,6 +88387,8 @@ var UserListTab = class {
               <th>Nome</th>
               <th>E-mail</th>
               <th>Perfil</th>
+              <th>Status</th>
+              <th class="um-col-gcdr">GCDR</th>
               <th class="um-col-actions">A\xE7\xF5es</th>
             </tr>
           </thead>
@@ -88442,6 +88454,7 @@ var UserListTab = class {
       this.totalPages = page.totalPages;
       this.renderRows();
       this.renderPagination(page);
+      this.fetchGcdrConfigsBatch();
     } catch (err) {
       console.error("[UserListTab] fetchUsers error", err);
       this.callbacks.showToast("Erro ao carregar usu\xE1rios. Tente novamente.", "error");
@@ -88468,11 +88481,36 @@ var UserListTab = class {
       }
       const name = [user.firstName, user.lastName].filter(Boolean).join(" ") || "\u2014";
       const role = user.authority === "TENANT_ADMIN" ? "Admin" : "Usu\xE1rio";
+      const statusBadge = this.buildStatusBadge(user);
+      const uid2 = user.id.id;
       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>${statusBadge}</td>
+        <td class="um-col-gcdr">
+          <span class="um-sync-icon um-sync-icon--loading" data-sync-uid="${uid2}">
+            <span class="um-spinner" style="width:12px;height:12px;border-width:1.5px;display:block;margin:0 auto;"></span>
+          </span>
+          <button class="um-icon-btn um-force-sync-btn" title="Sincronizar com GCDR" style="margin-left:2px;">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                 stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="23 4 23 10 17 10"/>
+              <polyline points="1 20 1 14 7 14"/>
+              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+            </svg>
+          </button>
+        </td>
         <td class="um-col-actions">
+          <button class="um-icon-btn um-assign-btn" title="Ver Fun\xE7\xF5es / Pap\xE9is" style="margin-right:4px;">
+            <svg width="13" height="13" 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>
+          </button>
           <button class="um-icon-btn um-detail-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">
@@ -88482,6 +88520,11 @@ var UserListTab = class {
         </td>
       `;
       tr.querySelector(".um-detail-btn").addEventListener("click", () => this.callbacks.onOpenUserDetail(user, false));
+      tr.querySelector(".um-assign-btn").addEventListener("click", (e) => this.showAssignmentsPopup(user, e.currentTarget));
+      tr.querySelector(".um-force-sync-btn").addEventListener("click", () => this.syncUserToGCDR(user));
+      const syncIcon = tr.querySelector(".um-sync-icon");
+      syncIcon.addEventListener("mouseenter", (e) => this.showSyncTooltip(user, e.currentTarget));
+      syncIcon.addEventListener("mouseleave", () => this.hideSyncTooltip());
       tbody.appendChild(tr);
     }
   }
@@ -88505,9 +88548,321 @@ var UserListTab = class {
     if (loadEl) loadEl.style.display = on ? "" : "none";
     if (tableWrap) tableWrap.style.opacity = on ? "0.5" : "1";
   }
+  buildStatusBadge(user) {
+    const enabled = user.additionalInfo?.userCredentialsEnabled;
+    if (enabled === false) {
+      return `<span class="um-badge um-badge--blocked">Bloqueado</span>`;
+    }
+    return `<span class="um-badge um-badge--active">Ativo</span>`;
+  }
+  gcdrHeaders() {
+    const orch = window.MyIOOrchestrator;
+    return {
+      "Content-Type": "application/json",
+      "X-API-Key": orch?.gcdrApiKey || "",
+      "X-Tenant-ID": orch?.gcdrTenantId || ""
+    };
+  }
+  gcdrBase() {
+    return window.MyIOOrchestrator?.gcdrApiBaseUrl || "";
+  }
+  unwrapList(json) {
+    if (Array.isArray(json)) return json;
+    const j = json;
+    if (j?.data && typeof j.data === "object") {
+      const d = j.data;
+      if (Array.isArray(d.items)) return d.items;
+      if (Array.isArray(d)) return d;
+    }
+    if (Array.isArray(j?.items)) return j.items;
+    return [];
+  }
+  async showAssignmentsPopup(user, anchor) {
+    document.querySelector(".um-assign-popup")?.remove();
+    const popup = document.createElement("div");
+    popup.className = "um-assign-popup";
+    popup.setAttribute("data-theme", this.config.theme || "light");
+    const displayName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.email;
+    popup.innerHTML = `
+      <div class="um-assign-popup-header">
+        <span class="um-assign-popup-title">\u{1F511} Fun\xE7\xF5es \u2014 ${this.esc(displayName)}</span>
+        <button class="um-assign-popup-close" type="button">\u2715</button>
+      </div>
+      <div class="um-assign-popup-body">
+        <div class="um-assign-popup-loading" style="font-size:12px;color:var(--um-text-muted);padding:8px 0;">
+          <span class="um-spinner" style="display:inline-block;"></span> Carregando...
+        </div>
+      </div>
+    `;
+    document.body.appendChild(popup);
+    const rect = anchor.getBoundingClientRect();
+    const popupW = 320;
+    const left = Math.min(rect.right + 8, window.innerWidth - popupW - 12);
+    popup.style.top = `${Math.max(rect.top - 10, 8)}px`;
+    popup.style.left = `${left}px`;
+    const close = () => popup.remove();
+    popup.querySelector(".um-assign-popup-close").addEventListener("click", close);
+    const outsideHandler = (e) => {
+      if (!popup.contains(e.target) && e.target !== anchor) {
+        close();
+        document.removeEventListener("click", outsideHandler, true);
+      }
+    };
+    setTimeout(() => document.addEventListener("click", outsideHandler, true), 50);
+    const body = popup.querySelector(".um-assign-popup-body");
+    const base = this.gcdrBase();
+    if (!base) {
+      body.innerHTML = `<div style="font-size:12px;color:var(--um-toast-err-text);padding:8px 0;">GCDR n\xE3o configurado.</div>`;
+      return;
+    }
+    try {
+      const res = await fetch(`${base}/authorization/users/${user.id.id}/assignments`, { headers: this.gcdrHeaders() });
+      let assignments = [];
+      if (res.ok) {
+        const json = await res.json();
+        assignments = Array.isArray(json) ? json : json.assignments ?? [];
+      }
+      if (assignments.length === 0) {
+        body.innerHTML = `<div style="font-size:12px;color:var(--um-text-faint);padding:8px 0;">Nenhuma fun\xE7\xE3o atribu\xEDda.</div>`;
+        return;
+      }
+      const statusColors = {
+        active: "var(--um-badge-active-text)",
+        expired: "var(--um-badge-blocked-text)",
+        inactive: "var(--um-text-faint)"
+      };
+      body.innerHTML = assignments.map((a) => {
+        const scopeLabel = a.scope === "*" ? "* (global)" : a.scope.startsWith("customer:") ? `Cliente (${a.scope.replace("customer:", "").slice(0, 8)}...)` : a.scope.startsWith("asset:") ? `Asset (${a.scope.replace("asset:", "").slice(0, 8)}...)` : this.esc(a.scope);
+        const expires = a.expiresAt ? new Date(a.expiresAt).toLocaleDateString("pt-BR") : null;
+        const color = statusColors[a.status] || "var(--um-text-faint)";
+        return `
+          <div class="um-assign-row">
+            <span class="um-assign-role">${this.esc(a.roleDisplayName || a.roleKey)}</span>
+            <span class="um-assign-meta">
+              Escopo: ${scopeLabel}
+              \xB7 <span style="color:${color};font-weight:600;">${a.status}</span>
+              ${expires ? ` \xB7 Expira ${expires}` : ""}
+            </span>
+          </div>`;
+      }).join("");
+    } catch {
+      body.innerHTML = `<div style="font-size:12px;color:var(--um-toast-err-text);padding:8px 0;">Erro ao carregar.</div>`;
+    }
+  }
   esc(s) {
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
+  // ── GCDR Sync Column ─────────────────────────────────────────────────────────
+  async fetchGcdrConfigsBatch() {
+    if (this.users.length === 0) return;
+    const { tbBaseUrl, jwtToken } = this.config;
+    await Promise.allSettled(this.users.map(async (user) => {
+      const uid2 = user.id.id;
+      try {
+        const res = await fetch(
+          `${tbBaseUrl}/api/plugins/telemetry/USER/${uid2}/values/attributes/SERVER_SCOPE?keys=gcdrUserConfigs`,
+          { headers: { "X-Authorization": `Bearer ${jwtToken}` } }
+        );
+        let cfg = null;
+        if (res.ok) {
+          const attrs = await res.json();
+          const entry = attrs.find((a) => a.key === "gcdrUserConfigs");
+          if (entry?.value && typeof entry.value === "object") {
+            cfg = entry.value;
+          }
+        }
+        this.gcdrConfigs.set(uid2, cfg);
+        this.updateSyncCell(uid2, cfg ? cfg.lastSyncResult ?? "none" : "none", cfg);
+      } catch {
+        this.updateSyncCell(uid2, "none", null);
+      }
+    }));
+  }
+  updateSyncCell(userId, state6, cfg = null) {
+    const iconEl = this.el?.querySelector(`.um-sync-icon[data-sync-uid="${userId}"]`);
+    if (!iconEl) return;
+    iconEl.className = "um-sync-icon";
+    if (state6 === "loading" || state6 === "syncing") {
+      iconEl.innerHTML = `<span class="um-spinner" style="width:12px;height:12px;border-width:1.5px;display:block;margin:0 auto;"></span>`;
+      return;
+    }
+    const gcdrStatus = cfg?.gcdrStatus;
+    let dotClass = "um-sync-dot--none";
+    let dotTitle = "Nunca sincronizado";
+    if (state6 === "success") {
+      dotClass = gcdrStatus === "ACTIVE" ? "um-sync-dot--active" : gcdrStatus === "INACTIVE" || gcdrStatus === "LOCKED" ? "um-sync-dot--warn" : "um-sync-dot--ok";
+      dotTitle = `GCDR: ${gcdrStatus ?? "OK"}`;
+    } else if (state6 === "error") {
+      dotClass = "um-sync-dot--err";
+      dotTitle = cfg?.lastError ?? "Erro";
+    }
+    iconEl.innerHTML = `<span class="um-sync-dot ${dotClass}" title="${this.esc(dotTitle)}"></span>`;
+  }
+  showSyncTooltip(user, anchor) {
+    this.hideSyncTooltip();
+    const uid2 = user.id.id;
+    const cfg = this.gcdrConfigs.get(uid2);
+    const tooltip = document.createElement("div");
+    tooltip.className = "um-sync-tooltip";
+    tooltip.setAttribute("data-theme", this.config.theme || "light");
+    this.syncTooltipEl = tooltip;
+    const syncing = this.gcdrSyncing.has(uid2);
+    const displayName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.email;
+    let bodyHtml;
+    if (syncing) {
+      bodyHtml = `<div class="um-sync-tooltip-row" style="justify-content:center;padding:8px 0;">
+        <span class="um-spinner" style="width:13px;height:13px;"></span>&nbsp;Sincronizando...
+      </div>`;
+    } else if (!cfg) {
+      bodyHtml = `<div class="um-sync-tooltip-row um-sync-tooltip-row--muted">Nunca sincronizado com GCDR.</div>`;
+    } else {
+      const syncedAt = cfg.syncedAt ? new Date(cfg.syncedAt).toLocaleString("pt-BR") : "\u2014";
+      const updatedAt = cfg.updatedAt ? new Date(cfg.updatedAt).toLocaleString("pt-BR") : "\u2014";
+      const resultColor = cfg.lastSyncResult === "success" ? "var(--um-badge-active-text)" : "var(--um-badge-blocked-text)";
+      bodyHtml = `
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">GCDR ID</span>
+          <span class="um-sync-tooltip-value" style="font-family:monospace;font-size:10px;">${cfg.gcdrUserId ? cfg.gcdrUserId.slice(0, 16) + "\u2026" : "\u2014"}</span>
+        </div>
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">Status GCDR</span>
+          <span class="um-sync-tooltip-value">${cfg.gcdrStatus ?? "\u2014"}</span>
+        </div>
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">\xDAltimo sync</span>
+          <span class="um-sync-tooltip-value">${syncedAt}</span>
+        </div>
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">Atualizado</span>
+          <span class="um-sync-tooltip-value">${updatedAt}</span>
+        </div>
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">Qtd syncs</span>
+          <span class="um-sync-tooltip-value">${cfg.syncCount ?? 0}</span>
+        </div>
+        <div class="um-sync-tooltip-row">
+          <span class="um-sync-tooltip-label">Resultado</span>
+          <span class="um-sync-tooltip-value" style="color:${resultColor};font-weight:700;">${cfg.lastSyncResult === "success" ? "\u2713 Sucesso" : "\u2717 Erro"}</span>
+        </div>
+        ${cfg.lastError ? `<div class="um-sync-tooltip-row um-sync-tooltip-row--error">
+          <span class="um-sync-tooltip-label">Erro</span>
+          <span class="um-sync-tooltip-value">${this.esc(cfg.lastError)}</span>
+        </div>` : ""}
+      `;
+    }
+    tooltip.innerHTML = `
+      <div class="um-sync-tooltip-header">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+             stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;">
+          <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+        </svg>
+        <span>GCDR Sync \u2014 ${this.esc(displayName)}</span>
+      </div>
+      <div class="um-sync-tooltip-body">${bodyHtml}</div>
+    `;
+    const backdrop = this.el.closest(".um-backdrop") ?? document.body;
+    backdrop.appendChild(tooltip);
+    const rect = anchor.getBoundingClientRect();
+    const ttW = 260;
+    let left = rect.right + 8;
+    if (left + ttW > window.innerWidth - 8) left = rect.left - ttW - 8;
+    tooltip.style.left = `${Math.max(4, left)}px`;
+    tooltip.style.top = `${Math.max(4, rect.top - 10)}px`;
+  }
+  hideSyncTooltip() {
+    this.syncTooltipEl?.remove();
+    this.syncTooltipEl = null;
+  }
+  async syncUserToGCDR(user) {
+    const uid2 = user.id.id;
+    if (this.gcdrSyncing.has(uid2)) return;
+    const base = this.gcdrBase();
+    if (!base) {
+      this.callbacks.showToast("GCDR n\xE3o configurado.", "error");
+      return;
+    }
+    this.gcdrSyncing.add(uid2);
+    this.updateSyncCell(uid2, "syncing");
+    const prev = this.gcdrConfigs.get(uid2) ?? null;
+    const syncCount = (prev?.syncCount ?? 0) + 1;
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    try {
+      const searchRes = await fetch(
+        `${base}/api/v1/users?search=${encodeURIComponent(user.email)}&customerId=${encodeURIComponent(this.config.customerId)}&limit=10`,
+        { headers: this.gcdrHeaders() }
+      );
+      let gcdrUser = null;
+      if (searchRes.ok) {
+        const data = await searchRes.json();
+        const items = Array.isArray(data) ? data : data?.data?.items ?? data?.items ?? [];
+        gcdrUser = items.find((u) => u.email?.toLowerCase() === user.email.toLowerCase()) ?? null;
+      }
+      if (!gcdrUser) {
+        const createRes = await fetch(`${base}/api/v1/users`, {
+          method: "POST",
+          headers: this.gcdrHeaders(),
+          body: JSON.stringify({
+            email: user.email,
+            firstName: user.firstName || "",
+            lastName: user.lastName || "",
+            customerId: this.config.customerId,
+            type: "CUSTOMER"
+          })
+        });
+        if (!createRes.ok) throw new Error(`Criar usu\xE1rio GCDR: HTTP ${createRes.status}`);
+        gcdrUser = await createRes.json();
+      }
+      const configs = {
+        gcdrUserId: gcdrUser.id,
+        gcdrStatus: gcdrUser.status,
+        gcdrType: gcdrUser.type,
+        syncedAt: now,
+        syncCount,
+        lastSyncResult: "success",
+        lastError: null,
+        createdAt: prev?.createdAt ?? now,
+        updatedAt: now
+      };
+      await this.saveTBAttribute(uid2, configs);
+      this.gcdrConfigs.set(uid2, configs);
+      this.updateSyncCell(uid2, "success", configs);
+      this.callbacks.showToast(`Sync GCDR conclu\xEDdo \u2014 ${user.email}`, "success");
+    } catch (err) {
+      const configs = {
+        ...prev ?? {},
+        syncedAt: now,
+        syncCount,
+        lastSyncResult: "error",
+        lastError: String(err?.message ?? "Erro desconhecido"),
+        updatedAt: now
+      };
+      try {
+        await this.saveTBAttribute(uid2, configs);
+      } catch {
+      }
+      this.gcdrConfigs.set(uid2, configs);
+      this.updateSyncCell(uid2, "error", configs);
+      this.callbacks.showToast(`Erro sync GCDR: ${err?.message || "Falha"}`, "error");
+    } finally {
+      this.gcdrSyncing.delete(uid2);
+    }
+  }
+  async saveTBAttribute(userId, configs) {
+    const { tbBaseUrl, jwtToken } = this.config;
+    const res = await fetch(
+      `${tbBaseUrl}/api/plugins/telemetry/USER/${userId}/attributes/SERVER_SCOPE`,
+      {
+        method: "POST",
+        headers: {
+          "X-Authorization": `Bearer ${jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ gcdrUserConfigs: configs })
+      }
+    );
+    if (!res.ok) throw new Error(`Salvar atributo TB: HTTP ${res.status}`);
+  }
 };
 
 // src/components/premium-modals/user-management/tabs/NewUserTab.ts
@@ -89971,10 +90326,10 @@ var UserDetailTab = class {
     section.style.cssText = "margin-top:20px;border:1px solid var(--um-border);border-radius:10px;overflow:hidden;";
     const sectionHeader = document.createElement("div");
     sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);";
-    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Atribui\xE7\xF5es de Fun\xE7\xF5es</span>`;
+    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Fun\xE7\xF5es / Pap\xE9is</span>`;
     const addBtn = document.createElement("button");
     addBtn.className = "um-btn um-btn--secondary um-btn--sm";
-    addBtn.textContent = "+ Atribuir Fun\xE7\xE3o";
+    addBtn.textContent = "+ Adicionar";
     addBtn.addEventListener("click", () => this.showAssignForm());
     sectionHeader.appendChild(addBtn);
     section.appendChild(sectionHeader);
@@ -89994,7 +90349,12 @@ var UserDetailTab = class {
         fetch(`${this.gcdrBase()}/roles?limit=100`, { headers: this.gcdrHeaders() }),
         fetch(`${this.gcdrBase()}/policies?limit=100`, { headers: this.gcdrHeaders() })
       ]);
-      this.assignments = assignRes.ok ? this.unwrapList(await assignRes.json()) : [];
+      if (assignRes.ok) {
+        const assignJson = await assignRes.json();
+        this.assignments = Array.isArray(assignJson) ? assignJson : assignJson.assignments ?? [];
+      } else {
+        this.assignments = [];
+      }
       this.availableRoles = rolesRes.ok ? this.unwrapList(await rolesRes.json()) : [];
       this.availablePolicies = policiesRes.ok ? this.unwrapList(await policiesRes.json()) : [];
       this.renderAssignments();
@@ -90021,11 +90381,12 @@ var UserDetailTab = class {
     const tbody = document.createElement("tbody");
     this.assignments.forEach((a) => {
       const tr = document.createElement("tr");
-      const statusColor = a.status === "active" ? "var(--um-badge-user-text)" : a.status === "expired" ? "var(--um-btn-danger-text)" : "var(--um-text-faint)";
+      const statusColor = a.status === "active" ? "var(--um-badge-active-text)" : a.status === "expired" ? "var(--um-badge-blocked-text)" : "var(--um-text-faint)";
       const expiresAt = a.expiresAt ? new Date(a.expiresAt).toLocaleDateString("pt-BR") : "\u2014";
+      const scopeLabel = a.scope === "*" ? "* (global)" : a.scope.startsWith("customer:") ? `Cliente (${a.scope.replace("customer:", "").slice(0, 8)}...)` : a.scope.startsWith("asset:") ? `Asset (${a.scope.replace("asset:", "").slice(0, 8)}...)` : a.scope;
       tr.innerHTML = `
         <td style="font-weight:500;">${this.esc(a.roleDisplayName || a.roleKey)}</td>
-        <td><code style="font-size:10px;">${this.esc(a.scope)}</code></td>
+        <td style="font-size:12px;">${this.esc(scopeLabel)}</td>
         <td><span style="color:${statusColor};font-weight:600;">${a.status}</span></td>
         <td>${expiresAt}</td>
         <td style="text-align:center;"><button class="um-btn um-btn--danger um-btn--sm revoke-btn">Revogar</button></td>
@@ -90044,14 +90405,19 @@ var UserDetailTab = class {
     overlay.style.zIndex = "100001";
     const modal = document.createElement("div");
     modal.className = "um-modal";
-    modal.style.cssText = "padding: 24px; width: min(480px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+    modal.style.cssText = "width: min(820px, 92vw); max-height: 85vh; height: auto; aspect-ratio: unset; overflow: hidden; display: flex; flex-direction: column;";
     const gcdrCid = window.MyIOOrchestrator?.gcdrCustomerId || "";
     const scopeOptions = [
-      { value: "*", label: "* (global)" },
-      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `customer:${gcdrCid}` }] : []
+      { value: "*", label: "* (global \u2014 todos os clientes)" },
+      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `Cliente atual (${gcdrCid.slice(0, 8)}...)` }] : []
     ];
     modal.innerHTML = `
-      <h4 style="margin:0 0 16px;font-size:15px;font-weight:600;color:var(--um-text-primary,#e2e8f0);">Atribuir Fun\xE7\xE3o</h4>
+      <div style="display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);flex-shrink:0;">
+        <span style="font-size:15px;">\u{1F511}</span>
+        <span style="flex:1;font-size:14px;font-weight:600;color:#fff;">Atribuir Fun\xE7\xE3o / Papel</span>
+        <button type="button" class="assign-close" style="background:none;border:none;color:rgba(255,255,255,0.8);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">\u2715</button>
+      </div>
+      <div style="padding:20px 24px;overflow-y:auto;flex:1;">
       <div class="um-form" style="max-width:100%;">
         <div class="um-form-group">
           <label class="um-label">Fun\xE7\xE3o <span class="um-req">*</span></label>
@@ -90084,6 +90450,7 @@ var UserDetailTab = class {
           <button class="um-btn um-btn--primary assign-save">Atribuir</button>
         </div>
       </div>
+      </div>
     `;
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
@@ -90114,6 +90481,7 @@ var UserDetailTab = class {
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) close();
     });
+    modal.querySelector(".assign-close").addEventListener("click", close);
     modal.querySelector(".assign-cancel").addEventListener("click", close);
     modal.querySelector(".assign-save").addEventListener("click", async () => {
       const roleId = modal.querySelector("[name=roleId]").value.trim();
@@ -90128,13 +90496,14 @@ var UserDetailTab = class {
       const expiresAt = expiresAtRaw ? new Date(expiresAtRaw).toISOString() : null;
       const reason = modal.querySelector("[name=reason]").value.trim() || null;
       const role = this.availableRoles.find((r) => r.id === roleId);
+      const roleKey = role?.key || role?.id || roleId;
       const btn = modal.querySelector(".assign-save");
       btn.disabled = true;
       btn.textContent = "...";
       try {
         const body = {
           userId: this.user.id.id,
-          roleId,
+          roleKey,
           scope,
           expiresAt,
           reason
@@ -91146,6 +91515,13 @@ var UserManagementModalView = class {
   }
   // ── Styles ───────────────────────────────────────────────────────────────────
   injectStyles() {
+    if (!document.getElementById("um-font-nunito")) {
+      const link = document.createElement("link");
+      link.id = "um-font-nunito";
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";
+      document.head.appendChild(link);
+    }
     if (document.getElementById("um-styles")) return;
     const style = document.createElement("style");
     style.id = "um-styles";
@@ -91181,6 +91557,12 @@ var UserManagementModalView = class {
   --um-badge-admin-text:    #3b5bdb;
   --um-badge-user-bg:       #f0fdf4;
   --um-badge-user-text:     #16a34a;
+  --um-badge-active-bg:     #dcfce7;
+  --um-badge-active-text:   #15803d;
+  --um-badge-blocked-bg:    #fee2e2;
+  --um-badge-blocked-text:  #b91c1c;
+  --um-badge-pending-bg:    #fef9c3;
+  --um-badge-pending-text:  #854d0e;
   --um-toast-ok-bg:         #f0fdf4;
   --um-toast-ok-border:     #22c55e;
   --um-toast-ok-text:       #16a34a;
@@ -91241,6 +91623,12 @@ var UserManagementModalView = class {
   --um-badge-admin-text:    #60a5fa;
   --um-badge-user-bg:       #1a2d24;
   --um-badge-user-text:     #4ade80;
+  --um-badge-active-bg:     #14532d;
+  --um-badge-active-text:   #86efac;
+  --um-badge-blocked-bg:    #450a0a;
+  --um-badge-blocked-text:  #fca5a5;
+  --um-badge-pending-bg:    #422006;
+  --um-badge-pending-text:  #fde68a;
   --um-toast-ok-bg:         #1e3a2e;
   --um-toast-ok-border:     #22c55e;
   --um-toast-ok-text:       #4ade80;
@@ -91269,14 +91657,22 @@ var UserManagementModalView = class {
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
-  border-radius: 14px; width: 92vw; max-width: 960px;
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  border-radius: 14px; width: 96vw; max-width: 1200px;
   --modal-header-radius: 14px 14px 0 0;
-  aspect-ratio: 16/9; display: flex; flex-direction: column;
+  height: 84vh; display: flex; flex-direction: column;
   box-shadow: var(--um-shadow); overflow: hidden; position: relative;
 }
-@media (max-height: 600px) { .um-modal { aspect-ratio: unset; height: 90vh; } }
+@media (max-height: 600px) { .um-modal { height: 96vh; } }
 
 /* Header handled by ModalHeader (RFC-0121) */
+.um-modal .myio-modal-header__title {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
+.um-modal .myio-modal-header__icon {
+  font-size: 15px !important;
+}
 
 /* Force MyIO purple header regardless of light/dark theme \u2014 overrides myio-modal-header--light */
 .um-modal .myio-modal-header--light {
@@ -91375,16 +91771,83 @@ var UserManagementModalView = class {
 .um-table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .um-table th {
   text-align: left; padding: 8px 12px;
-  color: var(--um-text-muted); font-weight: 500; font-size: 11px;
+  color: var(--um-text-muted); font-weight: 600; font-size: 11px;
   text-transform: uppercase; letter-spacing: 0.04em;
   border-bottom: 1px solid var(--um-border);
 }
 .um-table td {
-  padding: 10px 12px; color: var(--um-text-secondary);
+  padding: 10px 12px; color: var(--um-text-primary); font-weight: 500;
   border-bottom: 1px solid var(--um-border-sub);
 }
 .um-table tr:hover td { background: var(--um-bg-surface); }
-.um-col-actions { width: 80px; text-align: center; }
+.um-col-actions { width: 100px; text-align: center; }
+.um-col-gcdr { width: 72px; text-align: center; }
+
+/* Sync status dot */
+.um-sync-icon { display: inline-flex; align-items: center; justify-content: center; }
+.um-sync-dot {
+  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
+  flex-shrink: 0;
+}
+.um-sync-dot--none   { background: var(--um-text-faint); opacity: 0.4; }
+.um-sync-dot--ok,
+.um-sync-dot--active { background: var(--um-badge-active-text); }
+.um-sync-dot--warn   { background: var(--um-badge-pending-text); }
+.um-sync-dot--err    { background: var(--um-badge-blocked-text); }
+
+/* Premium sync tooltip */
+.um-sync-tooltip {
+  position: fixed; z-index: 100020;
+  background: var(--um-modal-bg); border: 1px solid var(--um-border);
+  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  width: 260px; pointer-events: none;
+  font-family: 'Nunito', -apple-system, sans-serif;
+}
+.um-sync-tooltip-header {
+  display: flex; align-items: center; gap: 7px;
+  padding: 8px 12px; background: var(--um-accent);
+  border-radius: 10px 10px 0 0;
+  font-size: 11px; font-weight: 700; color: #fff;
+}
+.um-sync-tooltip-body {
+  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
+}
+.um-sync-tooltip-row {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  font-size: 11px; gap: 8px;
+}
+.um-sync-tooltip-row--muted { color: var(--um-text-faint); justify-content: center; padding: 4px 0; }
+.um-sync-tooltip-row--error .um-sync-tooltip-value { color: var(--um-badge-blocked-text); word-break: break-all; }
+.um-sync-tooltip-label { color: var(--um-text-muted); flex-shrink: 0; }
+.um-sync-tooltip-value { color: var(--um-text-primary); font-weight: 600; text-align: right; }
+
+/* Assignments quick-view popup */
+.um-assign-popup {
+  position: fixed; z-index: 100010;
+  background: var(--um-modal-bg); border: 1px solid var(--um-border);
+  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+  width: 320px; max-height: 340px; overflow-y: auto;
+  font-family: 'Nunito', -apple-system, sans-serif;
+}
+.um-assign-popup-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; background: var(--um-accent);
+  border-radius: 10px 10px 0 0;
+}
+.um-assign-popup-title { font-size: 12px; font-weight: 700; color: #fff; }
+.um-assign-popup-close {
+  background: none; border: none; color: rgba(255,255,255,0.8);
+  font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1;
+}
+.um-assign-popup-body { padding: 10px 14px; }
+.um-assign-row {
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 7px 0; border-bottom: 1px solid var(--um-border-sub);
+  font-size: 12px;
+}
+.um-assign-row:last-child { border-bottom: none; }
+.um-assign-role { font-weight: 600; color: var(--um-text-primary); }
+.um-assign-meta { color: var(--um-text-muted); font-size: 11px; }
 .um-row--highlight td { background: var(--um-row-highlight) !important; }
 
 .um-list-empty, .um-list-loading, .um-profiles-loading,
@@ -91420,8 +91883,11 @@ var UserManagementModalView = class {
 .um-btn--sm { padding: 6px 12px; font-size: 12px; }
 
 .um-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; }
-.um-badge--admin { background: var(--um-badge-admin-bg); color: var(--um-badge-admin-text); }
-.um-badge--user  { background: var(--um-badge-user-bg);  color: var(--um-badge-user-text); }
+.um-badge--admin   { background: var(--um-badge-admin-bg);   color: var(--um-badge-admin-text); }
+.um-badge--user    { background: var(--um-badge-user-bg);    color: var(--um-badge-user-text); }
+.um-badge--active  { background: var(--um-badge-active-bg);  color: var(--um-badge-active-text); }
+.um-badge--blocked { background: var(--um-badge-blocked-bg); color: var(--um-badge-blocked-text); }
+.um-badge--pending { background: var(--um-badge-pending-bg); color: var(--um-badge-pending-text); }
 
 .um-form { display: flex; flex-direction: column; gap: 14px;}
 .um-form-row { display: flex; gap: 12px; }
@@ -91442,7 +91908,7 @@ var UserManagementModalView = class {
 .um-check-label { font-size: 13px; color: var(--um-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
 
-.um-detail-card { max-width: 560px; }
+.um-detail-card { width: 100%; }
 .um-detail-section { border: 1px solid var(--um-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
 .um-detail-row {
   display: flex; align-items: flex-start; gap: 16px;
@@ -136064,7 +136530,7 @@ function bindFilterBar(card, bundle, getViewMode) {
     const lower = text.toLowerCase();
     const types = /* @__PURE__ */ new Set();
     bundle.devices.forEach((d) => {
-      const name = (d.displayName || d.name).toLowerCase();
+      const name = (d.entityLabel || d.displayName || d.name).toLowerCase();
       if (!lower || name.includes(lower) || d.type.toLowerCase().includes(lower)) {
         types.add(d.type);
       }
@@ -136140,7 +136606,7 @@ function renderDevice(device, rules, viewMode = "granular") {
       <div class="abm-device-header">
         <span class="abm-chevron">\u25BE</span>
         <span style="font-size:16px;">\u{1F4E1}</span>
-        <span class="abm-device-name">${escHtml3(device.displayName || device.name)}</span>
+        <span class="abm-device-name">${escHtml3(device.entityLabel || device.displayName || device.name)}</span>
         ${_alarmBadgeHtml(alarmCount)}
         <span class="abm-device-type">${escHtml3(device.type)}</span>
       </div>
@@ -136190,7 +136656,7 @@ function renderByRuleView(bundle) {
       return `
             <li class="abm-rule-group-device" data-device-id="${escHtml3(d.id)}">
               <span style="font-size:13px;">\u{1F4E1}</span>
-              <span>${escHtml3(d.displayName || d.name)}</span>
+              <span>${escHtml3(d.entityLabel || d.displayName || d.name)}</span>
               <span style="font-size:11px;color:#888;">${escHtml3(d.type)}</span>
               ${overridePart}
             </li>`;