myio-js-library 0.1.199 → 0.1.201

package/dist/myio-js-library.umd.js

@@ -41795,6 +41795,932 @@
     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;
+    }
+  }
+
   exports.ANNOTATION_TYPE_COLORS = ANNOTATION_TYPE_COLORS;
   exports.ANNOTATION_TYPE_LABELS = ANNOTATION_TYPE_LABELS;
   exports.ANNOTATION_TYPE_LABELS_EN = ANNOTATION_TYPE_LABELS_EN;
@@ -41810,6 +42736,7 @@
   exports.DEFAULT_GAS_GROUP_COLORS = DEFAULT_GAS_GROUP_COLORS;
   exports.DEFAULT_SHOPPING_COLORS = DEFAULT_SHOPPING_COLORS;
   exports.DEFAULT_WATER_GROUP_COLORS = DEFAULT_WATER_GROUP_COLORS;
+  exports.DEVICE_COUNT_KEYS = DEVICE_COUNT_KEYS;
   exports.DeviceComparisonTooltip = DeviceComparisonTooltip;
   exports.DeviceStatusType = DeviceStatusType;
   exports.EXPORT_DEFAULT_COLORS = EXPORT_DEFAULT_COLORS;
@@ -41931,6 +42858,7 @@
   exports.myioExportData = myioExportData;
   exports.normalizeRecipients = normalizeRecipients;
   exports.numbers = numbers_exports;
+  exports.openContractDevicesModal = openContractDevicesModal;
   exports.openDashboardPopup = openDashboardPopup;
   exports.openDashboardPopupAllReport = openDashboardPopupAllReport;
   exports.openDashboardPopupEnergy = openDashboardPopupEnergy;