myio-js-library 0.1.200 → 0.1.201

package/dist/index.js

@@ -41985,6 +41985,932 @@ function createDistributionChartWidget(config) {
   };
   return instance;
 }
+
+// src/components/premium-modals/contract-devices/types.ts
+var DEVICE_COUNT_KEYS = {
+  energy: {
+    total: "qtDevices3f",
+    entries: "qtDevices3f-Entries",
+    commonArea: "qtDevices3f-CommonArea",
+    stores: "qtDevices3f-Stores"
+  },
+  water: {
+    total: "qtDevicesHidr",
+    entries: "qtDevicesHidr-Entries",
+    commonArea: "qtDevicesHidr-CommonArea",
+    stores: "qtDevicesHidr-Stores"
+  },
+  temperature: {
+    total: "qtDevicesTemp",
+    internal: "qtDevicesTemp-Internal",
+    stores: "qtDevicesTemp-Stores"
+  }
+};
+
+// src/components/premium-modals/contract-devices/ContractDevicesModalView.ts
+var ContractDevicesModalView = class {
+  container;
+  modal;
+  form;
+  config;
+  focusTrapElements = [];
+  originalActiveElement = null;
+  constructor(config) {
+    this.config = config;
+    this.createModal();
+  }
+  render(initialData) {
+    this.originalActiveElement = document.activeElement;
+    document.body.appendChild(this.container);
+    this.populateForm(initialData);
+    this.attachEventListeners();
+    this.setupAccessibility();
+    this.setupFocusTrap();
+  }
+  close() {
+    this.teardownFocusTrap();
+    if (this.originalActiveElement && "focus" in this.originalActiveElement) {
+      this.originalActiveElement.focus();
+    }
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+  showError(message) {
+    const errorEl = this.modal.querySelector(".error-message");
+    if (errorEl) {
+      errorEl.textContent = message;
+      errorEl.style.display = "block";
+      errorEl.setAttribute("role", "alert");
+    }
+  }
+  hideError() {
+    const errorEl = this.modal.querySelector(".error-message");
+    if (errorEl) {
+      errorEl.style.display = "none";
+    }
+  }
+  showLoadingState(isLoading) {
+    const saveBtn = this.modal.querySelector(".btn-save");
+    const cancelBtn = this.modal.querySelector(".btn-cancel");
+    const formInputs = this.modal.querySelectorAll("input");
+    if (saveBtn) {
+      saveBtn.disabled = isLoading;
+      saveBtn.textContent = isLoading ? "Salvando..." : "Salvar";
+    }
+    if (cancelBtn) {
+      cancelBtn.disabled = isLoading;
+    }
+    formInputs.forEach((input) => {
+      input.disabled = isLoading;
+    });
+  }
+  getFormData() {
+    const getValue = (name) => {
+      const input = this.form.querySelector(`[name="${name}"]`);
+      if (!input || input.value === "") return null;
+      const num = parseInt(input.value, 10);
+      return isNaN(num) ? null : num;
+    };
+    return {
+      energy: {
+        total: getValue("energy_total"),
+        entries: getValue("energy_entries"),
+        commonArea: getValue("energy_commonArea"),
+        stores: getValue("energy_stores")
+      },
+      water: {
+        total: getValue("water_total"),
+        entries: getValue("water_entries"),
+        commonArea: getValue("water_commonArea"),
+        stores: getValue("water_stores")
+      },
+      temperature: {
+        total: getValue("temperature_total"),
+        internal: getValue("temperature_internal"),
+        stores: getValue("temperature_stores")
+      }
+    };
+  }
+  createModal() {
+    this.container = document.createElement("div");
+    this.container.className = "myio-contract-devices-modal-overlay";
+    this.container.innerHTML = this.getModalHTML();
+    this.modal = this.container.querySelector(".myio-contract-devices-modal");
+    this.form = this.modal.querySelector("form");
+  }
+  getModalHTML() {
+    const width = typeof this.config.width === "number" ? `${this.config.width}px` : this.config.width;
+    return `
+      <div class="myio-contract-devices-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+        <div class="myio-contract-devices-modal" style="width: ${width}">
+          <div class="modal-header">
+            <h3 id="modal-title">${this.config.title || "Configurar Dispositivos Contratados"}</h3>
+            <button type="button" class="close-btn" aria-label="Fechar">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="error-message" style="display: none;" role="alert"></div>
+            ${this.config.customerName ? `
+              <div class="customer-info">
+                <span class="customer-label">Shopping:</span>
+                <span class="customer-name">${this.config.customerName}</span>
+              </div>
+            ` : ""}
+            <form novalidate>
+              ${this.getFormHTML()}
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn-cancel">Fechar</button>
+            <button type="button" class="btn-save btn-primary">Salvar</button>
+          </div>
+        </div>
+      </div>
+      ${this.getModalCSS()}
+    `;
+  }
+  getFormHTML() {
+    return `
+      <div class="form-layout">
+        <!-- Energy Section -->
+        <div class="domain-card energy-card">
+          <div class="domain-header">
+            <span class="domain-icon">&#9889;</span>
+            <h4>Energia</h4>
+          </div>
+          <div class="domain-fields">
+            <div class="field-group">
+              <label for="energy_total">Total Contratado</label>
+              <input type="number" id="energy_total" name="energy_total" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.energy.total}</small>
+            </div>
+            <div class="field-group">
+              <label for="energy_entries">Entradas</label>
+              <input type="number" id="energy_entries" name="energy_entries" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.energy.entries}</small>
+            </div>
+            <div class="field-group">
+              <label for="energy_commonArea">Area Comum</label>
+              <input type="number" id="energy_commonArea" name="energy_commonArea" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.energy.commonArea}</small>
+            </div>
+            <div class="field-group">
+              <label for="energy_stores">Lojas</label>
+              <input type="number" id="energy_stores" name="energy_stores" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.energy.stores}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Water Section -->
+        <div class="domain-card water-card">
+          <div class="domain-header">
+            <span class="domain-icon">&#128167;</span>
+            <h4>Agua</h4>
+          </div>
+          <div class="domain-fields">
+            <div class="field-group">
+              <label for="water_total">Total Contratado</label>
+              <input type="number" id="water_total" name="water_total" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.water.total}</small>
+            </div>
+            <div class="field-group">
+              <label for="water_entries">Entradas</label>
+              <input type="number" id="water_entries" name="water_entries" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.water.entries}</small>
+            </div>
+            <div class="field-group">
+              <label for="water_commonArea">Area Comum</label>
+              <input type="number" id="water_commonArea" name="water_commonArea" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.water.commonArea}</small>
+            </div>
+            <div class="field-group">
+              <label for="water_stores">Lojas</label>
+              <input type="number" id="water_stores" name="water_stores" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.water.stores}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Temperature Section -->
+        <div class="domain-card temperature-card">
+          <div class="domain-header">
+            <span class="domain-icon">&#127777;</span>
+            <h4>Temperatura</h4>
+          </div>
+          <div class="domain-fields">
+            <div class="field-group">
+              <label for="temperature_total">Total Contratado</label>
+              <input type="number" id="temperature_total" name="temperature_total" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.temperature.total}</small>
+            </div>
+            <div class="field-group">
+              <label for="temperature_internal">Sensores Internos</label>
+              <input type="number" id="temperature_internal" name="temperature_internal" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.temperature.internal}</small>
+            </div>
+            <div class="field-group">
+              <label for="temperature_stores">Lojas</label>
+              <input type="number" id="temperature_stores" name="temperature_stores" min="0" step="1" placeholder="0">
+              <small class="field-key">${DEVICE_COUNT_KEYS.temperature.stores}</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  getModalCSS() {
+    return `
+      <style>
+        .myio-contract-devices-modal-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10000;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .myio-contract-devices-modal {
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+          max-width: 95vw;
+          max-height: 90vh;
+          width: 800px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .myio-contract-devices-modal .modal-header {
+          background: linear-gradient(135deg, #3e1a7d 0%, #5c2d91 100%);
+          color: white;
+          padding: 20px 24px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .myio-contract-devices-modal .modal-header h3 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: white;
+        }
+
+        .myio-contract-devices-modal .close-btn {
+          background: none;
+          border: none;
+          font-size: 24px;
+          cursor: pointer;
+          color: white;
+          padding: 0;
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          transition: background 0.2s;
+        }
+
+        .myio-contract-devices-modal .close-btn:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .myio-contract-devices-modal .modal-body {
+          padding: 24px;
+          overflow-y: auto;
+          flex: 1;
+          background: #f8f9fa;
+        }
+
+        .myio-contract-devices-modal .error-message {
+          background: #fee;
+          border: 1px solid #fcc;
+          color: #c33;
+          padding: 12px;
+          border-radius: 6px;
+          margin-bottom: 16px;
+          font-size: 14px;
+        }
+
+        .myio-contract-devices-modal .customer-info {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          padding: 16px 20px;
+          border-radius: 8px;
+          margin-bottom: 20px;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .myio-contract-devices-modal .customer-label {
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 13px;
+          font-weight: 500;
+        }
+
+        .myio-contract-devices-modal .customer-name {
+          color: white;
+          font-size: 16px;
+          font-weight: 600;
+        }
+
+        .myio-contract-devices-modal .form-layout {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 20px;
+        }
+
+        .myio-contract-devices-modal .domain-card {
+          background: white;
+          border-radius: 10px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+          overflow: hidden;
+        }
+
+        .myio-contract-devices-modal .domain-header {
+          padding: 14px 16px;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          border-bottom: 1px solid #eee;
+        }
+
+        .myio-contract-devices-modal .domain-header h4 {
+          margin: 0;
+          font-size: 15px;
+          font-weight: 600;
+          color: #333;
+        }
+
+        .myio-contract-devices-modal .domain-icon {
+          font-size: 20px;
+        }
+
+        .myio-contract-devices-modal .energy-card .domain-header {
+          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        }
+
+        .myio-contract-devices-modal .water-card .domain-header {
+          background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
+        }
+
+        .myio-contract-devices-modal .temperature-card .domain-header {
+          background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 100%);
+        }
+
+        .myio-contract-devices-modal .domain-fields {
+          padding: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 14px;
+        }
+
+        .myio-contract-devices-modal .field-group {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .myio-contract-devices-modal .field-group label {
+          font-size: 13px;
+          font-weight: 500;
+          color: #555;
+        }
+
+        .myio-contract-devices-modal .field-group input {
+          width: 100%;
+          padding: 10px 12px;
+          border: 1px solid #ddd;
+          border-radius: 6px;
+          font-size: 14px;
+          transition: border-color 0.2s, box-shadow 0.2s;
+          box-sizing: border-box;
+        }
+
+        .myio-contract-devices-modal .field-group input:focus {
+          outline: none;
+          border-color: #3e1a7d;
+          box-shadow: 0 0 0 3px rgba(62, 26, 125, 0.15);
+        }
+
+        .myio-contract-devices-modal .field-key {
+          font-size: 10px;
+          color: #999;
+          font-family: 'Courier New', monospace;
+        }
+
+        .myio-contract-devices-modal .modal-footer {
+          padding: 16px 24px;
+          border-top: 1px solid #e0e0e0;
+          display: flex;
+          justify-content: flex-end;
+          gap: 12px;
+          background: white;
+        }
+
+        .myio-contract-devices-modal .modal-footer button {
+          padding: 10px 24px;
+          border: none;
+          border-radius: 6px;
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .myio-contract-devices-modal .btn-cancel {
+          background: #6c757d;
+          color: white;
+        }
+
+        .myio-contract-devices-modal .btn-cancel:hover:not(:disabled) {
+          background: #545b62;
+        }
+
+        .myio-contract-devices-modal .btn-primary {
+          background: #3e1a7d;
+          color: white;
+        }
+
+        .myio-contract-devices-modal .btn-primary:hover:not(:disabled) {
+          background: #2d1458;
+        }
+
+        .myio-contract-devices-modal .modal-footer button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        /* Responsive */
+        @media (max-width: 900px) {
+          .myio-contract-devices-modal .form-layout {
+            grid-template-columns: 1fr;
+          }
+
+          .myio-contract-devices-modal {
+            width: 95vw !important;
+          }
+        }
+
+        /* Scrollbar */
+        .myio-contract-devices-modal .modal-body::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        .myio-contract-devices-modal .modal-body::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 3px;
+        }
+
+        .myio-contract-devices-modal .modal-body::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 3px;
+        }
+      </style>
+    `;
+  }
+  populateForm(data) {
+    const setValue = (name, value) => {
+      const input = this.form.querySelector(`[name="${name}"]`);
+      if (input && value !== null && value !== void 0) {
+        input.value = String(value);
+      }
+    };
+    if (data.energy) {
+      setValue("energy_total", data.energy.total);
+      setValue("energy_entries", data.energy.entries);
+      setValue("energy_commonArea", data.energy.commonArea);
+      setValue("energy_stores", data.energy.stores);
+    }
+    if (data.water) {
+      setValue("water_total", data.water.total);
+      setValue("water_entries", data.water.entries);
+      setValue("water_commonArea", data.water.commonArea);
+      setValue("water_stores", data.water.stores);
+    }
+    if (data.temperature) {
+      setValue("temperature_total", data.temperature.total);
+      setValue("temperature_internal", data.temperature.internal);
+      setValue("temperature_stores", data.temperature.stores);
+    }
+  }
+  attachEventListeners() {
+    const closeBtn = this.modal.querySelector(".close-btn");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.config.onClose();
+      });
+    }
+    const cancelBtn = this.modal.querySelector(".btn-cancel");
+    if (cancelBtn) {
+      cancelBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.config.onClose();
+      });
+    }
+    const saveBtn = this.modal.querySelector(".btn-save");
+    if (saveBtn) {
+      saveBtn.addEventListener("click", async (e) => {
+        e.preventDefault();
+        this.hideError();
+        const formData = this.getFormData();
+        await this.config.onSave(formData);
+      });
+    }
+    this.container.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("myio-contract-devices-modal-overlay") && this.config.closeOnBackdrop !== false) {
+        this.config.onClose();
+      }
+    });
+  }
+  setupAccessibility() {
+    const firstInput = this.modal.querySelector("input");
+    if (firstInput) {
+      setTimeout(() => firstInput.focus(), 100);
+    }
+    this.modal.setAttribute("aria-labelledby", "modal-title");
+  }
+  setupFocusTrap() {
+    this.focusTrapElements = Array.from(
+      this.modal.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])')
+    );
+    this.modal.addEventListener("keydown", this.handleKeyDown.bind(this));
+  }
+  teardownFocusTrap() {
+    this.modal.removeEventListener("keydown", this.handleKeyDown.bind(this));
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape" && this.config.closeOnBackdrop !== false) {
+      event.preventDefault();
+      this.config.onClose();
+      return;
+    }
+    if (event.key === "Tab") {
+      const firstElement = this.focusTrapElements[0];
+      const lastElement = this.focusTrapElements[this.focusTrapElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    }
+  }
+};
+
+// src/components/premium-modals/contract-devices/ContractDevicesPersister.ts
+var DefaultContractDevicesPersister = class {
+  jwtToken;
+  tbBaseUrl;
+  constructor(jwtToken, apiConfig) {
+    this.jwtToken = jwtToken;
+    this.tbBaseUrl = apiConfig?.tbBaseUrl || window.location.origin;
+  }
+  async saveDeviceCounts(customerId, counts) {
+    try {
+      const payload = {};
+      if (counts.energy.total !== null) {
+        payload[DEVICE_COUNT_KEYS.energy.total] = counts.energy.total;
+      }
+      if (counts.energy.entries !== null) {
+        payload[DEVICE_COUNT_KEYS.energy.entries] = counts.energy.entries;
+      }
+      if (counts.energy.commonArea !== null) {
+        payload[DEVICE_COUNT_KEYS.energy.commonArea] = counts.energy.commonArea;
+      }
+      if (counts.energy.stores !== null) {
+        payload[DEVICE_COUNT_KEYS.energy.stores] = counts.energy.stores;
+      }
+      if (counts.water.total !== null) {
+        payload[DEVICE_COUNT_KEYS.water.total] = counts.water.total;
+      }
+      if (counts.water.entries !== null) {
+        payload[DEVICE_COUNT_KEYS.water.entries] = counts.water.entries;
+      }
+      if (counts.water.commonArea !== null) {
+        payload[DEVICE_COUNT_KEYS.water.commonArea] = counts.water.commonArea;
+      }
+      if (counts.water.stores !== null) {
+        payload[DEVICE_COUNT_KEYS.water.stores] = counts.water.stores;
+      }
+      if (counts.temperature.total !== null) {
+        payload[DEVICE_COUNT_KEYS.temperature.total] = counts.temperature.total;
+      }
+      if (counts.temperature.internal !== null) {
+        payload[DEVICE_COUNT_KEYS.temperature.internal] = counts.temperature.internal;
+      }
+      if (counts.temperature.stores !== null) {
+        payload[DEVICE_COUNT_KEYS.temperature.stores] = counts.temperature.stores;
+      }
+      console.log("[ContractDevicesPersister] Saving to CUSTOMER SERVER_SCOPE:", payload);
+      const res = await fetch(
+        `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`,
+        {
+          method: "POST",
+          headers: {
+            "X-Authorization": `Bearer ${this.jwtToken}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(payload)
+        }
+      );
+      if (!res.ok) {
+        throw this.createHttpError(res.status, await res.text().catch(() => ""));
+      }
+      return {
+        ok: true,
+        updatedKeys: Object.keys(payload),
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    } catch (error) {
+      console.error("[ContractDevicesPersister] Save failed:", error);
+      return {
+        ok: false,
+        error: this.mapError(error)
+      };
+    }
+  }
+  createHttpError(status, body) {
+    const error = new Error(`HTTP ${status}: ${body}`);
+    error.status = status;
+    error.body = body;
+    return error;
+  }
+  mapError(error) {
+    const status = error.status;
+    if (status === 400) {
+      return {
+        code: "VALIDATION_ERROR",
+        message: "Dados invalidos",
+        userAction: "FIX_INPUT",
+        cause: error
+      };
+    }
+    if (status === 401) {
+      return {
+        code: "TOKEN_EXPIRED",
+        message: "Token de autenticacao expirado",
+        userAction: "RE_AUTH",
+        cause: error
+      };
+    }
+    if (status === 403) {
+      return {
+        code: "AUTH_ERROR",
+        message: "Permissao insuficiente",
+        userAction: "RE_AUTH",
+        cause: error
+      };
+    }
+    if (status === 404) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Cliente nao encontrado",
+        userAction: "CONTACT_ADMIN",
+        cause: error
+      };
+    }
+    if (status >= 500) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Erro no servidor",
+        userAction: "RETRY",
+        cause: error
+      };
+    }
+    return {
+      code: "UNKNOWN_ERROR",
+      message: error.message || "Erro desconhecido",
+      userAction: "CONTACT_ADMIN",
+      cause: error
+    };
+  }
+};
+
+// src/components/premium-modals/contract-devices/ContractDevicesFetcher.ts
+var DefaultContractDevicesFetcher = class {
+  jwtToken;
+  tbBaseUrl;
+  constructor(jwtToken, apiConfig) {
+    this.jwtToken = jwtToken;
+    this.tbBaseUrl = apiConfig?.tbBaseUrl || window.location.origin;
+  }
+  async fetchCurrentCounts(customerId) {
+    try {
+      const keys = [
+        DEVICE_COUNT_KEYS.energy.total,
+        DEVICE_COUNT_KEYS.energy.entries,
+        DEVICE_COUNT_KEYS.energy.commonArea,
+        DEVICE_COUNT_KEYS.energy.stores,
+        DEVICE_COUNT_KEYS.water.total,
+        DEVICE_COUNT_KEYS.water.entries,
+        DEVICE_COUNT_KEYS.water.commonArea,
+        DEVICE_COUNT_KEYS.water.stores,
+        DEVICE_COUNT_KEYS.temperature.total,
+        DEVICE_COUNT_KEYS.temperature.internal,
+        DEVICE_COUNT_KEYS.temperature.stores
+      ];
+      const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE?keys=${keys.join(",")}`;
+      console.log("[ContractDevicesFetcher] Fetching from:", url);
+      const res = await fetch(url, {
+        headers: {
+          "X-Authorization": `Bearer ${this.jwtToken}`,
+          "Content-Type": "application/json"
+        }
+      });
+      if (!res.ok) {
+        console.warn("[ContractDevicesFetcher] Fetch failed:", res.status);
+        return {};
+      }
+      const data = await res.json();
+      console.log("[ContractDevicesFetcher] Received data:", data);
+      return this.parseAttributesToCounts(data);
+    } catch (error) {
+      console.error("[ContractDevicesFetcher] Error fetching counts:", error);
+      return {};
+    }
+  }
+  parseAttributesToCounts(attributes) {
+    const getValue = (key) => {
+      const attr = attributes.find((a) => a.key === key);
+      if (!attr) return null;
+      const num = parseInt(attr.value, 10);
+      return isNaN(num) ? null : num;
+    };
+    return {
+      energy: {
+        total: getValue(DEVICE_COUNT_KEYS.energy.total),
+        entries: getValue(DEVICE_COUNT_KEYS.energy.entries),
+        commonArea: getValue(DEVICE_COUNT_KEYS.energy.commonArea),
+        stores: getValue(DEVICE_COUNT_KEYS.energy.stores)
+      },
+      water: {
+        total: getValue(DEVICE_COUNT_KEYS.water.total),
+        entries: getValue(DEVICE_COUNT_KEYS.water.entries),
+        commonArea: getValue(DEVICE_COUNT_KEYS.water.commonArea),
+        stores: getValue(DEVICE_COUNT_KEYS.water.stores)
+      },
+      temperature: {
+        total: getValue(DEVICE_COUNT_KEYS.temperature.total),
+        internal: getValue(DEVICE_COUNT_KEYS.temperature.internal),
+        stores: getValue(DEVICE_COUNT_KEYS.temperature.stores)
+      }
+    };
+  }
+};
+
+// src/components/premium-modals/contract-devices/ContractDevicesController.ts
+var ContractDevicesController = class {
+  params;
+  view = null;
+  persister;
+  fetcher;
+  constructor(params) {
+    this.params = params;
+    this.persister = new DefaultContractDevicesPersister(
+      params.jwtToken,
+      params.api
+    );
+    this.fetcher = new DefaultContractDevicesFetcher(
+      params.jwtToken,
+      params.api
+    );
+  }
+  async show() {
+    let seedData = this.params.seed || {};
+    try {
+      const existingCounts = await this.fetcher.fetchCurrentCounts(this.params.customerId);
+      seedData = this.mergeCounts(seedData, existingCounts);
+      console.log("[ContractDevicesController] Merged seed data:", seedData);
+    } catch (error) {
+      console.warn("[ContractDevicesController] Failed to fetch existing counts:", error);
+    }
+    const viewConfig = {
+      title: this.params.ui?.title || "Configurar Dispositivos Contratados",
+      width: this.params.ui?.width || 800,
+      closeOnBackdrop: this.params.ui?.closeOnBackdrop !== false,
+      customerName: this.params.customerName,
+      onSave: this.handleSave.bind(this),
+      onClose: this.handleClose.bind(this)
+    };
+    this.view = new ContractDevicesModalView(viewConfig);
+    this.view.render(seedData);
+  }
+  async handleSave(formData) {
+    if (!this.view) return;
+    this.view.showLoadingState(true);
+    this.view.hideError();
+    try {
+      const result = await this.persister.saveDeviceCounts(
+        this.params.customerId,
+        formData
+      );
+      if (result.ok) {
+        console.log("[ContractDevicesController] Save successful:", result);
+        if (this.params.onSaved) {
+          this.params.onSaved(result);
+        }
+        this.handleClose();
+      } else {
+        console.error("[ContractDevicesController] Save failed:", result.error);
+        this.view.showError(result.error?.message || "Erro ao salvar configuracoes");
+        if (this.params.onError && result.error) {
+          this.params.onError(result.error);
+        }
+      }
+    } catch (error) {
+      console.error("[ContractDevicesController] Unexpected error:", error);
+      this.view.showError(error.message || "Erro inesperado");
+      if (this.params.onError) {
+        this.params.onError({
+          code: "UNKNOWN_ERROR",
+          message: error.message || "Erro desconhecido",
+          cause: error
+        });
+      }
+    } finally {
+      if (this.view) {
+        this.view.showLoadingState(false);
+      }
+    }
+  }
+  handleClose() {
+    if (this.view) {
+      this.view.close();
+      this.view = null;
+    }
+    if (this.params.onClose) {
+      this.params.onClose();
+    }
+  }
+  mergeCounts(seed, fetched) {
+    return {
+      energy: {
+        total: fetched.energy?.total ?? seed.energy?.total ?? null,
+        entries: fetched.energy?.entries ?? seed.energy?.entries ?? null,
+        commonArea: fetched.energy?.commonArea ?? seed.energy?.commonArea ?? null,
+        stores: fetched.energy?.stores ?? seed.energy?.stores ?? null
+      },
+      water: {
+        total: fetched.water?.total ?? seed.water?.total ?? null,
+        entries: fetched.water?.entries ?? seed.water?.entries ?? null,
+        commonArea: fetched.water?.commonArea ?? seed.water?.commonArea ?? null,
+        stores: fetched.water?.stores ?? seed.water?.stores ?? null
+      },
+      temperature: {
+        total: fetched.temperature?.total ?? seed.temperature?.total ?? null,
+        internal: fetched.temperature?.internal ?? seed.temperature?.internal ?? null,
+        stores: fetched.temperature?.stores ?? seed.temperature?.stores ?? null
+      }
+    };
+  }
+};
+
+// src/components/premium-modals/contract-devices/openContractDevicesModal.ts
+async function openContractDevicesModal(params) {
+  if (!params.jwtToken) {
+    throw new Error("jwtToken is required for contract devices persistence");
+  }
+  if (!params.customerId) {
+    throw new Error("customerId is required");
+  }
+  console.info("[openContractDevicesModal] Initializing contract devices modal", {
+    customerId: params.customerId,
+    customerName: params.customerName,
+    hasJwtToken: !!params.jwtToken,
+    hasSeedData: !!params.seed
+  });
+  const controller = new ContractDevicesController(params);
+  try {
+    await controller.show();
+  } catch (error) {
+    console.error("[openContractDevicesModal] Error:", error);
+    if (params.onError) {
+      params.onError({
+        code: "UNKNOWN_ERROR",
+        message: error.message || "Erro ao abrir modal de dispositivos contratados",
+        cause: error
+      });
+    }
+    throw error;
+  }
+}
 export {
   ANNOTATION_TYPE_COLORS,
   ANNOTATION_TYPE_LABELS,
@@ -42001,6 +42927,7 @@ export {
   DEFAULT_GAS_GROUP_COLORS,
   DEFAULT_SHOPPING_COLORS,
   DEFAULT_WATER_GROUP_COLORS,
+  DEVICE_COUNT_KEYS,
   DeviceComparisonTooltip,
   DeviceStatusType,
   EXPORT_DEFAULT_COLORS,
@@ -42123,6 +43050,7 @@ export {
   myioExportData,
   normalizeRecipients,
   numbers_exports as numbers,
+  openContractDevicesModal,
   openDashboardPopup,
   openDashboardPopupAllReport,
   openDashboardPopupEnergy,