myio-js-library 0.1.536 → 0.1.537

package/dist/index.cjs

@@ -190,6 +190,9 @@ __export(src_exports, {
   FreshdeskClient: () => FreshdeskClient_exports,
   GRANULARITY_SELECTOR_CSS_PREFIX: () => GRANULARITY_SELECTOR_CSS_PREFIX,
   GRID_SORT_OPTIONS: () => GRID_SORT_OPTIONS,
+  GcdrAnnotationsClient: () => GcdrAnnotationsClient,
+  GcdrAnnotationsConflictError: () => GcdrAnnotationsConflictError,
+  GcdrAnnotationsError: () => GcdrAnnotationsError,
   GoalsModal: () => GoalsModal,
   GoalsMoneyApiError: () => GoalsMoneyApiError,
   GoalsMoneyClient: () => GoalsMoneyClient,
@@ -331,9 +334,13 @@ __export(src_exports, {
   WELCOME_DEFAULT_PALETTE: () => DEFAULT_PALETTE,
   Water: () => Water,
   WaterSummaryTooltip: () => WaterSummaryTooltip,
+  adaptGcdrListToLegacyAnnotations: () => adaptGcdrListToLegacyAnnotations,
+  adaptGcdrToLegacyAnnotation: () => adaptGcdrToLegacyAnnotation,
+  adaptLegacyToGcdrInput: () => adaptLegacyToGcdrInput,
   addAlarmBadge: () => addAlarmBadge,
   addDetectionContext: () => addDetectionContext,
   addFreshdeskTicketNote: () => addTicketNote,
+  addIncidentBadge: () => addIncidentBadge,
   addNamespace: () => addNamespace,
   addTicketBadge: () => addTicketBadge,
   aggregateByDay: () => aggregateByDay,
@@ -440,6 +447,8 @@ __export(src_exports, {
   createFilterModalComponent: () => createFilterModalComponent,
   createFooterComponent: () => createFooterComponent,
   createFreshdeskTicket: () => createTicket,
+  createGcdrAnnotationsAuthStrategy: () => createAuthStrategy,
+  createGcdrAnnotationsClient: () => createGcdrAnnotationsClient,
   createGoalsBarTooltip: () => createGoalsBarTooltip,
   createGoalsMoneyClient: () => createGoalsMoneyClient,
   createGranularitySelector: () => createGranularitySelector,
@@ -784,6 +793,7 @@ __export(src_exports, {
   recalculateDeviceStatus: () => recalculateDeviceStatus,
   recomputeDeviceGridPercentages: () => recomputePercentages,
   refreshAlarmBadges: () => refreshAlarmBadges,
+  refreshIncidentBadges: () => refreshIncidentBadges,
   refreshTicketBadges: () => refreshTicketBadges,
   removeAlarmsNotificationsPanelStyles: () => removeAlarmsNotificationsPanelStyles,
   removeBASDashboardStyles: () => removeBASDashboardStyles,
@@ -877,7 +887,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.536",
+  version: "0.1.537",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -2274,7 +2284,8 @@ var DeviceIconType = {
   TERMOSTATO: "TERMOSTATO",
   COMPRESSOR: "COMPRESSOR",
   VENTILADOR: "VENTILADOR",
-  SOLENOIDE: "SOLENOIDE"
+  SOLENOIDE: "SOLENOIDE",
+  GATEWAY: "GATEWAY"
 };
 var deviceIcons = {
   ESCADA_ROLANTE: "https://dashboard.myio-bas.com/api/images/public/EJ997iB2HD1AYYUHwIloyQOOszeqb2jp",
@@ -2299,7 +2310,10 @@ var deviceIcons = {
   COMPRESSOR: "https://dashboard.myio-bas.com/api/images/public/4BWMuVIFHnsfqatiV86DmTrOB7IF0X8Y",
   VENTILADOR: "https://dashboard.myio-bas.com/api/images/public/Rge8Q3t0CP5PW8XyTn9bBK9aVP6uzSTT",
   // SOLENOIDE: single representative (on); dynamic on/off/offline lives in solenoid-control SOLENOID_IMAGES.
-  SOLENOIDE: "https://dashboard.myio-bas.com/api/images/public/Tnq47Vd1TxhhqhYoHvzS73WVh1X84fPa"
+  SOLENOIDE: "https://dashboard.myio-bas.com/api/images/public/Tnq47Vd1TxhhqhYoHvzS73WVh1X84fPa",
+  // GATEWAY: central/gateway hardware (OrangePi) — used by SettingsModalView's
+  // "Central" tab identity card. Previously fell through to DEFAULT_DEVICE_ICON.
+  GATEWAY: "https://dashboard.myio-bas.com/api/images/public/kNlazDO8Yy90R5O12i17EqkQUFsNj44b"
 };
 var deviceIconLabels = {
   ESCADA_ROLANTE: "Escada Rolante",
@@ -2322,7 +2336,8 @@ var deviceIconLabels = {
   TERMOSTATO: "Termostato",
   COMPRESSOR: "Compressor",
   VENTILADOR: "Ventilador",
-  SOLENOIDE: "Solenoide"
+  SOLENOIDE: "Solenoide",
+  GATEWAY: "Gateway"
 };
 var DEFAULT_DEVICE_ICON = "https://dashboard.myio-bas.com/api/images/public/f9Ce4meybsdaAhAkUlAfy5ei3I4kcN4k";
 function getDeviceIcon(deviceProfile) {
@@ -5097,11 +5112,19 @@ var MODAL_HEADER_CSS = `
 }
 
 .myio-modal-header__title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
+  /* Rendered as an <h2> (see generateHTML() below) \u2014 on a real ThingsBoard
+     dashboard (Angular Material) a global rule like ".mat-typography h2"
+     has HIGHER specificity (class+element) than this single-class selector,
+     regardless of load order, and wins with Material's own much larger
+     font-size/line-height/margin \u2014 the header balloons in height there while
+     looking fine in an isolated showcase page with no Material CSS at all.
+     Same class of bug, same !important remedy already used in
+     WelcomeModalView.ts's title rules. */
+  margin: 0 !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
   color: white;
-  line-height: 1.4;
+  line-height: 1.4 !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8527,7 +8550,7 @@ function buildMyioIngestionAuth(config2) {
     const skewMs = renewSkewSeconds * 1e3;
     return now() >= cache.expiresAt - skewMs;
   }
-  async function sleep(ms) {
+  async function sleep2(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
   async function requestNewToken() {
@@ -8571,7 +8594,7 @@ function buildMyioIngestionAuth(config2) {
           throw error;
         }
         const backoff = retryBaseMs * Math.pow(2, attempt - 1);
-        await sleep(backoff);
+        await sleep2(backoff);
       }
     }
   }
@@ -9837,6 +9860,392 @@ async function createAnnotationIndicator(config2) {
   return indicator;
 }
 
+// src/components/gcdr-annotations/v1.0.0/authStrategies.ts
+var ApiKeyAuth = class {
+  constructor(apiKey) {
+    this.apiKey = apiKey;
+  }
+  apply(headers) {
+    headers["X-API-Key"] = this.apiKey;
+  }
+};
+var BearerAuth = class {
+  constructor(token) {
+    this.token = token;
+  }
+  async apply(headers) {
+    const resolved = typeof this.token === "function" ? await this.token() : this.token;
+    headers["Authorization"] = `Bearer ${resolved}`;
+  }
+};
+function createAuthStrategy(auth) {
+  const hasApiKey = !!auth.apiKey;
+  const hasBearer = auth.bearerToken !== void 0 && auth.bearerToken !== null && auth.bearerToken !== "";
+  if (hasApiKey && hasBearer) {
+    throw new Error(
+      "GcdrAnnotationsClient: provide exactly one of auth.apiKey or auth.bearerToken, not both."
+    );
+  }
+  if (hasApiKey) return new ApiKeyAuth(auth.apiKey);
+  if (hasBearer) return new BearerAuth(auth.bearerToken);
+  throw new Error("GcdrAnnotationsClient: auth.apiKey or auth.bearerToken is required.");
+}
+
+// src/components/gcdr-annotations/v1.0.0/adapters.ts
+var GCDR_TO_LEGACY_TYPE = {
+  observation: "observation",
+  pending: "pending",
+  maintenance: "maintenance",
+  activity: "activity"
+};
+var LEGACY_TO_GCDR_TYPE = {
+  observation: "observation",
+  pending: "pending",
+  maintenance: "maintenance",
+  activity: "activity"
+};
+var KNOWN_AUDIT_ACTIONS = /* @__PURE__ */ new Set([
+  "created",
+  "modified",
+  "archived",
+  "approved",
+  "rejected",
+  "commented",
+  "acknowledged"
+]);
+function toUserInfo(u) {
+  return { id: u?.id ?? "", email: u?.email ?? "", name: u?.name ?? "" };
+}
+function deriveLegacyStatus(a) {
+  if (a.finalized && a.finalizedReason === "archived") return "archived";
+  return a.version > 1 ? "modified" : "created";
+}
+function adaptResponse(r, annotationId) {
+  return {
+    id: r.id,
+    annotationId,
+    type: r.type,
+    text: r.text ?? "",
+    createdAt: r.createdAt,
+    createdBy: toUserInfo(r.createdBy)
+  };
+}
+function adaptEvent(e) {
+  const action = KNOWN_AUDIT_ACTIONS.has(e.action) ? e.action : "modified";
+  return {
+    timestamp: e.at,
+    userId: e.by?.id ?? "",
+    userName: e.by?.name ?? "",
+    userEmail: e.by?.email ?? "",
+    action
+  };
+}
+function adaptGcdrToLegacyAnnotation(g) {
+  const detail = g;
+  const responses = (detail.responses ?? []).map((r) => adaptResponse(r, g.id));
+  const history = (detail.events ?? []).map(adaptEvent);
+  const approvedOrRejected = responses.find((r) => r.type === "approved" || r.type === "rejected");
+  return {
+    id: g.id,
+    version: g.version,
+    text: g.text,
+    type: GCDR_TO_LEGACY_TYPE[g.type] ?? "observation",
+    importance: g.importance,
+    status: deriveLegacyStatus(g),
+    createdAt: g.createdAt,
+    dueDate: g.dueDate ?? void 0,
+    createdBy: toUserInfo(g.createdBy),
+    acknowledged: !!approvedOrRejected,
+    acknowledgedBy: approvedOrRejected?.createdBy,
+    acknowledgedAt: approvedOrRejected?.createdAt,
+    responses,
+    history
+  };
+}
+function adaptGcdrListToLegacyAnnotations(list) {
+  return list.map(adaptGcdrToLegacyAnnotation);
+}
+function adaptLegacyToGcdrInput(data, entity) {
+  return {
+    entityType: entity.entityType,
+    entityId: entity.entityId,
+    customerId: entity.customerId,
+    text: data.text,
+    type: LEGACY_TO_GCDR_TYPE[data.type] ?? "observation",
+    importance: data.importance,
+    dueDate: data.dueDate
+  };
+}
+
+// src/components/gcdr-annotations/v1.0.0/types.ts
+var GcdrAnnotationsError = class extends Error {
+  status;
+  code;
+  constructor(status, message, code) {
+    super(message || `HTTP_${status}`);
+    this.name = "GcdrAnnotationsError";
+    this.status = status;
+    this.code = code;
+  }
+};
+var GcdrAnnotationsConflictError = class extends GcdrAnnotationsError {
+  finalizedOrStale = true;
+  constructor(message) {
+    super(409, message, "CONFLICT");
+    this.name = "GcdrAnnotationsConflictError";
+  }
+};
+
+// src/components/gcdr-annotations/v1.0.0/GcdrAnnotationsClient.ts
+var DEFAULT_MAX_PAGES = 50;
+var DEFAULT_LIMIT = 100;
+var DEFAULT_MAX_RETRIES = 3;
+var DEFAULT_RETRY_BASE_MS = 500;
+function normalizeDomainPath(domainPath) {
+  return String(domainPath).replace(/\/+$/, "");
+}
+function isNetworkError(err) {
+  if (!err || typeof err !== "object") return false;
+  const name = err.name ?? "";
+  const message = String(err.message ?? "").toLowerCase();
+  return name === "TypeError" || message.includes("network") || message.includes("failed to fetch");
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var GcdrAnnotationsClient = class {
+  domainPath;
+  authStrategy;
+  fetchImpl;
+  logger;
+  cacheTtlMs;
+  maxPages;
+  cache = /* @__PURE__ */ new Map();
+  constructor(params) {
+    if (!params || !params.domainPath) {
+      throw new Error("GcdrAnnotationsClient requires a domainPath.");
+    }
+    this.domainPath = normalizeDomainPath(params.domainPath);
+    this.authStrategy = createAuthStrategy(params.auth);
+    const injected = params.fetchImpl || globalThis.fetch;
+    if (typeof injected !== "function") {
+      throw new Error("GcdrAnnotationsClient requires a fetch implementation.");
+    }
+    this.fetchImpl = params.fetchImpl ? params.fetchImpl : injected.bind(globalThis);
+    this.logger = params.logger ?? console;
+    this.cacheTtlMs = params.cacheTtlMs ?? 0;
+    this.maxPages = params.maxPages ?? DEFAULT_MAX_PAGES;
+  }
+  /** Drops every cached GET response. Called automatically after any write. */
+  invalidate() {
+    this.cache.clear();
+  }
+  // ── Reads ──────────────────────────────────────────────────────────────
+  /** One page of `GET /annotations` with the given filters. */
+  async list(params = {}) {
+    const query = new URLSearchParams();
+    if (params.customerId) query.set("customerId", params.customerId);
+    if (params.entityType) query.set("entityType", params.entityType);
+    if (params.entityId) query.set("entityId", params.entityId);
+    if (params.type) query.set("type", params.type);
+    if (params.status) query.set("status", params.status);
+    if (params.importance !== void 0) query.set("importance", String(params.importance));
+    if (params.includeArchived !== void 0) query.set("includeArchived", String(params.includeArchived));
+    query.set("page", String(params.page ?? 1));
+    query.set("limit", String(params.limit ?? DEFAULT_LIMIT));
+    const raw = await this._requestJson(`/annotations?${query.toString()}`, { method: "GET" });
+    return this._toListPage(raw, params.page ?? 1, params.limit ?? DEFAULT_LIMIT);
+  }
+  /** Every annotation of a customer, aggregated across as many pages as it takes (capped at `maxPages`). */
+  async listByCustomer(customerId, params = {}) {
+    return this._listAll({ ...params, customerId });
+  }
+  /** Every annotation attached to one entity (e.g. a device, or a central identified by its GCDR UUID). */
+  async listByEntity(entityType, entityId, params = {}) {
+    return this._listAll({ ...params, entityType, entityId });
+  }
+  /** Full detail — responses, events (audit trail), mentions, attachments. */
+  async getById(id) {
+    const raw = await this._requestJson(`/annotations/${encodeURIComponent(id)}`, { method: "GET" });
+    return this._unwrap(raw);
+  }
+  /** Convenience bridge — same `Annotation[]` shape `AnnotationsTab`/orchestrators already consume. */
+  toLegacyAnnotations(list) {
+    return adaptGcdrListToLegacyAnnotations(list);
+  }
+  // ── Writes ─────────────────────────────────────────────────────────────
+  async create(input) {
+    const raw = await this._requestJson("/annotations", {
+      method: "POST",
+      body: JSON.stringify(input)
+    });
+    this.invalidate();
+    return this._unwrap(raw);
+  }
+  /** Optimistic lock via `If-Match: "<version>"` — a stale version raises `GcdrAnnotationsConflictError`. */
+  async patch(id, changes, version2) {
+    const raw = await this._requestJson(`/annotations/${encodeURIComponent(id)}`, {
+      method: "PATCH",
+      body: JSON.stringify(changes),
+      headers: { "If-Match": `"${version2}"` }
+    });
+    this.invalidate();
+    return this._unwrap(raw);
+  }
+  async archive(id, version2) {
+    const raw = await this._requestJson(`/annotations/${encodeURIComponent(id)}/archive`, {
+      method: "POST",
+      headers: { "If-Match": `"${version2}"` }
+    });
+    this.invalidate();
+    return this._unwrap(raw);
+  }
+  /**
+   * Posts a response (comment/approve/reject/archive). `text` is required for
+   * every type except `approved` — mirrored client-side so a caller gets an
+   * immediate, local error instead of a round trip (API guide §5 rule).
+   */
+  async respond(id, input) {
+    if (input.type !== "approved" && !input.text) {
+      throw new GcdrAnnotationsError(400, `respond(): 'text' is required for response type '${input.type}'.`);
+    }
+    const raw = await this._requestJson(`/annotations/${encodeURIComponent(id)}/responses`, {
+      method: "POST",
+      body: JSON.stringify(input)
+    });
+    this.invalidate();
+    return this._unwrap(raw);
+  }
+  async mention(id, userId) {
+    await this._requestJson(`/annotations/${encodeURIComponent(id)}/mentions`, {
+      method: "POST",
+      body: JSON.stringify({ userId })
+    });
+    this.invalidate();
+  }
+  async attach(id, attachment) {
+    await this._requestJson(`/annotations/${encodeURIComponent(id)}/attachments`, {
+      method: "POST",
+      body: JSON.stringify(attachment)
+    });
+    this.invalidate();
+  }
+  async detach(id, attachmentId) {
+    await this._requestJson(
+      `/annotations/${encodeURIComponent(id)}/attachments/${encodeURIComponent(attachmentId)}`,
+      { method: "DELETE" }
+    );
+    this.invalidate();
+  }
+  // ── Internals ────────────────────────────────────────────────────────────
+  async _listAll(params) {
+    const limit = params.limit ?? DEFAULT_LIMIT;
+    const out = [];
+    for (let page = 1; page <= this.maxPages; page++) {
+      const result = await this.list({ ...params, page, limit });
+      out.push(...result.items);
+      if (!result.pagination.hasNext) return out;
+      if (page === this.maxPages) {
+        this.logger.warn(
+          `[GcdrAnnotationsClient] hit hard page cap of ${this.maxPages} \u2014 some annotations may be missing.`
+        );
+      }
+    }
+    return out;
+  }
+  _toListPage(raw, page, limit) {
+    const body = raw;
+    if (Array.isArray(body)) {
+      return { items: body, pagination: { page, limit, hasNext: false } };
+    }
+    const items = Array.isArray(body?.data) ? body.data : [];
+    const pagination = body?.pagination ?? {
+      page,
+      limit,
+      hasNext: items.length >= limit
+    };
+    return { items, pagination };
+  }
+  /** Unwraps the `{success, data}` envelope; tolerates an already-flat body (test doubles, future API versions). */
+  _unwrap(raw) {
+    const envelope = raw;
+    if (envelope && typeof envelope === "object" && "data" in envelope) {
+      return envelope.data;
+    }
+    return raw;
+  }
+  async _requestJson(path, init) {
+    const url = `${this.domainPath}${path.startsWith("/") ? path : `/${path}`}`;
+    const method = init.method ?? "GET";
+    const cacheKey = `${method}::${url}`;
+    if (method === "GET" && this.cacheTtlMs > 0) {
+      const cached = this.cache.get(cacheKey);
+      if (cached && Date.now() - cached.at < this.cacheTtlMs) {
+        return cached.value;
+      }
+    }
+    const result = await this._doRequest(url, init);
+    if (method === "GET" && this.cacheTtlMs > 0) {
+      this.cache.set(cacheKey, { at: Date.now(), value: result });
+    }
+    return result;
+  }
+  async _doRequest(url, init) {
+    let attempt = 0;
+    while (true) {
+      const headers = { Accept: "application/json", ...init.headers || {} };
+      if (init.body !== void 0) headers["Content-Type"] = "application/json";
+      await this.authStrategy.apply(headers);
+      try {
+        const res = await this.fetchImpl(url, { ...init, headers });
+        if ((res.status === 429 || res.status >= 500) && attempt < DEFAULT_MAX_RETRIES) {
+          const backoffMs = DEFAULT_RETRY_BASE_MS * Math.pow(2, attempt);
+          this.logger.warn(
+            `[GcdrAnnotationsClient] ${res.status} on ${url} \u2014 retry ${attempt + 1}/${DEFAULT_MAX_RETRIES} in ${backoffMs}ms`
+          );
+          attempt++;
+          await sleep(backoffMs);
+          continue;
+        }
+        const body = await this._readBody(res);
+        if (res.status === 409) {
+          const err = body && body.error;
+          throw new GcdrAnnotationsConflictError(err?.message || res.statusText);
+        }
+        if (!res.ok) {
+          const err = body && body.error;
+          throw new GcdrAnnotationsError(res.status, err?.message || res.statusText, err?.code);
+        }
+        return body;
+      } catch (err) {
+        if (err instanceof GcdrAnnotationsError) throw err;
+        if (isNetworkError(err) && attempt < DEFAULT_MAX_RETRIES) {
+          const backoffMs = DEFAULT_RETRY_BASE_MS * Math.pow(2, attempt);
+          this.logger.warn(
+            `[GcdrAnnotationsClient] network error on ${url} \u2014 retry ${attempt + 1}/${DEFAULT_MAX_RETRIES} in ${backoffMs}ms`
+          );
+          attempt++;
+          await sleep(backoffMs);
+          continue;
+        }
+        throw new GcdrAnnotationsError(0, err instanceof Error ? err.message : "network error");
+      }
+    }
+  }
+  async _readBody(res) {
+    try {
+      const text2 = await res.text();
+      if (!text2) return null;
+      return JSON.parse(text2);
+    } catch {
+      return null;
+    }
+  }
+};
+function createGcdrAnnotationsClient(params) {
+  return new GcdrAnnotationsClient(params);
+}
+
 // src/utils/devices/deviceType.js
 function normalize(str) {
   if (typeof str !== "string") return "";
@@ -61047,9 +61456,273 @@ function createTicketsTab(config2) {
   return { destroy: () => tab.destroy() };
 }
 
+// src/components/createInputDateRangePickerInsideDIV.ts
+var PREMIUM_STYLES = `
+  .myio-daterange-wrapper {
+    font-family: 'Nunito', system-ui, sans-serif;
+    background: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    transition: all 0.2s ease;
+  }
+  
+  .myio-daterange-wrapper:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  }
+  
+  .myio-daterange-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+  
+  .myio-daterange-input {
+    width: 100%;
+    max-width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+  
+  .myio-daterange-input:hover {
+    border-color: #4A148C;
+    box-shadow: 0 0 0 2px rgba(74, 20, 140, 0.1);
+  }
+  
+  .myio-daterange-input:focus {
+    outline: none;
+    border-color: #4A148C;
+    box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.2);
+  }
+  
+  .myio-daterange-input::placeholder {
+    color: #999;
+    opacity: 1;
+  }
+  
+  .myio-daterange-helper {
+    font-size: 12px;
+    color: #666;
+    margin-top: 4px;
+    line-height: 1.3;
+    transition: color 0.2s ease;
+  }
+  
+  .myio-daterange-helper.success {
+    color: #28a745;
+    font-weight: 500;
+  }
+  
+  .myio-daterange-helper.error {
+    color: #dc3545;
+    font-weight: 500;
+  }
+  
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .myio-daterange-wrapper {
+      padding: 16px;
+      margin-bottom: 16px;
+    }
+    
+    .myio-daterange-input {
+      max-width: 100%;
+      font-size: 16px; /* Prevents zoom on iOS */
+    }
+  }
+  
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .myio-daterange-wrapper {
+      border: 2px solid #000;
+    }
+    
+    .myio-daterange-input {
+      border: 2px solid #000;
+    }
+  }
+  
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .myio-daterange-wrapper,
+    .myio-daterange-input,
+    .myio-daterange-helper {
+      transition: none;
+    }
+  }
+`;
+function injectPremiumStyles() {
+  const styleId = "myio-daterange-premium-styles";
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const styleEl = document.createElement("style");
+  styleEl.id = styleId;
+  styleEl.textContent = PREMIUM_STYLES;
+  document.head.appendChild(styleEl);
+  console.log("[MyIO] Premium date range styles injected");
+}
+function validateId(id, context) {
+  if (!id || typeof id !== "string") {
+    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} must be a non-empty string`);
+  }
+  if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(id)) {
+    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} '${id}' is not a valid HTML ID`);
+  }
+}
+async function createInputDateRangePickerInsideDIV(params) {
+  const {
+    containerId,
+    inputId,
+    label = "Per\xEDodo de Datas",
+    placeholder = "Clique para selecionar per\xEDodo",
+    pickerOptions = {},
+    classNames = {},
+    injectStyles: injectStyles23 = true,
+    showHelper = true
+  } = params;
+  validateId(containerId, "containerId");
+  validateId(inputId, "inputId");
+  const container = document.getElementById(containerId);
+  if (!container) {
+    throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
+  }
+  if (injectStyles23) {
+    injectPremiumStyles();
+  }
+  let inputEl = document.getElementById(inputId);
+  if (inputEl && inputEl.tagName.toLowerCase() !== "input") {
+    throw new Error(`[createInputDateRangePickerInsideDIV] Element '#${inputId}' exists but is not an input element`);
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = classNames.wrapper || "myio-daterange-wrapper";
+  wrapper.setAttribute("data-myio-component", "daterange-input");
+  wrapper.setAttribute("data-version", "1.0.0");
+  let labelEl = null;
+  if (label) {
+    labelEl = document.createElement("label");
+    labelEl.className = classNames.label || "myio-daterange-label";
+    labelEl.textContent = label;
+    labelEl.setAttribute("for", inputId);
+    wrapper.appendChild(labelEl);
+  }
+  if (!inputEl) {
+    inputEl = document.createElement("input");
+    inputEl.type = "text";
+    inputEl.id = inputId;
+    inputEl.name = inputId;
+  }
+  inputEl.className = classNames.input || "myio-daterange-input";
+  inputEl.readOnly = true;
+  inputEl.placeholder = placeholder;
+  inputEl.autocomplete = "off";
+  inputEl.setAttribute("aria-label", label || "Date range selector");
+  if (showHelper) {
+    inputEl.setAttribute("aria-describedby", `${inputId}-helper`);
+  }
+  let helperEl = null;
+  if (showHelper) {
+    helperEl = document.createElement("div");
+    helperEl.id = `${inputId}-helper`;
+    helperEl.className = classNames.helper || "myio-daterange-helper";
+    helperEl.setAttribute("aria-live", "polite");
+    helperEl.style.display = "flex";
+    helperEl.style.alignItems = "center";
+  }
+  wrapper.appendChild(inputEl);
+  if (helperEl) {
+    wrapper.appendChild(helperEl);
+  }
+  const existingWrapper = container.querySelector('[data-myio-component="daterange-input"]');
+  if (existingWrapper) {
+    console.warn(`[createInputDateRangePickerInsideDIV] Replacing existing daterange input in container '#${containerId}'`);
+    existingWrapper.remove();
+  }
+  container.appendChild(wrapper);
+  const enhancedOptions = {
+    maxRangeDays: 31,
+    onApply: (result) => {
+      if (helperEl) {
+        const startDate = new Date(result.startISO);
+        const endDate = new Date(result.endISO);
+        const days = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+        helperEl.textContent = `Per\xEDodo selecionado: ${days} dia${days !== 1 ? "s" : ""}`;
+        helperEl.className = (classNames.helper || "myio-daterange-helper") + " success";
+        setTimeout(() => {
+          if (helperEl) {
+            helperEl.className = classNames.helper || "myio-daterange-helper";
+          }
+        }, 3e3);
+      }
+      if (pickerOptions.onApply) {
+        pickerOptions.onApply(result);
+      }
+    },
+    ...pickerOptions
+  };
+  let picker;
+  try {
+    picker = await createDateRangePicker2(inputEl, enhancedOptions);
+    console.log(`[createInputDateRangePickerInsideDIV] Successfully initialized for input '#${inputId}'`);
+  } catch (error) {
+    wrapper.remove();
+    throw new Error(`[createInputDateRangePickerInsideDIV] Failed to initialize date picker: ${error.message}`);
+  }
+  const controller = {
+    input: inputEl,
+    container,
+    wrapper,
+    picker,
+    getDisplayValue: () => inputEl.value,
+    getDates: () => picker.getDates(),
+    setDates: (startISO, endISO) => {
+      try {
+        picker.setDates(startISO, endISO);
+      } catch (error) {
+        console.error(`[createInputDateRangePickerInsideDIV] Error setting dates:`, error);
+        throw error;
+      }
+    },
+    setHelperText: (text2, type = "default") => {
+      if (helperEl) {
+        helperEl.textContent = text2;
+        const baseClass = classNames.helper || "myio-daterange-helper";
+        helperEl.className = type === "default" ? baseClass : `${baseClass} ${type}`;
+      }
+    },
+    destroy: () => {
+      try {
+        picker.destroy();
+        console.log(`[createInputDateRangePickerInsideDIV] Date picker destroyed for input '#${inputId}'`);
+      } catch (error) {
+        console.warn(`[createInputDateRangePickerInsideDIV] Error destroying picker:`, error);
+      }
+      try {
+        wrapper.remove();
+        console.log(`[createInputDateRangePickerInsideDIV] Wrapper removed for input '#${inputId}'`);
+      } catch (error) {
+        console.warn(`[createInputDateRangePickerInsideDIV] Error removing wrapper:`, error);
+      }
+    }
+  };
+  return controller;
+}
+
 // src/components/premium-modals/settings/SettingsModalView.ts
 var ALLOWED_EMAIL_DOMAIN = "@myio.com.br";
-var SettingsModalView = class {
+var SettingsModalView = class _SettingsModalView {
   container;
   modal;
   form;
@@ -61064,14 +61737,24 @@ var SettingsModalView = class {
   chamadosTabHandle = null;
   // Exclusão de Grupos tab
   exclusionGroupsTab = null;
-  // "gateway": read-only Central identity/telemetry tab, only rendered when
-  // config.isGateway (see getGatewayInfoHTML()) — a real device never has it.
   currentTab = "general";
   currentUser = null;
   permissions = null;
   // RFC-0190: Exclude Groups Totals
   excludeGroupsEnabled = false;
   excludedGroups = [];
+  // RFC-0232: Incidentes tab filters (search/devices/period) — client-side
+  // state, all derived from `config.interpolatedSlots` (the host's one
+  // pre-fetch). `incidentsIdSuffix` is only needed because
+  // createInputDateRangePickerInsideDIV() does a global `document.getElementById`
+  // internally — every other Incidentes element is found via `this.modal.querySelector`,
+  // which is safely scoped even with duplicate ids across simultaneous instances.
+  incidentsIdSuffix = Math.random().toString(36).slice(2, 10);
+  incidentsAllSlots = [];
+  incidentsSelectedDevices = /* @__PURE__ */ new Set();
+  incidentsSearch = "";
+  incidentsDateRange = { startISO: null, endISO: null };
+  incidentsDateRangeController = null;
   constructor(config2) {
     this.config = config2;
     this.createModal();
@@ -61132,6 +61815,10 @@ var SettingsModalView = class {
     this.initAlarmsTab();
     this.initChamadosTab();
     this.initExclusionGroupsTab();
+    if (this.config.isGateway && this.isSuperAdmin()) {
+      this.bindIncidentsTabEvents();
+      this.initIncidentsDateRange();
+    }
     this._updateTabBadges(initialData);
   }
   // RFC-0104: Initialize the Annotations Tab
@@ -61355,13 +62042,13 @@ var SettingsModalView = class {
     const alarmsContent = this.modal.querySelector("#alarms-tab-content");
     const chamadosContent = this.modal.querySelector("#chamados-tab-content");
     const exclusionGroupsContent = this.modal.querySelector("#exclusion-groups-tab-content");
-    const gatewayContent = this.modal.querySelector("#gateway-tab-content");
+    const incidentsContent = this.modal.querySelector("#incidents-tab-content");
     if (generalContent) generalContent.style.display = tab === "general" ? "block" : "none";
     if (annotationsContent) annotationsContent.style.display = tab === "annotations" ? "block" : "none";
     if (alarmsContent) alarmsContent.style.display = tab === "alarms" ? "block" : "none";
     if (chamadosContent) chamadosContent.style.display = tab === "chamados" ? "block" : "none";
     if (exclusionGroupsContent) exclusionGroupsContent.style.display = tab === "exclusion-groups" ? "block" : "none";
-    if (gatewayContent) gatewayContent.style.display = tab === "gateway" ? "block" : "none";
+    if (incidentsContent) incidentsContent.style.display = tab === "incidents" ? "block" : "none";
     const saveBtn = this.modal.querySelector(".btn-save");
     if (saveBtn) saveBtn.style.display = tab === "general" ? "inline-flex" : "none";
     if (tab === "annotations" && this.annotationsTab) {
@@ -61386,6 +62073,10 @@ var SettingsModalView = class {
       this.exclusionGroupsTab.destroy();
       this.exclusionGroupsTab = null;
     }
+    if (this.incidentsDateRangeController) {
+      this.incidentsDateRangeController.destroy();
+      this.incidentsDateRangeController = null;
+    }
     if (this.originalActiveElement && "focus" in this.originalActiveElement) {
       this.originalActiveElement.focus();
     }
@@ -61552,15 +62243,15 @@ var SettingsModalView = class {
               Excluir Grupos
               <span class="modal-tab-badge modal-tab-badge--exclusion" id="tab-badge-exclusion-groups" style="display:none"></span>
             </button>
-            <!-- Central/gateway identity+telemetry tab \u2014 only for CentralSettingsModal (isGateway) -->
-            ${this.config.isGateway ? `<button type="button" class="modal-tab" data-tab="gateway">
+            <!-- RFC-0232: Incidentes (interpola\xE7\xE3o) \u2014 central + admin MyIO only -->
+            ${this.config.isGateway && this.isSuperAdmin() ? `<button type="button" class="modal-tab" data-tab="incidents">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="2" y="4" width="20" height="6" rx="1"></rect>
-                  <rect x="2" y="14" width="20" height="6" rx="1"></rect>
-                  <line x1="6" y1="7" x2="6.01" y2="7"></line>
-                  <line x1="6" y1="17" x2="6.01" y2="17"></line>
+                  <path d="M12 9v4"></path>
+                  <path d="M12 17h.01"></path>
+                  <path d="M10.29 3.86l-8.18 14.14A2 2 0 0 0 3.93 21h16.14a2 2 0 0 0 1.82-2.99L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                 </svg>
-                Central
+                Incidentes
+                ${(this.config.interpolatedSlots?.length ?? 0) > 0 ? `<span class="modal-tab-badge modal-tab-badge--incidents">${this.config.interpolatedSlots.length}</span>` : ""}
               </button>` : ""}
           </div>
           <div class="modal-body">
@@ -61599,8 +62290,10 @@ var SettingsModalView = class {
                 <p>Carregando configura\xE7\xF5es de exclus\xE3o...</p>
               </div>
             </div>
-            <!-- Central/gateway identity+telemetry tab (read-only) -->
-            ${this.config.isGateway ? `<div id="gateway-tab-content" class="tab-content" style="display: none;">${this.getGatewayInfoHTML()}</div>` : ""}
+            <!-- RFC-0232: Incidentes (interpola\xE7\xE3o) Tab Content \u2014 central + admin MyIO only.
+                 Rendered synchronously (data comes pre-fetched via config.interpolatedSlots,
+                 same as getGatewayInfoHTML() \u2014 no async loading state needed here). -->
+            ${this.config.isGateway && this.isSuperAdmin() ? `<div id="incidents-tab-content" class="tab-content" style="display: none;">${this.getInterpolationIncidentsHTML()}</div>` : ""}
           </div>
           <div class="modal-footer">
             <button type="button" class="btn-cancel">Fechar</button>
@@ -61684,6 +62377,10 @@ var SettingsModalView = class {
           </div>
         </div>
 
+        <!-- Central/gateway identity+telemetry \u2014 only for CentralSettingsModal (isGateway);
+             rendered directly in Geral instead of its own tab, right after the identity card. -->
+        ${this.config.isGateway ? this.getGatewayInfoHTML() : ""}
+
         <!-- Bottom Row: Connection Info spanning full width -->
         ${this.getConnectionInfoHTML()}
 
@@ -61888,70 +62585,450 @@ var SettingsModalView = class {
     parts.push(`${m}min`);
     return parts.join(" ");
   }
+  /** pt-BR absolute timestamp WITH seconds, ISO-string input (mirrors the
+   *  seconds-precision formatting `getConnectionInfoHTML()` uses for its
+   *  disconnect-interval row). */
+  formatIsoWithSeconds(iso) {
+    if (!iso) return "\u2014";
+    const ms = Date.parse(iso);
+    if (Number.isNaN(ms)) return "\u2014";
+    return new Date(ms).toLocaleString("pt-BR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  }
+  /** "(Xd:YYhs:YYmins atrás)"-style relative time, ISO-string input — mirrors
+   *  the device "Conectado desde" pattern in `getConnectionInfoHTML()`. */
+  formatIsoRelativeDetailed(iso) {
+    const ms = iso ? Date.parse(iso) : NaN;
+    if (Number.isNaN(ms)) return "";
+    const diffMinutes = Math.floor((Date.now() - ms) / 6e4);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays > 0) {
+      return `(${diffDays}d:${String(diffHours % 24).padStart(2, "0")}hs:${String(diffMinutes % 60).padStart(2, "0")}mins atr\xE1s)`;
+    }
+    if (diffHours > 0) return `(${diffHours}hs:${String(diffMinutes % 60).padStart(2, "0")}mins atr\xE1s)`;
+    if (diffMinutes > 0) return `(${diffMinutes}mins atr\xE1s)`;
+    return "(agora)";
+  }
+  /** "(Xd/h/min atrás)"-style relative time, ISO-string input — mirrors the
+   *  device "Último check status" pattern in `getConnectionInfoHTML()`. */
+  formatIsoRelativeSimple(iso) {
+    const ms = iso ? Date.parse(iso) : NaN;
+    if (Number.isNaN(ms)) return "";
+    const diffMinutes = Math.floor((Date.now() - ms) / 6e4);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays > 0) return `(${diffDays}d atr\xE1s)`;
+    if (diffHours > 0) return `(${diffHours}h atr\xE1s)`;
+    if (diffMinutes > 0) return `(${diffMinutes}min atr\xE1s)`;
+    return "(agora)";
+  }
   /**
    * Central/gateway identity + telemetry — read-only, sourced 1:1 from
-   * GCDR's `GET /api/v1/centrals/:id`. Every value carries a stable
-   * `id="gwinfo-<key>"` so a host (CentralSettingsModal) can patch
-   * `.textContent` after an async fetch resolves — this method itself only
-   * runs once, at construction time (createModal() is never re-invoked),
-   * so it can't pick up data that arrives after the modal is already built.
-   */
+   * GCDR's `GET /api/v1/centrals/:id`. Rendered inline in the Geral tab
+   * (right after the identity card) rather than its own tab — a real device
+   * never sets `isGateway`, so this is fully inert for the device settings
+   * modal. Every value carries a stable `id="gwinfo-<key>"` so a host
+   * (CentralSettingsModal) can patch `.textContent` after an async fetch
+   * resolves — this method itself only runs once, at construction time
+   * (createModal() is never re-invoked), so it can't pick up data that
+   * arrives after the modal is already built.
+   */
+  /**
+   * "Status" text/color mapping for `GatewayInfo.connectionStatus`
+   * (ONLINE|OFFLINE|DEGRADED|MAINTENANCE) — same visual vocabulary as
+   * `getConnectionInfoHTML()`'s device `statusMap` (ONLINE/OFFLINE stay
+   * ALL-CAPS, DEGRADED reads "Atenção"). Exposed as a static so
+   * `CentralSettingsModal.patchGatewayInfoDom()` can mirror it exactly when
+   * an async `onFetchSettings` re-renders this card's values.
+   */
+  static GATEWAY_CONN_STATUS_MAP = {
+    ONLINE: { text: "ONLINE", color: "#22c55e" },
+    OFFLINE: { text: "OFFLINE", color: "#ef4444" },
+    DEGRADED: { text: "Aten\xE7\xE3o", color: "#f59e0b" },
+    MAINTENANCE: { text: "Manuten\xE7\xE3o", color: "#3b82f6" }
+  };
   getGatewayInfoHTML() {
     const g = this.config.gatewayInfo || {};
     const bool = (v) => v == null ? "\u2014" : v ? "Sim" : "N\xE3o";
     const num = (v, suffix = "") => v == null ? "\u2014" : `${v}${suffix}`;
     const txt = (v) => v == null || v === "" ? "\u2014" : v;
-    const row = (label, key, value) => `<div class="identity-date-row">
-        <div class="identity-date-label">${label}</div>
-        <div class="identity-date-value" id="gwinfo-${key}">${value}</div>
+    const infoRow = (label, key, valueHtml, fullWidth = false) => `<div class="info-row${fullWidth ? " full-width" : ""}">
+        <span class="info-label">${label}</span>
+        <span class="info-value" id="gwinfo-${key}">${valueHtml}</span>
       </div>`;
+    const connStatusInfo = _SettingsModalView.GATEWAY_CONN_STATUS_MAP[(g.connectionStatus || "").toUpperCase()] || {
+      text: txt(g.connectionStatus),
+      color: "#6b7280"
+    };
+    const isOnline = (g.connectionStatus || "").toUpperCase() === "ONLINE";
+    const connectedSinceAbs = isOnline ? this.formatIso(g.lastGatewaySuccessCheckAt) : "\u2014";
+    const connectedSinceRel = isOnline ? this.formatIsoRelativeDetailed(g.lastGatewaySuccessCheckAt) : "";
+    const lastCheckAbs = this.formatIso(g.lastGatewayCheckAt);
+    const lastCheckRel = this.formatIsoRelativeSimple(g.lastGatewayCheckAt);
+    const lc = g.lastConsumptionTelemetry;
+    const consumptionText = lc ? `${lc.value.toLocaleString("pt-BR")}${lc.unit ? ` ${lc.unit}` : ""} - ${this.formatIsoWithSeconds(
+      lc.timestamp
+    )} ${this.formatIsoRelativeSimple(lc.timestamp)}`.trim() : "\u2014";
+    const connectionInfoCard = `
+      <div class="form-card info-card-wide">
+        <h4 class="section-title">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 6px;">
+            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+          </svg>
+          Informa\xE7\xF5es de Conex\xE3o
+        </h4>
+        <div class="info-grid">
+          ${infoRow("Central:", "connCentral", txt(this.config.deviceLabel))}
+          ${infoRow(
+      "Status:",
+      "connectionStatus",
+      `<span style="color: ${connStatusInfo.color}; font-weight: 600;">${connStatusInfo.text}</span>`
+    )}
+          ${infoRow(
+      "Conectado desde:",
+      "lastGatewaySuccessCheckAt",
+      `${connectedSinceAbs}${connectedSinceRel ? ` <span class="time-since">${connectedSinceRel}</span>` : ""}`
+    )}
+          ${infoRow(
+      "\xDAltimo check status:",
+      "lastGatewayCheckAt",
+      `${lastCheckAbs}${lastCheckRel ? ` <span class="time-since">${lastCheckRel}</span>` : ""}`
+    )}
+          ${infoRow("\xDAltimo intervalo desconectado:", "disconnectInterval", "\u2014", true)}
+          ${infoRow("\xDAltima Telemetria de Consumo:", "lastConsumptionTelemetry", consumptionText, true)}
+          ${infoRow("Monitoramento habilitado:", "monitoringEnabled", bool(g.monitoringEnabled))}
+          ${infoRow("Lat\xEAncia:", "lastGatewayCheckLatencyMs", num(g.lastGatewayCheckLatencyMs, "ms"))}
+          ${infoRow("Resultado do probe:", "probeResult", txt(g.probeResult))}
+        </div>
+      </div>
+    `;
     return `
+      ${connectionInfoCard}
       <div class="gateway-info-grid">
-        <div class="form-card gateway-info-card">
+        <div class="form-card gateway-info-card info-card-wide">
           <h4 class="section-title">Identifica\xE7\xE3o</h4>
-          <div class="gateway-info-rows">
-            ${row("UUID", "uuid", txt(this.config.deviceId))}
-            ${row("Serial Number", "serialNumber", txt(g.serialNumber))}
-            ${row("Hardware ID", "hardwareId", txt(g.hardwareId))}
-            ${row("Tipo", "type", txt(g.type))}
-            ${row("Status (cadastro)", "status", txt(g.status))}
-            ${row("Firmware", "firmwareVersion", txt(g.firmwareVersion))}
-            ${row("Software", "softwareVersion", txt(g.softwareVersion))}
-            ${row("Frequ\xEAncia (canal)", "frequency", num(g.frequency))}
+          <div class="info-grid">
+            ${infoRow("UUID:", "uuid", txt(this.config.deviceId))}
+            ${infoRow("Serial Number:", "serialNumber", txt(g.serialNumber))}
+            ${infoRow("Hardware ID:", "hardwareId", txt(g.hardwareId))}
+            ${infoRow("Tipo:", "type", txt(g.type))}
+            ${infoRow("Status (cadastro):", "status", txt(g.status))}
+            ${infoRow("Firmware:", "firmwareVersion", txt(g.firmwareVersion))}
+            ${infoRow("Software:", "softwareVersion", txt(g.softwareVersion))}
+            ${infoRow("Frequ\xEAncia (canal):", "frequency", num(g.frequency))}
           </div>
         </div>
-        <div class="form-card gateway-info-card">
-          <h4 class="section-title">Conectividade (telemetria)</h4>
-          <div class="gateway-info-rows">
-            ${row("Status de conex\xE3o", "connectionStatus", txt(g.connectionStatus))}
-            ${row("Monitoramento habilitado", "monitoringEnabled", bool(g.monitoringEnabled))}
-            ${row("\xDAltima tentativa", "lastGatewayCheckAt", this.formatIso(g.lastGatewayCheckAt))}
-            ${row("\xDAltimo sucesso", "lastGatewaySuccessCheckAt", this.formatIso(g.lastGatewaySuccessCheckAt))}
-            ${row("Lat\xEAncia", "lastGatewayCheckLatencyMs", num(g.lastGatewayCheckLatencyMs, "ms"))}
-            ${row("Resultado do probe", "probeResult", txt(g.probeResult))}
-          </div>
-        </div>
-        <div class="form-card gateway-info-card">
+        <div class="form-card gateway-info-card info-card-wide">
           <h4 class="section-title">Estat\xEDsticas</h4>
-          <div class="gateway-info-rows">
-            ${row("Dispositivos conectados", "statsConnectedDevices", num(g.stats?.connectedDevices))}
-            ${row("Regras ativas", "statsActiveRules", num(g.stats?.activeRules))}
-            ${row("Eventos de sync pendentes", "statsPendingSyncEvents", num(g.stats?.pendingSyncEvents))}
-            ${row("Uptime", "statsUptimeSeconds", this.formatUptime(g.stats?.uptimeSeconds))}
-            ${row("\xDAltimo heartbeat", "statsLastHeartbeatAt", this.formatIso(g.stats?.lastHeartbeatAt))}
+          <div class="info-grid">
+            ${infoRow("Dispositivos conectados:", "statsConnectedDevices", num(g.stats?.connectedDevices))}
+            ${infoRow("Regras ativas:", "statsActiveRules", num(g.stats?.activeRules))}
+            ${infoRow("Eventos de sync pendentes:", "statsPendingSyncEvents", num(g.stats?.pendingSyncEvents))}
+            ${infoRow("Uptime:", "statsUptimeSeconds", this.formatUptime(g.stats?.uptimeSeconds))}
+            ${infoRow("\xDAltimo heartbeat:", "statsLastHeartbeatAt", this.formatIso(g.stats?.lastHeartbeatAt))}
           </div>
         </div>
-        <div class="form-card gateway-info-card">
+        <div class="form-card gateway-info-card info-card-wide">
           <h4 class="section-title">Metadados</h4>
-          <div class="gateway-info-rows">
-            ${row("Criado em", "createdAt", this.formatIso(g.createdAt))}
-            ${row("Atualizado em", "updatedAt", this.formatIso(g.updatedAt))}
-            ${row("Vers\xE3o", "version", num(g.version))}
+          <div class="info-grid">
+            ${infoRow("Criado em:", "createdAt", this.formatIso(g.createdAt))}
+            ${infoRow("Atualizado em:", "updatedAt", this.formatIso(g.updatedAt))}
+            ${infoRow("Vers\xE3o:", "version", num(g.version))}
           </div>
         </div>
       </div>
     `;
   }
+  escHtml(v) {
+    return String(v ?? "").replace(
+      /[&<>"']/g,
+      (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+    );
+  }
+  incidentsDeviceKey(s) {
+    return s.deviceName || `slave ${s.slaveId}`;
+  }
+  incidentsFmtHour(iso) {
+    return new Date(iso).toLocaleString("pt-BR", { timeZone: "America/Sao_Paulo", hour: "2-digit", minute: "2-digit" });
+  }
+  incidentsFmtDay(iso) {
+    return new Date(iso).toLocaleDateString("pt-BR", {
+      timeZone: "America/Sao_Paulo",
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    });
+  }
+  incidentsFmtFull(iso) {
+    return iso == null ? "\u2014" : new Date(iso).toLocaleString("pt-BR", {
+      timeZone: "America/Sao_Paulo",
+      day: "2-digit",
+      month: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+  /**
+   * RFC-0232 — "Incidentes" tab (central + admin MyIO only): what the
+   * No-Consumption Interpolation agent (`data-ingestion-prod`) fabricated for
+   * THIS central. Inspired by that app's own ledger
+   * (`InterpolationPanel.tsx`'s "Logs" tab, ~L450-548) but simplified for a
+   * single-central context: that page groups by GATEWAY first (it shows every
+   * central at once) — here there's only one central, so grouping starts one
+   * level down, by DEVICE, then by DAY, each day showing its hour slots.
+   * `config.interpolatedSlots` arrives pre-fetched from the host — nothing is
+   * fetched in here, ever; the header controls (busca/dispositivos/período)
+   * only filter that one array client-side. This method runs once, at
+   * construction time, and builds the STATIC shell (filters header + KPI/body
+   * mount points); `refreshIncidentsView()` re-renders the KPI/body pair on
+   * every filter change via `this.modal.querySelector`.
+   */
+  getInterpolationIncidentsHTML() {
+    this.incidentsAllSlots = this.config.interpolatedSlots ?? [];
+    const deviceKeys = Array.from(new Set(this.incidentsAllSlots.map((s) => this.incidentsDeviceKey(s)))).sort(
+      (a, b) => a.localeCompare(b, "pt-BR")
+    );
+    this.incidentsSelectedDevices = new Set(deviceKeys);
+    if (this.incidentsAllSlots.length === 0) {
+      return `<div class="incidents-empty">Nenhuma interpola\xE7\xE3o registrada para esta central no per\xEDodo consultado pelo host.</div>`;
+    }
+    const devicesPanel = deviceKeys.map(
+      (key) => `
+        <label class="incidents-multiselect__item">
+          <input type="checkbox" checked value="${this.escHtml(key)}" data-role="incidents-device-checkbox">
+          <span>${this.escHtml(key)}</span>
+        </label>`
+    ).join("");
+    return `
+      <div class="incidents-filters">
+        <div class="incidents-filter incidents-filter--search">
+          <label class="incidents-filter__label">Buscar dispositivo</label>
+          <input type="text" class="incidents-search-input" placeholder="Nome do dispositivo\u2026" data-role="incidents-search-input">
+        </div>
+        <div class="incidents-filter incidents-filter--devices">
+          <label class="incidents-filter__label">Dispositivos</label>
+          <div class="incidents-multiselect">
+            <button type="button" class="incidents-multiselect__toggle" data-role="incidents-devices-toggle">
+              <span data-role="incidents-devices-summary">Todos (${deviceKeys.length})</span>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg>
+            </button>
+            <div class="incidents-multiselect__panel" data-role="incidents-devices-panel" hidden>
+              <div class="incidents-multiselect__actions">
+                <button type="button" data-role="incidents-devices-all">Marcar todos</button>
+                <button type="button" data-role="incidents-devices-none">Desmarcar todos</button>
+              </div>
+              ${devicesPanel}
+            </div>
+          </div>
+        </div>
+        <div class="incidents-filter incidents-filter--period">
+          <label class="incidents-filter__label">Per\xEDodo</label>
+          <div id="incidents-daterange-${this.incidentsIdSuffix}" class="incidents-daterange-mount"></div>
+        </div>
+      </div>
+      <div class="incidents-kpis">${this.buildIncidentsKpisHtml(this.incidentsAllSlots)}</div>
+      <div class="incidents-body">${this.buildIncidentsBodyHtml(this.incidentsAllSlots)}</div>
+    `;
+  }
+  /** 4 small KPI cards summarizing the currently-filtered slot set. */
+  buildIncidentsKpisHtml(slots) {
+    if (slots.length === 0) {
+      return `<div class="incidents-kpi-empty">Nenhuma interpola\xE7\xE3o corresponde aos filtros atuais.</div>`;
+    }
+    const deviceCount = new Set(slots.map((s) => this.incidentsDeviceKey(s))).size;
+    const dayCount = new Set(slots.map((s) => this.incidentsFmtDay(s.hourStart))).size;
+    const withIncident = slots.filter((s) => s.incidentRef).length;
+    const pct = slots.length ? Math.round(withIncident / slots.length * 100) : 0;
+    const kpi = (label, value, sub) => `
+      <div class="incidents-kpi">
+        <div class="incidents-kpi__value">${value}</div>
+        <div class="incidents-kpi__label">${label}</div>
+        ${sub ? `<div class="incidents-kpi__sub">${sub}</div>` : ""}
+      </div>`;
+    return [
+      kpi("Interpola\xE7\xF5es", String(slots.length)),
+      kpi("Dispositivos", String(deviceCount)),
+      kpi("Dias com atividade", String(dayCount)),
+      kpi("Com incidente vinculado", String(withIncident), `${pct}% do total`)
+    ].join("");
+  }
+  /** Device → day → hour-slot table, for whatever slot subset the caller already filtered. */
+  buildIncidentsBodyHtml(slots) {
+    if (slots.length === 0) {
+      return `<div class="incidents-empty">Nenhuma interpola\xE7\xE3o corresponde aos filtros atuais.</div>`;
+    }
+    const byDevice = /* @__PURE__ */ new Map();
+    for (const s of slots) {
+      const key = this.incidentsDeviceKey(s);
+      (byDevice.get(key) ?? byDevice.set(key, []).get(key)).push(s);
+    }
+    const deviceNames = Array.from(byDevice.keys()).sort((a, b) => a.localeCompare(b, "pt-BR"));
+    const deviceSections = deviceNames.map((deviceName) => {
+      const deviceSlots = byDevice.get(deviceName).slice().sort((a, b) => a.hourStart.localeCompare(b.hourStart));
+      const byDay = /* @__PURE__ */ new Map();
+      for (const s of deviceSlots) {
+        const day = this.incidentsFmtDay(s.hourStart);
+        (byDay.get(day) ?? byDay.set(day, []).get(day)).push(s);
+      }
+      const daySections = Array.from(byDay.entries()).map(([day, daySlots]) => {
+        const rows = daySlots.map(
+          (s) => `
+              <tr>
+                <td class="mono">${this.incidentsFmtHour(s.hourStart)}</td>
+                <td class="num mono">${s.value.toFixed(1)}</td>
+                <td class="mono muted">${this.incidentsFmtHour(s.sourceHour)}</td>
+                <td class="mono muted" title="${this.escHtml(s.ruleId)}">${this.escHtml(s.ruleId.slice(0, 8))}</td>
+                <td>${s.incidentRef ? `<code>${this.escHtml(s.incidentRef)}</code>` : '<span class="muted">\u2014</span>'}</td>
+                <td class="muted">${this.incidentsFmtFull(s.createdAt)}</td>
+              </tr>`
+        ).join("");
+        return `
+              <div class="incidents-day">
+                <div class="incidents-day__header">
+                  <span>${this.escHtml(day)}</span>
+                  <span class="incidents-day__count">${daySlots.length} hora${daySlots.length === 1 ? "" : "s"}</span>
+                </div>
+                <table class="incidents-table">
+                  <thead>
+                    <tr><th>Hora</th><th>Valor</th><th>Fonte LOCF</th><th>Regra</th><th>Incidente</th><th>Gravado</th></tr>
+                  </thead>
+                  <tbody>${rows}</tbody>
+                </table>
+              </div>`;
+      }).join("");
+      return `
+          <div class="incidents-device">
+            <button type="button" class="incidents-device__header" data-role="toggle-incidents-device">
+              <svg class="incidents-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+              <span class="incidents-device__name">${this.escHtml(deviceName)}</span>
+              <span class="incidents-device__count">${deviceSlots.length} hora${deviceSlots.length === 1 ? "" : "s"} \xB7 ${byDay.size} dia${byDay.size === 1 ? "" : "s"}</span>
+            </button>
+            <div class="incidents-device__body">${daySections}</div>
+          </div>`;
+    }).join("");
+    return `
+      <div class="incidents-summary">${slots.length} interpola\xE7\xE3o(\xF5es) \xB7 ${deviceNames.length} dispositivo(s)</div>
+      <div class="incidents-wrap">${deviceSections}</div>
+    `;
+  }
+  /** Applies search + device + period filters to `incidentsAllSlots`. */
+  getFilteredIncidentsSlots() {
+    const search = this.incidentsSearch.trim().toLowerCase();
+    const { startISO, endISO } = this.incidentsDateRange;
+    return this.incidentsAllSlots.filter((s) => {
+      const key = this.incidentsDeviceKey(s);
+      if (!this.incidentsSelectedDevices.has(key)) return false;
+      if (search && !key.toLowerCase().includes(search)) return false;
+      if (startISO && s.hourStart < startISO) return false;
+      if (endISO && s.hourStart > endISO) return false;
+      return true;
+    });
+  }
+  /** Re-renders the KPI cards + device/day body after any filter change (search/devices/period). */
+  refreshIncidentsView() {
+    const filtered = this.getFilteredIncidentsSlots();
+    const kpisEl = this.modal.querySelector(".incidents-kpis");
+    const bodyEl = this.modal.querySelector(".incidents-body");
+    if (kpisEl) kpisEl.innerHTML = this.buildIncidentsKpisHtml(filtered);
+    if (bodyEl) bodyEl.innerHTML = this.buildIncidentsBodyHtml(filtered);
+    const summaryEl = this.modal.querySelector('[data-role="incidents-devices-summary"]');
+    if (summaryEl) {
+      const total = this.incidentsAllSlots.length ? new Set(this.incidentsAllSlots.map((s) => this.incidentsDeviceKey(s))).size : 0;
+      const selected = this.incidentsSelectedDevices.size;
+      summaryEl.textContent = selected === total ? `Todos (${total})` : `${selected} de ${total}`;
+    }
+  }
+  /**
+   * Wires the Incidentes tab's static controls (search input, devices
+   * multiselect dropdown, device-group collapse). Called once from `render()`
+   * — all delegated on `this.modal`, so it survives the KPI/body innerHTML
+   * swaps `refreshIncidentsView()` does (those never touch the header). The
+   * date-range picker is wired separately in `initIncidentsDateRange()`
+   * (async — see that method).
+   */
+  bindIncidentsTabEvents() {
+    this.modal.addEventListener("input", (event) => {
+      const target = event.target;
+      if (target.dataset.role !== "incidents-search-input") return;
+      this.incidentsSearch = target.value;
+      this.refreshIncidentsView();
+    });
+    this.modal.addEventListener("click", (event) => {
+      const target = event.target;
+      const deviceHeader = target.closest('[data-role="toggle-incidents-device"]');
+      if (deviceHeader) {
+        deviceHeader.closest(".incidents-device")?.classList.toggle("is-collapsed");
+        return;
+      }
+      const panel = this.modal.querySelector('[data-role="incidents-devices-panel"]');
+      const toggle = target.closest('[data-role="incidents-devices-toggle"]');
+      if (toggle && panel) {
+        panel.hidden = !panel.hidden;
+        return;
+      }
+      if (target.dataset.role === "incidents-devices-all" || target.dataset.role === "incidents-devices-none") {
+        const checkAll = target.dataset.role === "incidents-devices-all";
+        this.modal.querySelectorAll('[data-role="incidents-device-checkbox"]').forEach((cb) => {
+          cb.checked = checkAll;
+        });
+        this.incidentsSelectedDevices = checkAll ? new Set(this.incidentsAllSlots.map((s) => this.incidentsDeviceKey(s))) : /* @__PURE__ */ new Set();
+        this.refreshIncidentsView();
+        return;
+      }
+      if (panel && !panel.hidden && !target.closest('[data-role="incidents-devices-toggle"]') && !panel.contains(target)) {
+        panel.hidden = true;
+      }
+    });
+    this.modal.addEventListener("change", (event) => {
+      const target = event.target;
+      if (target.dataset.role !== "incidents-device-checkbox") return;
+      const cb = target;
+      if (cb.checked) this.incidentsSelectedDevices.add(cb.value);
+      else this.incidentsSelectedDevices.delete(cb.value);
+      this.refreshIncidentsView();
+    });
+  }
+  /**
+   * Mounts the period date-range picker into the Incidentes tab's header —
+   * async (loads jQuery/moment/daterangepicker from CDN on first use, see
+   * `createInputDateRangePickerInsideDIV`), so this runs from `render()`
+   * AFTER the modal is attached to the DOM, same timing as
+   * `initAnnotationsTab()`/`initAlarmsTab()`. No-ops when the tab isn't
+   * rendered at all (non-admin / non-gateway).
+   */
+  async initIncidentsDateRange() {
+    if (!(this.config.isGateway && this.isSuperAdmin())) return;
+    const mountId = `incidents-daterange-${this.incidentsIdSuffix}`;
+    if (!document.getElementById(mountId)) return;
+    try {
+      this.incidentsDateRangeController = await createInputDateRangePickerInsideDIV({
+        containerId: mountId,
+        inputId: `${mountId}-input`,
+        label: "",
+        placeholder: "Todo o per\xEDodo",
+        showHelper: false,
+        pickerOptions: {
+          includeTime: true,
+          onApply: (result) => {
+            this.incidentsDateRange = { startISO: result.startISO, endISO: result.endISO };
+            this.refreshIncidentsView();
+          }
+        }
+      });
+    } catch (err) {
+      console.warn("[SettingsModalView] Incidentes: failed to mount date-range picker:", err);
+    }
+  }
   getDeviceImage(deviceType) {
     let normalized = (deviceType || "").toUpperCase();
     if (normalized === "3F_MEDIDOR") {
@@ -61960,8 +63037,7 @@ var SettingsModalView = class {
         normalized = profile.toUpperCase();
       }
     }
-    const DEFAULT = "https://cdn-icons-png.flaticon.com/512/1178/1178428.png";
-    const url = deviceIcons[normalized] || DEFAULT;
+    const url = deviceIcons[normalized] || DEFAULT_DEVICE_ICON;
     return `<img src="${url}" class="identity-device-image" alt="${normalized}" />`;
   }
   getConsumptionLimits() {
@@ -62364,7 +63440,19 @@ var SettingsModalView = class {
           z-index: 9999999;
           font-family: 'Nunito', system-ui, sans-serif;
         }
-        
+
+        /* RFC-0232: the "Incidentes" period picker (createInputDateRangePickerInsideDIV
+           -> jQuery daterangepicker) always appends its calendar dropdown to
+           document.body, as a SIBLING of this overlay, not a descendant \u2014 so it
+           can't be reached with a normal descendant selector. The plugin's own
+           default z-index (~10000) is far below this overlay's 9999999 (chosen
+           to beat ThingsBoard's Angular Material overlays in production), so
+           without this override the calendar renders but is fully hidden behind
+           the modal, making the input look like it "doesn't open". */
+        .daterangepicker {
+          z-index: 10000000 !important;
+        }
+
         .myio-device-settings-modal {
           background: white;
           border-radius: 8px;
@@ -62466,11 +63554,277 @@ var SettingsModalView = class {
         .modal-tab-badge--alarms      { background: #dc2626; }
         .modal-tab-badge--chamados    { background: #0891b2; }
         .modal-tab-badge--exclusion   { background: #d97706; }
+        .modal-tab-badge--incidents   { background: #7C3AED; }
 
         .tab-content {
           min-height: 400px;
         }
 
+        /* RFC-0232: Incidentes (interpola\xE7\xE3o) tab \u2014 device \u2192 day \u2192 hour slots. */
+        .incidents-filters {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: flex-end;
+          gap: 16px;
+          margin-bottom: 16px;
+          padding-bottom: 16px;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        .incidents-filter {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        .incidents-filter--search { flex: 1 1 123px; min-width: 100px; }
+        .incidents-filter--devices { flex: 0 0 auto; }
+        .incidents-filter--period { flex: 0 0 auto; }
+        .incidents-filter__label {
+          font: 700 11px 'Nunito', system-ui, sans-serif;
+          color: #6b7280;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+        }
+        .incidents-search-input {
+          width: 100%;
+          padding: 7px 10px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font: 600 13px 'Nunito', system-ui, sans-serif;
+          color: #1f2937;
+          box-sizing: border-box;
+        }
+        .incidents-search-input:focus { outline: 2px solid #7C3AED; outline-offset: 1px; }
+        .incidents-multiselect { position: relative; }
+        .incidents-multiselect__toggle {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 7px 12px;
+          min-width: 200px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          background: #fff;
+          font: 600 13px 'Nunito', system-ui, sans-serif;
+          color: #1f2937;
+          cursor: pointer;
+          white-space: nowrap;
+        }
+        .incidents-multiselect__toggle:hover { border-color: #7C3AED; }
+        .incidents-multiselect__panel {
+          position: absolute;
+          top: calc(100% + 4px);
+          left: 0;
+          z-index: 20;
+          min-width: 220px;
+          max-height: 260px;
+          overflow-y: auto;
+          background: #fff;
+          border: 1px solid #d1d5db;
+          border-radius: 8px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+          padding: 8px;
+        }
+        .incidents-multiselect__actions {
+          display: flex;
+          gap: 8px;
+          padding-bottom: 6px;
+          margin-bottom: 6px;
+          border-bottom: 1px solid #f3f4f6;
+        }
+        .incidents-multiselect__actions button {
+          flex: 1;
+          padding: 4px 6px;
+          border: none;
+          border-radius: 4px;
+          background: #f5f3ff;
+          color: #5b21b6;
+          font: 700 11px 'Nunito', system-ui, sans-serif;
+          cursor: pointer;
+        }
+        .incidents-multiselect__actions button:hover { background: #ede9fe; }
+        .incidents-multiselect__item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 5px 4px;
+          font: 600 13px 'Nunito', system-ui, sans-serif;
+          color: #374151;
+          cursor: pointer;
+          border-radius: 4px;
+        }
+        .incidents-multiselect__item:hover { background: #f9fafb; }
+        .incidents-daterange-mount .myio-daterange-wrapper {
+          margin-bottom: 0;
+          padding: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .incidents-daterange-mount {
+          min-width: 280px;
+        }
+        .incidents-daterange-mount .myio-daterange-input {
+          padding: 7px 10px;
+          font-size: 13px;
+          width: 100%;
+          min-width: 280px;
+          max-width: 340px;
+        }
+        .incidents-kpis {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+          gap: 12px;
+          margin-bottom: 16px;
+        }
+        .incidents-kpi {
+          padding: 12px 14px;
+          border-radius: 8px;
+          background: #f5f3ff;
+          border: 1px solid #e9d5ff;
+        }
+        .incidents-kpi__value {
+          font: 800 22px 'Nunito', system-ui, sans-serif;
+          color: #5b21b6;
+        }
+        .incidents-kpi__label {
+          margin-top: 2px;
+          font: 700 11px 'Nunito', system-ui, sans-serif;
+          color: #6b7280;
+          text-transform: uppercase;
+          letter-spacing: 0.02em;
+        }
+        .incidents-kpi__sub {
+          margin-top: 2px;
+          font-size: 11px;
+          color: #9ca3af;
+        }
+        .incidents-kpi-empty {
+          margin-bottom: 16px;
+          padding: 10px 14px;
+          border-radius: 8px;
+          background: #f9fafb;
+          color: #9ca3af;
+          font-size: 12px;
+        }
+        .theme-dark .incidents-filters { border-color: #374151; }
+        .theme-dark .incidents-filter__label { color: #9ca3af; }
+        .theme-dark .incidents-search-input { background: #111827; border-color: #4b5563; color: #e5e7eb; }
+        .theme-dark .incidents-multiselect__toggle { background: #111827; border-color: #4b5563; color: #e5e7eb; }
+        .theme-dark .incidents-multiselect__panel { background: #1f2937; border-color: #374151; }
+        .theme-dark .incidents-multiselect__item { color: #e5e7eb; }
+        .theme-dark .incidents-multiselect__item:hover { background: #111827; }
+        .theme-dark .incidents-kpi { background: #2e1065; border-color: #4c1d95; }
+        .theme-dark .incidents-kpi__value { color: #d8b4fe; }
+        .theme-dark .incidents-kpi-empty { background: #111827; color: #6b7280; }
+
+        .incidents-summary {
+          margin-bottom: 14px;
+          font-size: 13px;
+          font-weight: 600;
+          color: #6b7280;
+        }
+        .incidents-empty {
+          padding: 40px 20px;
+          text-align: center;
+          color: #6b7280;
+          font-size: 14px;
+          border: 1px dashed #d1d5db;
+          border-radius: 8px;
+        }
+        .incidents-wrap {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        .incidents-device {
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          overflow: hidden;
+        }
+        .incidents-device__header {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+          padding: 10px 14px;
+          background: #f5f3ff;
+          border: none;
+          cursor: pointer;
+          font: 700 13px 'Nunito', system-ui, sans-serif;
+          color: #5b21b6;
+          text-align: left;
+        }
+        .incidents-device__header:hover { background: #ede9fe; }
+        /* Chevron SVG points right (\u25B6); rotated 90\xB0 to point down (\u25BC) while
+           expanded \u2014 the default state, since a group starts open. */
+        .incidents-chevron { flex-shrink: 0; transition: transform 0.15s ease; transform: rotate(90deg); }
+        .incidents-device.is-collapsed .incidents-chevron { transform: rotate(0deg); }
+        .incidents-device.is-collapsed .incidents-device__body { display: none; }
+        .incidents-device__name { flex: 1; }
+        .incidents-device__count {
+          font-size: 11px;
+          font-weight: 600;
+          color: #7c3aed;
+          background: #fff;
+          border-radius: 999px;
+          padding: 2px 8px;
+        }
+        .incidents-device__body {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          padding: 10px 14px;
+        }
+        .incidents-day__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 4px 2px;
+          font: 700 12px 'Nunito', system-ui, sans-serif;
+          color: #374151;
+        }
+        .incidents-day__count {
+          font-size: 11px;
+          font-weight: 600;
+          color: #6b7280;
+        }
+        .incidents-table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 12px;
+        }
+        .incidents-table th {
+          text-align: left;
+          padding: 6px 8px;
+          background: #f9fafb;
+          color: #6b7280;
+          font-weight: 600;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        .incidents-table td {
+          padding: 6px 8px;
+          border-bottom: 1px solid #f3f4f6;
+          color: #1f2937;
+        }
+        .incidents-table td.num { text-align: right; }
+        .incidents-table td.mono { font-family: 'Courier New', Courier, monospace; }
+        .incidents-table td.muted { color: #9ca3af; }
+        .incidents-table code {
+          color: #7c3aed;
+          background: #f5f3ff;
+          border-radius: 4px;
+          padding: 1px 5px;
+          font-size: 11px;
+        }
+        .theme-dark .incidents-empty { border-color: #4b5563; color: #9ca3af; }
+        .theme-dark .incidents-device { border-color: #374151; }
+        .theme-dark .incidents-device__header { background: #2e1065; color: #d8b4fe; }
+        .theme-dark .incidents-device__header:hover { background: #3b0764; }
+        .theme-dark .incidents-device__count { background: #111827; color: #c4b5fd; }
+        .theme-dark .incidents-day__header { color: #e5e7eb; }
+        .theme-dark .incidents-table th { background: #111827; color: #9ca3af; border-color: #374151; }
+        .theme-dark .incidents-table td { color: #e5e7eb; border-color: #1f2937; }
+        .theme-dark .incidents-table code { background: #2e1065; }
+
         /* Loading spinner for annotations tab */
         .loading-spinner {
           width: 32px;
@@ -62613,20 +63967,22 @@ var SettingsModalView = class {
           height: fit-content;
         }
 
-        /* "Central" tab (isGateway) \u2014 read-only identity/telemetry, 4 form-cards
-           in a responsive grid, each a stack of identity-date-row pairs. */
+        /* Central/gateway identity+telemetry (isGateway), inline in Geral \u2014
+           one section per line, same visual pattern as "Informa\xE7\xF5es de
+           Conex\xE3o" (.info-card-wide + .info-grid/.info-row) for every card:
+           Identifica\xE7\xE3o/Estat\xEDsticas/Metadados here, plus the Conectividade
+           fieldset CentralSettingsModal injects after them.
+           .gateway-info-grid is just a vertical stack \u2014 .gateway-info-card
+           carries no sizing of its own any more (that lived here back when
+           these were narrower, side-by-side flex-wrap cards); the full-width
+           look now comes entirely from .info-card-wide. */
         .gateway-info-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-          gap: 16px;
-        }
-        .gateway-info-card .section-title {
-          margin-bottom: 12px;
-        }
-        .gateway-info-rows {
           display: flex;
           flex-direction: column;
-          gap: 10px;
+          gap: 16px;
+        }
+        .gateway-info-card {
+          margin: 0;
         }
 
         /* RFC-0180: Identity card \u2014 2-column \xD7 6-row grid */
@@ -64266,6 +65622,7 @@ function mapToGatewayInfo(data) {
     softwareVersion: data.softwareVersion ?? null,
     frequency: data.frequency ?? null,
     stats: data.stats ?? null,
+    lastConsumptionTelemetry: data.lastConsumptionTelemetry ?? null,
     createdAt: data.createdAt ?? null,
     updatedAt: data.updatedAt ?? null,
     version: data.version ?? null
@@ -64283,6 +65640,43 @@ function formatIsoPtBr(iso) {
     minute: "2-digit"
   });
 }
+function formatIsoPtBrWithSeconds(iso) {
+  if (!iso) return "\u2014";
+  const ms = Date.parse(iso);
+  if (Number.isNaN(ms)) return "\u2014";
+  return new Date(ms).toLocaleString("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatIsoRelativeDetailed(iso) {
+  const ms = iso ? Date.parse(iso) : NaN;
+  if (Number.isNaN(ms)) return "";
+  const diffMinutes = Math.floor((Date.now() - ms) / 6e4);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays > 0) {
+    return `(${diffDays}d:${String(diffHours % 24).padStart(2, "0")}hs:${String(diffMinutes % 60).padStart(2, "0")}mins atr\xE1s)`;
+  }
+  if (diffHours > 0) return `(${diffHours}hs:${String(diffMinutes % 60).padStart(2, "0")}mins atr\xE1s)`;
+  if (diffMinutes > 0) return `(${diffMinutes}mins atr\xE1s)`;
+  return "(agora)";
+}
+function formatIsoRelativeSimple(iso) {
+  const ms = iso ? Date.parse(iso) : NaN;
+  if (Number.isNaN(ms)) return "";
+  const diffMinutes = Math.floor((Date.now() - ms) / 6e4);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays > 0) return `(${diffDays}d atr\xE1s)`;
+  if (diffHours > 0) return `(${diffHours}h atr\xE1s)`;
+  if (diffMinutes > 0) return `(${diffMinutes}min atr\xE1s)`;
+  return "(agora)";
+}
 function formatUptime(seconds) {
   if (seconds == null || Number.isNaN(seconds)) return "\u2014";
   const d = Math.floor(seconds / 86400);
@@ -64299,6 +65693,10 @@ function patchGatewayInfoDom(root, uuid, data) {
     const el2 = root.querySelector(`#gwinfo-${key}`);
     if (el2) el2.textContent = value;
   };
+  const setHtml = (key, html) => {
+    const el2 = root.querySelector(`#gwinfo-${key}`);
+    if (el2) el2.innerHTML = html;
+  };
   set("uuid", uuid || "\u2014");
   set("serialNumber", data.serialNumber || "\u2014");
   set("hardwareId", data.hardwareId || "\u2014");
@@ -64307,10 +65705,33 @@ function patchGatewayInfoDom(root, uuid, data) {
   set("firmwareVersion", data.firmwareVersion || "\u2014");
   set("softwareVersion", data.softwareVersion || "\u2014");
   set("frequency", data.frequency != null ? String(data.frequency) : "\u2014");
-  set("connectionStatus", data.connectionStatus || "\u2014");
+  set("connCentral", data.name || "\u2014");
+  const connStatusInfo = SettingsModalView.GATEWAY_CONN_STATUS_MAP[(data.connectionStatus || "").toUpperCase()] || {
+    text: data.connectionStatus || "\u2014",
+    color: "#6b7280"
+  };
+  setHtml("connectionStatus", `<span style="color: ${connStatusInfo.color}; font-weight: 600;">${connStatusInfo.text}</span>`);
+  const isOnline = (data.connectionStatus || "").toUpperCase() === "ONLINE";
+  const connectedSinceAbs = isOnline ? formatIsoPtBr(data.lastGatewaySuccessCheckAt) : "\u2014";
+  const connectedSinceRel = isOnline ? formatIsoRelativeDetailed(data.lastGatewaySuccessCheckAt) : "";
+  setHtml(
+    "lastGatewaySuccessCheckAt",
+    `${connectedSinceAbs}${connectedSinceRel ? ` <span class="time-since">${connectedSinceRel}</span>` : ""}`
+  );
+  const lastCheckAbs = formatIsoPtBr(data.lastGatewayCheckAt);
+  const lastCheckRel = formatIsoRelativeSimple(data.lastGatewayCheckAt);
+  setHtml(
+    "lastGatewayCheckAt",
+    `${lastCheckAbs}${lastCheckRel ? ` <span class="time-since">${lastCheckRel}</span>` : ""}`
+  );
+  const lc = data.lastConsumptionTelemetry;
+  setHtml(
+    "lastConsumptionTelemetry",
+    lc ? `${lc.value.toLocaleString("pt-BR")}${lc.unit ? ` ${lc.unit}` : ""} - ${formatIsoPtBrWithSeconds(
+      lc.timestamp
+    )} ${formatIsoRelativeSimple(lc.timestamp)}`.trim() : "\u2014"
+  );
   set("monitoringEnabled", data.monitoringEnabled == null ? "\u2014" : data.monitoringEnabled ? "Sim" : "N\xE3o");
-  set("lastGatewayCheckAt", formatIsoPtBr(data.lastGatewayCheckAt));
-  set("lastGatewaySuccessCheckAt", formatIsoPtBr(data.lastGatewaySuccessCheckAt));
   set("lastGatewayCheckLatencyMs", data.lastGatewayCheckLatencyMs != null ? `${data.lastGatewayCheckLatencyMs}ms` : "\u2014");
   set("probeResult", data.probeResult || "\u2014");
   set("statsConnectedDevices", data.stats?.connectedDevices != null ? String(data.stats.connectedDevices) : "\u2014");
@@ -64325,33 +65746,38 @@ function patchGatewayInfoDom(root, uuid, data) {
 function connectivityFieldsetHtml(data, l, language, errors) {
   const err = (field) => errors[field] ? `<span class="myio-csettings__field-error">${escAttr4(errors[field])}</span>` : "";
   const errClass = (field) => errors[field] ? " myio-csettings__input--error" : "";
+  const inputRow = (label, field, inputHtml) => `
+    <div class="info-row">
+      <span class="info-label">${escAttr4(label)}</span>
+      <span class="info-value">${inputHtml}${err(field)}</span>
+    </div>`;
   return `
-    <div class="form-card gateway-info-card myio-csettings-connectivity">
+    <div class="form-card gateway-info-card info-card-wide myio-csettings-connectivity">
       <h4 class="section-title">${escAttr4(
     l.connectivitySection || (language === "en" ? "Connectivity Settings" : "Configura\xE7\xE3o de Conectividade")
   )}</h4>
-      <div class="myio-csettings__fields">
-        <label class="myio-csettings__field">
-          <span>${escAttr4(l.offlineGraceLabel || (language === "en" ? "Grace window (min)" : "Janela de gra\xE7a (min)"))}</span>
-          <input type="number" min="0" step="1" name="offlineGraceMinutes" value="${data.offlineGraceMinutes}" class="myio-csettings__input${errClass(
-    "offlineGraceMinutes"
-  )}" />
-          ${err("offlineGraceMinutes")}
-        </label>
-        <label class="myio-csettings__field">
-          <span>${escAttr4(l.blipToleranceLabel || (language === "en" ? "Blip tolerance (min)" : "Toler\xE2ncia de blip (min)"))}</span>
-          <input type="number" min="0" step="1" name="blipToleranceMinutes" value="${data.blipToleranceMinutes}" class="myio-csettings__input${errClass(
-    "blipToleranceMinutes"
-  )}" />
-          ${err("blipToleranceMinutes")}
-        </label>
-        <label class="myio-csettings__field">
-          <span>${escAttr4(l.offlineHardLabel || (language === "en" ? "Hard-offline threshold (min)" : "Limiar de hard-offline (min)"))}</span>
-          <input type="number" min="0" step="1" name="offlineHardMinutes" value="${data.offlineHardMinutes ?? ""}" placeholder="${escAttr4(l.offlineHardHint || (language === "en" ? "empty = disabled" : "vazio = desativado"))}" class="myio-csettings__input${errClass(
-    "offlineHardMinutes"
-  )}" />
-          ${err("offlineHardMinutes")}
-        </label>
+      <div class="info-grid">
+        ${inputRow(
+    `${l.offlineGraceLabel || (language === "en" ? "Grace window (min)" : "Janela de gra\xE7a (min)")}:`,
+    "offlineGraceMinutes",
+    `<input type="number" min="0" step="1" name="offlineGraceMinutes" value="${data.offlineGraceMinutes}" class="myio-csettings__input${errClass(
+      "offlineGraceMinutes"
+    )}" />`
+  )}
+        ${inputRow(
+    `${l.blipToleranceLabel || (language === "en" ? "Blip tolerance (min)" : "Toler\xE2ncia de blip (min)")}:`,
+    "blipToleranceMinutes",
+    `<input type="number" min="0" step="1" name="blipToleranceMinutes" value="${data.blipToleranceMinutes}" class="myio-csettings__input${errClass(
+      "blipToleranceMinutes"
+    )}" />`
+  )}
+        ${inputRow(
+    `${l.offlineHardLabel || (language === "en" ? "Hard-offline threshold (min)" : "Limiar de hard-offline (min)")}:`,
+    "offlineHardMinutes",
+    `<input type="number" min="0" step="1" name="offlineHardMinutes" value="${data.offlineHardMinutes ?? ""}" placeholder="${escAttr4(l.offlineHardHint || (language === "en" ? "empty = disabled" : "vazio = desativado"))}" class="myio-csettings__input${errClass(
+      "offlineHardMinutes"
+    )}" />`
+  )}
       </div>
     </div>
   `;
@@ -64362,16 +65788,13 @@ function injectStyles9() {
   const tag = document.createElement("style");
   tag.id = STYLE_ID4;
   tag.textContent = `
-.myio-csettings__fields{display:flex;flex-direction:column;gap:10px;}
-.myio-csettings__field{display:flex;flex-direction:column;gap:4px;}
-.myio-csettings__field span{font:700 12px 'Nunito', system-ui, sans-serif;color:#374151;}
 .myio-csettings__input{
-  font:600 13px 'Nunito', system-ui, sans-serif;padding:7px 10px;border-radius:8px;
-  border:1px solid #e5e7eb;background:#fff;color:#1f2937;width:100%;box-sizing:border-box;
+  font:600 13px 'Nunito', system-ui, sans-serif;padding:6px 8px;border-radius:6px;
+  border:1px solid #e5e7eb;background:#fff;color:#1f2937;width:100px;box-sizing:border-box;
+  text-align:right;
 }
 .myio-csettings__input--error{border-color:#dc2626;}
-.myio-csettings__field-error{font:700 11px 'Nunito', system-ui, sans-serif;color:#dc2626;}
-.theme-dark .myio-csettings__field span{color:#d1d5db;}
+.myio-csettings__field-error{display:block;margin-top:4px;font:700 11px 'Nunito', system-ui, sans-serif;color:#dc2626;text-align:right;}
 .theme-dark .myio-csettings__input{background:#111827;border-color:#4b5563;color:#e5e7eb;}
 `;
   document.head.appendChild(tag);
@@ -64403,6 +65826,12 @@ var CentralSettingsModal = class extends SettingsModalView {
       deviceId: params.id,
       deviceLabel: params.name,
       deviceName: params.uuid ?? void 0,
+      // RFC-0200: identity-card image (Geral tab) — without this, getDeviceImage()
+      // sees an empty deviceType and falls back to DEFAULT_DEVICE_ICON (generic
+      // 3F_MEDIDOR art) instead of deviceIcons.GATEWAY. A real device never sets
+      // deviceType to this value (it's not a valid TB deviceProfile), so this is
+      // fully inert for the device settings modal, same as isGateway above.
+      deviceType: "GATEWAY",
       // No domain concept for a central — suppresses the energy/water/
       // temperature-only sections and removes the "Excluir Grupos" tab
       // (gated on `domain === 'energy'` in the base class).
@@ -64412,11 +65841,15 @@ var CentralSettingsModal = class extends SettingsModalView {
       jwtToken: "",
       mapInstantaneousPower: {},
       deviceMapInstaneousPower: {},
-      // Native "Central" tab (see file doc) — read-only GCDR identity/
-      // telemetry. Real devices never set isGateway, so this is fully inert
+      // Inline gateway identity/telemetry in Geral (see file doc) — read-only
+      // GCDR data. Real devices never set isGateway, so this is fully inert
       // for the device settings modal.
       isGateway: true,
       gatewayInfo: mapToGatewayInfo(initialData),
+      // RFC-0232: "Incidentes" tab gate + data — see CentralSettingsModalParams doc.
+      userEmail: params.userEmail,
+      superadmin: params.superadmin,
+      interpolatedSlots: params.interpolatedSlots,
       onSave: () => Promise.resolve(),
       // rebound below once `this` exists (see class doc)
       onClose: () => {
@@ -64436,7 +65869,7 @@ var CentralSettingsModal = class extends SettingsModalView {
   }
   /** Overrides the base's public `render()`: mounts the full device-modal
    *  shell via `super.render()`, then injects the Conectividade fieldset the
-   *  base has no concept of, and patches the native "Central" tab's
+   *  base has no concept of, and patches the Geral tab's inline gateway-info
    *  `#gwinfo-*` elements — its HTML was generated once at construction time
    *  (from whatever data was available then), so an async `onFetchSettings`
    *  resolving later needs this explicit patch to actually show up. */
@@ -64455,17 +65888,15 @@ var CentralSettingsModal = class extends SettingsModalView {
     }
   }
   /**
-   * Injects the editable connectivity fieldset into the native "Central"
-   * tab's `.gateway-info-grid` — as a 5th `.form-card`, right after the
-   * read-only "Conectividade (telemetria)" card (found by its heading text,
-   * not a fixed position, so this stays correct even if the base ever
-   * reorders `getGatewayInfoHTML()`'s 4 cards). Lives outside `<form>`
-   * (the Central tab isn't form-wrapped, unlike Geral) — `getFormData()` is
-   * overridden below to read these fields manually since `new
-   * FormData(this.form)` can't see them.
+   * Injects the editable connectivity fieldset into the Geral tab's inline
+   * gateway-info `.gateway-info-grid` (Identificação/Estatísticas/Metadados)
+   * as a 4th `.form-card`, appended at the end. This grid is a descendant of
+   * the Geral tab's own `<form>`, so the base's `new FormData(this.form)`
+   * (used by the base's own `getFormData()`) picks up these inputs
+   * automatically — no `getFormData()` override needed here.
    */
   injectConnectivitySection(errors) {
-    const grid = this.csRootEl?.querySelector("#gateway-tab-content .gateway-info-grid");
+    const grid = this.csRootEl?.querySelector(".gateway-info-grid");
     if (!grid) return;
     const html = connectivityFieldsetHtml(this.csCurrentData, this.csLabels, this.csLanguage, errors);
     const existing = grid.querySelector(".myio-csettings-connectivity");
@@ -64473,30 +65904,7 @@ var CentralSettingsModal = class extends SettingsModalView {
       existing.outerHTML = html;
       return;
     }
-    const telemetryCard = Array.from(grid.querySelectorAll(".gateway-info-card")).find(
-      (card) => card.querySelector(".section-title")?.textContent === "Conectividade (telemetria)"
-    );
-    if (telemetryCard) {
-      telemetryCard.insertAdjacentHTML("afterend", html);
-    } else {
-      grid.insertAdjacentHTML("beforeend", html);
-    }
-  }
-  /**
-   * Overrides the base's public `getFormData()` (called internally by the
-   * base's own submit/save-button handlers via `this.getFormData()`, which
-   * dispatches here through normal prototype resolution — no base edit
-   * needed). Merges the base's `new FormData(this.form)` read (Geral tab
-   * fields) with a manual read of the connectivity inputs, which live in the
-   * Central tab, outside `this.form`.
-   */
-  getFormData() {
-    const base = super.getFormData();
-    const extra = {};
-    this.csRootEl?.querySelectorAll(".myio-csettings-connectivity [name]").forEach((el2) => {
-      if (el2.name) extra[el2.name] = el2.value;
-    });
-    return { ...base, ...extra };
+    grid.insertAdjacentHTML("beforeend", html);
   }
   async handleCentralSave(formData) {
     const hardRaw = formData.offlineHardMinutes;
@@ -74322,270 +75730,6 @@ async function openDashboardPopupSettings(params) {
   }
 }
 
-// src/components/createInputDateRangePickerInsideDIV.ts
-var PREMIUM_STYLES = `
-  .myio-daterange-wrapper {
-    font-family: 'Nunito', system-ui, sans-serif;
-    background: #f9f9f9;
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    transition: all 0.2s ease;
-  }
-  
-  .myio-daterange-wrapper:hover {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
-  
-  .myio-daterange-label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-    color: #333;
-    font-size: 14px;
-    line-height: 1.4;
-  }
-  
-  .myio-daterange-input {
-    width: 100%;
-    max-width: 300px;
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
-    font-size: 14px;
-    color: #333;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: inherit;
-    line-height: 1.4;
-  }
-  
-  .myio-daterange-input:hover {
-    border-color: #4A148C;
-    box-shadow: 0 0 0 2px rgba(74, 20, 140, 0.1);
-  }
-  
-  .myio-daterange-input:focus {
-    outline: none;
-    border-color: #4A148C;
-    box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.2);
-  }
-  
-  .myio-daterange-input::placeholder {
-    color: #999;
-    opacity: 1;
-  }
-  
-  .myio-daterange-helper {
-    font-size: 12px;
-    color: #666;
-    margin-top: 4px;
-    line-height: 1.3;
-    transition: color 0.2s ease;
-  }
-  
-  .myio-daterange-helper.success {
-    color: #28a745;
-    font-weight: 500;
-  }
-  
-  .myio-daterange-helper.error {
-    color: #dc3545;
-    font-weight: 500;
-  }
-  
-  /* Responsive design */
-  @media (max-width: 768px) {
-    .myio-daterange-wrapper {
-      padding: 16px;
-      margin-bottom: 16px;
-    }
-    
-    .myio-daterange-input {
-      max-width: 100%;
-      font-size: 16px; /* Prevents zoom on iOS */
-    }
-  }
-  
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    .myio-daterange-wrapper {
-      border: 2px solid #000;
-    }
-    
-    .myio-daterange-input {
-      border: 2px solid #000;
-    }
-  }
-  
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    .myio-daterange-wrapper,
-    .myio-daterange-input,
-    .myio-daterange-helper {
-      transition: none;
-    }
-  }
-`;
-function injectPremiumStyles() {
-  const styleId = "myio-daterange-premium-styles";
-  if (document.getElementById(styleId)) {
-    return;
-  }
-  const styleEl = document.createElement("style");
-  styleEl.id = styleId;
-  styleEl.textContent = PREMIUM_STYLES;
-  document.head.appendChild(styleEl);
-  console.log("[MyIO] Premium date range styles injected");
-}
-function validateId(id, context) {
-  if (!id || typeof id !== "string") {
-    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} must be a non-empty string`);
-  }
-  if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(id)) {
-    throw new Error(`[createInputDateRangePickerInsideDIV] ${context} '${id}' is not a valid HTML ID`);
-  }
-}
-async function createInputDateRangePickerInsideDIV(params) {
-  const {
-    containerId,
-    inputId,
-    label = "Per\xEDodo de Datas",
-    placeholder = "Clique para selecionar per\xEDodo",
-    pickerOptions = {},
-    classNames = {},
-    injectStyles: injectStyles23 = true,
-    showHelper = true
-  } = params;
-  validateId(containerId, "containerId");
-  validateId(inputId, "inputId");
-  const container = document.getElementById(containerId);
-  if (!container) {
-    throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
-  }
-  if (injectStyles23) {
-    injectPremiumStyles();
-  }
-  let inputEl = document.getElementById(inputId);
-  if (inputEl && inputEl.tagName.toLowerCase() !== "input") {
-    throw new Error(`[createInputDateRangePickerInsideDIV] Element '#${inputId}' exists but is not an input element`);
-  }
-  const wrapper = document.createElement("div");
-  wrapper.className = classNames.wrapper || "myio-daterange-wrapper";
-  wrapper.setAttribute("data-myio-component", "daterange-input");
-  wrapper.setAttribute("data-version", "1.0.0");
-  let labelEl = null;
-  if (label) {
-    labelEl = document.createElement("label");
-    labelEl.className = classNames.label || "myio-daterange-label";
-    labelEl.textContent = label;
-    labelEl.setAttribute("for", inputId);
-    wrapper.appendChild(labelEl);
-  }
-  if (!inputEl) {
-    inputEl = document.createElement("input");
-    inputEl.type = "text";
-    inputEl.id = inputId;
-    inputEl.name = inputId;
-  }
-  inputEl.className = classNames.input || "myio-daterange-input";
-  inputEl.readOnly = true;
-  inputEl.placeholder = placeholder;
-  inputEl.autocomplete = "off";
-  inputEl.setAttribute("aria-label", label || "Date range selector");
-  if (showHelper) {
-    inputEl.setAttribute("aria-describedby", `${inputId}-helper`);
-  }
-  let helperEl = null;
-  if (showHelper) {
-    helperEl = document.createElement("div");
-    helperEl.id = `${inputId}-helper`;
-    helperEl.className = classNames.helper || "myio-daterange-helper";
-    helperEl.setAttribute("aria-live", "polite");
-    helperEl.style.display = "flex";
-    helperEl.style.alignItems = "center";
-  }
-  wrapper.appendChild(inputEl);
-  if (helperEl) {
-    wrapper.appendChild(helperEl);
-  }
-  const existingWrapper = container.querySelector('[data-myio-component="daterange-input"]');
-  if (existingWrapper) {
-    console.warn(`[createInputDateRangePickerInsideDIV] Replacing existing daterange input in container '#${containerId}'`);
-    existingWrapper.remove();
-  }
-  container.appendChild(wrapper);
-  const enhancedOptions = {
-    maxRangeDays: 31,
-    onApply: (result) => {
-      if (helperEl) {
-        const startDate = new Date(result.startISO);
-        const endDate = new Date(result.endISO);
-        const days = Math.ceil((endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
-        helperEl.textContent = `Per\xEDodo selecionado: ${days} dia${days !== 1 ? "s" : ""}`;
-        helperEl.className = (classNames.helper || "myio-daterange-helper") + " success";
-        setTimeout(() => {
-          if (helperEl) {
-            helperEl.className = classNames.helper || "myio-daterange-helper";
-          }
-        }, 3e3);
-      }
-      if (pickerOptions.onApply) {
-        pickerOptions.onApply(result);
-      }
-    },
-    ...pickerOptions
-  };
-  let picker;
-  try {
-    picker = await createDateRangePicker2(inputEl, enhancedOptions);
-    console.log(`[createInputDateRangePickerInsideDIV] Successfully initialized for input '#${inputId}'`);
-  } catch (error) {
-    wrapper.remove();
-    throw new Error(`[createInputDateRangePickerInsideDIV] Failed to initialize date picker: ${error.message}`);
-  }
-  const controller = {
-    input: inputEl,
-    container,
-    wrapper,
-    picker,
-    getDisplayValue: () => inputEl.value,
-    getDates: () => picker.getDates(),
-    setDates: (startISO, endISO) => {
-      try {
-        picker.setDates(startISO, endISO);
-      } catch (error) {
-        console.error(`[createInputDateRangePickerInsideDIV] Error setting dates:`, error);
-        throw error;
-      }
-    },
-    setHelperText: (text2, type = "default") => {
-      if (helperEl) {
-        helperEl.textContent = text2;
-        const baseClass = classNames.helper || "myio-daterange-helper";
-        helperEl.className = type === "default" ? baseClass : `${baseClass} ${type}`;
-      }
-    },
-    destroy: () => {
-      try {
-        picker.destroy();
-        console.log(`[createInputDateRangePickerInsideDIV] Date picker destroyed for input '#${inputId}'`);
-      } catch (error) {
-        console.warn(`[createInputDateRangePickerInsideDIV] Error destroying picker:`, error);
-      }
-      try {
-        wrapper.remove();
-        console.log(`[createInputDateRangePickerInsideDIV] Wrapper removed for input '#${inputId}'`);
-      } catch (error) {
-        console.warn(`[createInputDateRangePickerInsideDIV] Error removing wrapper:`, error);
-      }
-    }
-  };
-  return controller;
-}
-
 // src/utils/goalsCoverage.ts
 var MONTHS_PT = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
 function formatCoverageRefPtBR(ref) {
@@ -101579,7 +102723,7 @@ async function openClearGcdrIdsModal(state6) {
   if (!state6.selectedCustomer) return;
   const customerId = getEntityId(state6.selectedCustomer);
   const customerName = state6.selectedCustomer.name || state6.selectedCustomer.title || customerId;
-  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const sleep2 = (ms) => new Promise((r) => setTimeout(r, ms));
   const overlay = document.createElement("div");
   overlay.style.cssText = `
     position:fixed; inset:0; z-index:99999;
@@ -101691,7 +102835,7 @@ async function openClearGcdrIdsModal(state6) {
       const chunks = [];
       for (let i = 0; i < items.length; i += 10) chunks.push(items.slice(i, i + 10));
       for (let ci = 0; ci < chunks.length; ci++) {
-        if (ci > 0) await sleep(800);
+        if (ci > 0) await sleep2(800);
         await Promise.all(chunks[ci].map(async (entity) => {
           const tbId = entity.id?.id || "";
           const name = entity.name || entity.label || tbId;
@@ -101741,7 +102885,7 @@ async function openClearGcdrIdsModal(state6) {
         const chunks = [];
         for (let i = 0; i < rows.length; i += 10) chunks.push(rows.slice(i, i + 10));
         for (let ci = 0; ci < chunks.length; ci++) {
-          if (ci > 0) await sleep(800);
+          if (ci > 0) await sleep2(800);
           await Promise.all(chunks[ci].map(async (row) => {
             const keysToDelete = keys.filter((k) => row.present[k]);
             try {
@@ -104348,6 +105492,7 @@ ${errors.slice(0, 5).join("\n")}` + (errors.length > 5 ? `
 // src/components/card-badges/index.ts
 var ALARM_STYLES_ID = "myio-alarm-badge-styles";
 var TICKET_STYLES_ID = "myio-ticket-badge-styles";
+var INCIDENT_STYLES_ID = "myio-incident-badge-styles";
 function injectAlarmBadgeStyles() {
   if (document.getElementById(ALARM_STYLES_ID)) return;
   const s = document.createElement("style");
@@ -104421,6 +105566,32 @@ function injectTicketBadgeStyles() {
   `;
   document.head.appendChild(s);
 }
+function injectIncidentBadgeStyles() {
+  if (document.getElementById(INCIDENT_STYLES_ID)) return;
+  const s = document.createElement("style");
+  s.id = INCIDENT_STYLES_ID;
+  s.textContent = `
+    /* Stacked directly under .myio-alarm-badge (same corner, same shape) */
+    .myio-incident-badge {
+      position: absolute;
+      top: 28px;
+      left: 6px;
+      background: #7C3AED;
+      color: #fff;
+      border-radius: 10px;
+      padding: 2px 5px;
+      font-size: 10px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      z-index: 10;
+      pointer-events: none;
+      line-height: 1.3;
+    }
+  `;
+  document.head.appendChild(s);
+}
 function defaultAlarmCount(gcdrDeviceId) {
   const aso = window.AlarmServiceOrchestrator;
   return aso?.getAlarmCountForDevice?.(gcdrDeviceId) ?? 0;
@@ -104431,6 +105602,13 @@ function alarmTitle(count) {
 function ticketTitle(count) {
   return count > 0 ? `${count} chamado${count !== 1 ? "s" : ""} aberto${count !== 1 ? "s" : ""}` : "Chamados";
 }
+function defaultIncidentCount(gcdrDeviceId) {
+  const iso = window.IncidentServiceOrchestrator;
+  return iso?.getIncidentCountForDevice?.(gcdrDeviceId) ?? 0;
+}
+function incidentTitle(count) {
+  return `${count} incidente${count !== 1 ? "s" : ""} de interpola\xE7\xE3o`;
+}
 function addAlarmBadge(cardElement, gcdrDeviceId, opts) {
   if (!cardElement || !gcdrDeviceId) return;
   if (cardElement.querySelector(`[data-alarm-device-id="${gcdrDeviceId}"]`)) return;
@@ -104516,6 +105694,36 @@ function refreshTicketBadges(opts) {
     }
   });
 }
+function addIncidentBadge(cardElement, gcdrDeviceId, opts) {
+  if (!cardElement || !gcdrDeviceId) return;
+  if (cardElement.querySelector(`[data-incident-device-id="${gcdrDeviceId}"]`)) return;
+  const count = (opts?.getCount ?? defaultIncidentCount)(gcdrDeviceId);
+  injectIncidentBadgeStyles();
+  if (cardElement.style) cardElement.style.position = "relative";
+  const badge = document.createElement("div");
+  badge.className = "myio-incident-badge";
+  badge.setAttribute("data-incident-device-id", gcdrDeviceId);
+  badge.style.display = count > 0 ? "" : "none";
+  badge.title = incidentTitle(count);
+  badge.innerHTML = `<svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M12 2L1 21h22L12 2z"/></svg><span>${count > 99 ? "99+" : count}</span>`;
+  cardElement.appendChild(badge);
+}
+function refreshIncidentBadges(opts) {
+  const getCount = opts?.getCount ?? defaultIncidentCount;
+  document.querySelectorAll(".myio-incident-badge[data-incident-device-id]").forEach((badge) => {
+    const gcdrDeviceId = badge.getAttribute("data-incident-device-id");
+    if (!gcdrDeviceId) return;
+    const count = getCount(gcdrDeviceId);
+    const span = badge.querySelector("span");
+    if (count > 0) {
+      badge.style.display = "";
+      badge.title = incidentTitle(count);
+      if (span) span.textContent = count > 99 ? "99+" : String(count);
+    } else {
+      badge.style.display = "none";
+    }
+  });
+}
 
 // src/components/premium-modals/dialog/styles.ts
 var FONT_LINK_ID = "myio-dialog-font-nunito";
@@ -163107,6 +164315,16 @@ var CSS4 = `
   justify-content:center;gap:2px;line-height:1;cursor:default;box-shadow:0 1px 3px rgba(0,0,0,.25);
   z-index:10;
 }
+/* Incident (RFC-0232) sits at the vertical midpoint of the left border \u2014
+   below the alarm badge, above the ticket badge \u2014 reading as a 3-badge
+   stack on the same edge regardless of card height (card vs. compact). */
+.myio-cscard__incident-badge{
+  position:absolute;top:50%;left:-14px;transform:translateY(-50%);
+  background:#7C3AED;color:#fff;border-radius:10px;min-width:22px;height:22px;
+  padding:0 6px;font:700 10px 'Nunito', system-ui, sans-serif;display:flex;align-items:center;
+  justify-content:center;gap:2px;line-height:1;cursor:default;box-shadow:0 1px 3px rgba(0,0,0,.25);
+  z-index:10;
+}
 .myio-cscard__ticket-badge{
   position:absolute;bottom:18%;left:-14px;transform:translateY(50%);width:24px;height:24px;
   background:rgba(8,145,178,.12);color:#0891b2;border:1px solid rgba(8,145,178,.25);
@@ -163573,6 +164791,7 @@ var CentralStatusCard = class _CentralStatusCard {
   detachTitleTooltip = null;
   detachDivergenceTooltip = null;
   detachAlarmTooltip = null;
+  detachIncidentTooltip = null;
   detachTicketTooltip = null;
   detachAnnotationTooltips = [];
   /** Latency from the PREVIOUS render, to derive the trend arrow next to
@@ -163637,6 +164856,7 @@ var CentralStatusCard = class _CentralStatusCard {
     this.detachTitleTooltip?.();
     this.detachDivergenceTooltip?.();
     this.detachAlarmTooltip?.();
+    this.detachIncidentTooltip?.();
     this.detachTicketTooltip?.();
     this.detachAnnotationTooltips.forEach((fn) => fn());
     this.el.remove();
@@ -163957,6 +165177,12 @@ var CentralStatusCard = class _CentralStatusCard {
             <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
             <span>${p.alarmCount > 99 ? "99+" : p.alarmCount}</span>
           </div>` : "";
+    const incidentBadgeHtml = p.incidentCount && p.incidentCount > 0 ? `<div class="myio-cscard__incident-badge" data-role="incident-badge" aria-label="${escAttr6(
+      `${p.incidentCount} incidente${p.incidentCount !== 1 ? "s" : ""} de interpola\xE7\xE3o`
+    )}">
+            <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M12 2L1 21h22L12 2z"/></svg>
+            <span>${p.incidentCount > 99 ? "99+" : p.incidentCount}</span>
+          </div>` : "";
     const ticketBadgeHtml = p.ticketCount && p.ticketCount > 0 ? `<div class="myio-cscard__ticket-badge" data-role="ticket-badge" aria-label="${escAttr6(
       `${p.ticketCount} chamado${p.ticketCount !== 1 ? "s" : ""} aberto${p.ticketCount !== 1 ? "s" : ""}`
     )}">
@@ -163993,6 +165219,7 @@ var CentralStatusCard = class _CentralStatusCard {
     const compactEvidenceLine = variant === "compact" ? `<div class="myio-cscard__evidence-line">${devicesText ? escAttr6(devicesText) : ""}${probeText ? (devicesText ? " \xB7 " : "") + probeText : ""}</div>` : "";
     this.el.innerHTML = `
       ${alarmBadgeHtml}
+      ${incidentBadgeHtml}
       ${ticketBadgeHtml}
       ${annotationBadgesHtml}
       <div class="myio-cscard__surface">
@@ -164096,6 +165323,8 @@ var CentralStatusCard = class _CentralStatusCard {
     this.detachDivergenceTooltip = null;
     this.detachAlarmTooltip?.();
     this.detachAlarmTooltip = null;
+    this.detachIncidentTooltip?.();
+    this.detachIncidentTooltip = null;
     this.detachTicketTooltip?.();
     this.detachTicketTooltip = null;
     this.detachAnnotationTooltips.forEach((fn) => fn());
@@ -164137,6 +165366,19 @@ var CentralStatusCard = class _CentralStatusCard {
         }));
       }
     }
+    if (p.incidentCount && p.incidentCount > 0) {
+      const incidentBadge = this.el.querySelector('[data-role="incident-badge"]');
+      if (incidentBadge) {
+        const count = p.incidentCount;
+        this.detachIncidentTooltip = InfoTooltip.attach(incidentBadge, () => ({
+          icon: "\u{1F53A}",
+          title: en ? "Incidents" : "Incidentes",
+          content: escAttr6(
+            en ? `${count} interpolated reading${count !== 1 ? "s" : ""}` : `${count} incidente${count !== 1 ? "s" : ""} de interpola\xE7\xE3o`
+          )
+        }));
+      }
+    }
     if (p.ticketCount && p.ticketCount > 0) {
       const ticketBadge = this.el.querySelector('[data-role="ticket-badge"]');
       if (ticketBadge) {
@@ -164240,6 +165482,13 @@ var CentralStatusCard = class _CentralStatusCard {
         this.params.onAlarmBadgeClick?.({ id: this.params.id, source: "central-status-card" });
       });
     }
+    const incidentBadge = this.el.querySelector('[data-role="incident-badge"]');
+    if (incidentBadge && this.params.onIncidentBadgeClick) {
+      incidentBadge.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.params.onIncidentBadgeClick?.({ id: this.params.id, source: "central-status-card" });
+      });
+    }
     const ticketBadge = this.el.querySelector('[data-role="ticket-badge"]');
     if (ticketBadge) {
       ticketBadge.addEventListener("click", (e) => {
@@ -164438,6 +165687,9 @@ var version = package_default.version || "0.0.0";
   FreshdeskClient,
   GRANULARITY_SELECTOR_CSS_PREFIX,
   GRID_SORT_OPTIONS,
+  GcdrAnnotationsClient,
+  GcdrAnnotationsConflictError,
+  GcdrAnnotationsError,
   GoalsModal,
   GoalsMoneyApiError,
   GoalsMoneyClient,
@@ -164579,9 +165831,13 @@ var version = package_default.version || "0.0.0";
   WELCOME_DEFAULT_PALETTE,
   Water,
   WaterSummaryTooltip,
+  adaptGcdrListToLegacyAnnotations,
+  adaptGcdrToLegacyAnnotation,
+  adaptLegacyToGcdrInput,
   addAlarmBadge,
   addDetectionContext,
   addFreshdeskTicketNote,
+  addIncidentBadge,
   addNamespace,
   addTicketBadge,
   aggregateByDay,
@@ -164688,6 +165944,8 @@ var version = package_default.version || "0.0.0";
   createFilterModalComponent,
   createFooterComponent,
   createFreshdeskTicket,
+  createGcdrAnnotationsAuthStrategy,
+  createGcdrAnnotationsClient,
   createGoalsBarTooltip,
   createGoalsMoneyClient,
   createGranularitySelector,
@@ -165032,6 +166290,7 @@ var version = package_default.version || "0.0.0";
   recalculateDeviceStatus,
   recomputeDeviceGridPercentages,
   refreshAlarmBadges,
+  refreshIncidentBadges,
   refreshTicketBadges,
   removeAlarmsNotificationsPanelStyles,
   removeBASDashboardStyles,