myio-js-library 0.1.213 → 0.1.215

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

@@ -21113,26 +21113,26 @@
      */
     getI18n() {
       const defaults = {
-        title: "Water Tank",
-        loading: "Loading...",
-        error: "Error loading data",
-        noData: "No data available",
-        exportCsv: "Export CSV",
-        close: "Close",
-        currentLevel: "Current Level",
-        averageLevel: "Average Level",
-        minLevel: "Minimum Level",
-        maxLevel: "Maximum Level",
-        dateRange: "Date Range",
-        deviceInfo: "Device Information",
-        levelChart: "Water Level History (m.c.a)",
+        title: "Caixa d'\xC1gua",
+        loading: "Carregando...",
+        error: "Erro ao carregar dados",
+        noData: "Nenhum dado dispon\xEDvel",
+        exportCsv: "Exportar CSV",
+        close: "Fechar",
+        currentLevel: "N\xEDvel Atual",
+        averageLevel: "N\xEDvel M\xE9dio",
+        minLevel: "N\xEDvel M\xEDnimo",
+        maxLevel: "N\xEDvel M\xE1ximo",
+        dateRange: "Per\xEDodo",
+        deviceInfo: "Informa\xE7\xF5es do Dispositivo",
+        levelChart: "Hist\xF3rico de N\xEDvel (m.c.a)",
         percentUnit: "%",
         status: {
-          critical: "Critical",
-          low: "Low",
-          medium: "Medium",
-          good: "Good",
-          full: "Full"
+          critical: "Cr\xEDtico",
+          low: "Baixo",
+          medium: "M\xE9dio",
+          good: "Bom",
+          full: "Cheio"
         }
       };
       return {
@@ -21233,62 +21233,327 @@
       this.attachEventListeners();
     }
     /**
-     * Render modal header
+     * Render modal header - MyIO Premium Style
      */
     renderHeader() {
       const { context, params } = this.config;
       const title = params.ui?.title || `${this.i18n.title} - ${context.device.label}`;
       return `
       <div class="myio-water-tank-modal-header" style="
-        padding: 20px 24px;
-        border-bottom: 1px solid #e0e0e0;
+        padding: 4px 8px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        background: #3e1a7d;
+        color: white;
+        border-radius: 12px 12px 0 0;
+        min-height: 20px;
       ">
         <h2 style="
-          margin: 0;
-          font-size: 20px;
+          margin: 6px;
+          font-size: 18px;
           font-weight: 600;
-          color: #2c3e50;
-        ">${title}</h2>
-        <button class="myio-water-tank-modal-close" style="
-          background: none;
-          border: none;
-          font-size: 24px;
-          color: #7f8c8d;
-          cursor: pointer;
-          padding: 0;
-          width: 32px;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 4px;
-          transition: background 0.2s ease;
-        " title="${this.i18n.close}">
-          \xD7
-        </button>
+          color: white;
+          line-height: 2;
+        ">\u{1F4A7} ${title}</h2>
+        <div style="display: flex; gap: 4px; align-items: center;">
+          <button class="myio-water-tank-modal-close" title="${this.i18n.close}" style="
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 6px;
+            color: rgba(255,255,255,0.8);
+            transition: background-color 0.2s;
+          ">\xD7</button>
+        </div>
       </div>
     `;
     }
     /**
-     * Render modal body
+     * RFC-0107: Render modal body with new layout
+     * Left side: Tank visualization with percentage
+     * Right side: Chart with controls (larger area)
      */
     renderBody() {
       return `
       <div class="myio-water-tank-modal-body" style="
-        padding: 24px;
+        padding: 20px;
         overflow-y: auto;
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
       ">
-        ${this.renderDateRangePicker()}
-        ${this.renderTankVisualization()}
-        ${this.renderChart()}
+        ${this.renderControlsBar()}
+        <div style="
+          display: flex;
+          gap: 20px;
+          flex: 1;
+          min-height: 400px;
+        ">
+          ${this.renderTankPanel()}
+          ${this.renderChartPanel()}
+        </div>
       </div>
       ${this.renderFooter()}
     `;
     }
+    /**
+     * RFC-0107: Render controls bar with date range, aggregation, and limit
+     */
+    renderControlsBar() {
+      const { params } = this.config;
+      const startDate = this.formatDateForInput(params.startTs);
+      const endDate = this.formatDateForInput(params.endTs);
+      const currentAggregation = params.aggregation || "NONE";
+      const currentLimit = params.limit || 1e3;
+      return `
+      <div style="
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      ">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">De:</label>
+          <input type="date" id="myio-water-tank-start-date" value="${startDate}" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">At\xE9:</label>
+          <input type="date" id="myio-water-tank-end-date" value="${endDate}" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">Agrega\xE7\xE3o:</label>
+          <select id="myio-water-tank-aggregation" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            background: white;
+            cursor: pointer;
+          ">
+            <option value="NONE" ${currentAggregation === "NONE" ? "selected" : ""}>Nenhuma</option>
+            <option value="AVG" ${currentAggregation === "AVG" ? "selected" : ""}>M\xE9dia</option>
+            <option value="MIN" ${currentAggregation === "MIN" ? "selected" : ""}>M\xEDnimo</option>
+            <option value="MAX" ${currentAggregation === "MAX" ? "selected" : ""}>M\xE1ximo</option>
+            <option value="SUM" ${currentAggregation === "SUM" ? "selected" : ""}>Soma</option>
+            <option value="COUNT" ${currentAggregation === "COUNT" ? "selected" : ""}>Contagem</option>
+          </select>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">Limite:</label>
+          <select id="myio-water-tank-limit" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            background: white;
+            cursor: pointer;
+          ">
+            <option value="100" ${currentLimit === 100 ? "selected" : ""}>100</option>
+            <option value="500" ${currentLimit === 500 ? "selected" : ""}>500</option>
+            <option value="1000" ${currentLimit === 1e3 ? "selected" : ""}>1000</option>
+            <option value="2000" ${currentLimit === 2e3 ? "selected" : ""}>2000</option>
+            <option value="5000" ${currentLimit === 5e3 ? "selected" : ""}>5000</option>
+          </select>
+        </div>
+        <button id="myio-water-tank-apply-dates" style="
+          background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+          color: white;
+          border: none;
+          padding: 6px 16px;
+          border-radius: 6px;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        ">
+          Aplicar
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * RFC-0107: Render tank panel (left side)
+     */
+    renderTankPanel() {
+      const { data, context } = this.config;
+      let percentage = 0;
+      const percentagePoints = data.telemetry.filter((p) => p.key === "water_percentage");
+      if (percentagePoints.length > 0) {
+        const latestPercentage = percentagePoints[percentagePoints.length - 1].value;
+        percentage = latestPercentage <= 1.5 ? latestPercentage * 100 : latestPercentage;
+      } else if (context.device.currentLevel !== void 0) {
+        const level = context.device.currentLevel;
+        percentage = level <= 1.5 ? level * 100 : level;
+      }
+      const levelStatus = this.getLevelStatus(Math.min(percentage, 100));
+      const tankImageUrl = this.getTankImageUrl(Math.min(percentage, 100));
+      const displayPercentage = percentage.toFixed(1);
+      return `
+      <div style="
+        width: 200px;
+        min-width: 200px;
+        background: linear-gradient(135deg, ${levelStatus.color}10 0%, ${levelStatus.color}05 100%);
+        border: 1px solid ${levelStatus.color}30;
+        border-radius: 12px;
+        padding: 24px 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+      ">
+        <img src="${tankImageUrl}" alt="Water Tank" style="
+          width: 100px;
+          height: auto;
+          filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+        "/>
+        <div style="
+          font-size: 42px;
+          font-weight: 700;
+          color: ${levelStatus.color};
+          line-height: 1;
+        ">${displayPercentage}%</div>
+        <div style="
+          background: ${levelStatus.color};
+          color: white;
+          padding: 4px 12px;
+          border-radius: 20px;
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+        ">${levelStatus.label}</div>
+        <div style="
+          font-size: 12px;
+          color: #7f8c8d;
+          text-align: center;
+        ">${this.i18n.currentLevel}</div>
+      </div>
+    `;
+    }
+    /**
+     * RFC-0107: Render chart panel (right side) with maximize button
+     */
+    renderChartPanel() {
+      const chartPoints = this.getChartDataPoints();
+      const chartTitle = this.chartDisplayMode === "water_percentage" ? "Hist\xF3rico de N\xEDvel (%)" : this.i18n.levelChart;
+      if (chartPoints.length === 0) {
+        const displayLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
+        return `
+        <div style="
+          flex: 1;
+          background: #f8f9fa;
+          border: 1px solid #e0e0e0;
+          border-radius: 12px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+        ">
+          <div style="font-size: 48px; margin-bottom: 16px; opacity: 0.3;">\u{1F4CA}</div>
+          <div style="color: #7f8c8d; font-size: 16px;">${this.i18n.noData}</div>
+          <div style="color: #bdc3c7; font-size: 13px; margin-top: 8px;">
+            Sem dados de ${this.chartDisplayMode === "water_percentage" ? "percentual" : "n\xEDvel"} (${displayLabel}) dispon\xEDveis
+          </div>
+        </div>
+      `;
+      }
+      const firstTs = chartPoints[0]?.ts;
+      const lastTs = chartPoints[chartPoints.length - 1]?.ts;
+      return `
+      <div id="myio-water-tank-chart-panel" style="
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      ">
+        <div style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 12px;
+        ">
+          <h3 style="
+            margin: 0;
+            font-size: 15px;
+            font-weight: 600;
+            color: #2c3e50;
+          ">${chartTitle}</h3>
+          <div style="
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          ">
+            <select id="myio-water-tank-display-mode" style="
+              padding: 4px 8px;
+              border: 1px solid #ddd;
+              border-radius: 4px;
+              font-size: 12px;
+              color: #2c3e50;
+              background: white;
+              cursor: pointer;
+            ">
+              <option value="water_level" ${this.chartDisplayMode === "water_level" ? "selected" : ""}>N\xEDvel (m.c.a)</option>
+              <option value="water_percentage" ${this.chartDisplayMode === "water_percentage" ? "selected" : ""}>Percentual (%)</option>
+            </select>
+            <button id="myio-water-tank-maximize" title="Maximizar gr\xE1fico" style="
+              background: #f0f0f0;
+              border: 1px solid #ddd;
+              border-radius: 4px;
+              padding: 4px 8px;
+              cursor: pointer;
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            ">\u26F6</button>
+          </div>
+        </div>
+        <div style="flex: 1; min-height: 300px;">
+          <canvas id="myio-water-tank-chart" style="width: 100%; height: 100%;"></canvas>
+        </div>
+        ${firstTs && lastTs ? `
+          <div style="
+            margin-top: 8px;
+            font-size: 11px;
+            color: #7f8c8d;
+            text-align: center;
+          ">
+            ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
+            (${chartPoints.length} leituras)
+          </div>
+        ` : ""}
+      </div>
+    `;
+    }
     /**
      * Render date range picker
      */
@@ -21309,7 +21574,7 @@
         flex-wrap: wrap;
       ">
         <div style="display: flex; align-items: center; gap: 8px;">
-          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">From:</label>
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">De:</label>
           <input type="date" id="myio-water-tank-start-date" value="${startDate}" style="
             padding: 8px 12px;
             border: 1px solid #ddd;
@@ -21320,7 +21585,7 @@
           "/>
         </div>
         <div style="display: flex; align-items: center; gap: 8px;">
-          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">To:</label>
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">At\xE9:</label>
           <input type="date" id="myio-water-tank-end-date" value="${endDate}" style="
             padding: 8px 12px;
             border: 1px solid #ddd;
@@ -21341,7 +21606,7 @@
           cursor: pointer;
           transition: all 0.2s ease;
         ">
-          Apply
+          Aplicar
         </button>
       </div>
     `;
@@ -21563,7 +21828,7 @@
       }
       const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
       if (applyDatesBtn) {
-        applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+        applyDatesBtn.addEventListener("click", () => this.handleApplyParams());
       }
       const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
       if (displayModeSelect) {
@@ -21572,6 +21837,10 @@
           this.refreshChart();
         });
       }
+      const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+      if (maximizeBtn) {
+        maximizeBtn.addEventListener("click", () => this.handleMaximize());
+      }
       this.overlay.addEventListener("click", (e) => {
         if (e.target === this.overlay) {
           this.config.onClose();
@@ -21586,12 +21855,20 @@
       });
     }
     /**
-     * Handle date range change
+     * Handle date range change (legacy - kept for compatibility)
      */
     handleDateRangeChange() {
+      this.handleApplyParams();
+    }
+    /**
+     * RFC-0107: Handle apply params (date range, aggregation, limit)
+     */
+    handleApplyParams() {
       if (!this.modal) return;
       const startInput = this.modal.querySelector("#myio-water-tank-start-date");
       const endInput = this.modal.querySelector("#myio-water-tank-end-date");
+      const aggregationSelect = this.modal.querySelector("#myio-water-tank-aggregation");
+      const limitSelect = this.modal.querySelector("#myio-water-tank-limit");
       if (startInput && endInput) {
         const startTs = new Date(startInput.value).setHours(0, 0, 0, 0);
         const endTs = new Date(endInput.value).setHours(23, 59, 59, 999);
@@ -21599,17 +21876,77 @@
           alert("Start date must be before end date");
           return;
         }
-        console.log("[WaterTankModalView] Date range changed:", {
+        const aggregation = aggregationSelect?.value || "NONE";
+        const limit = parseInt(limitSelect?.value || "1000", 10);
+        console.log("[WaterTankModalView] Params changed:", {
           startTs,
           endTs,
+          aggregation,
+          limit,
           startDate: new Date(startTs).toISOString(),
           endDate: new Date(endTs).toISOString()
         });
-        if (this.config.onDateRangeChange) {
+        this.config.params.startTs = startTs;
+        this.config.params.endTs = endTs;
+        this.config.params.aggregation = aggregation;
+        this.config.params.limit = limit;
+        if (this.config.onParamsChange) {
+          this.config.onParamsChange({ startTs, endTs, aggregation, limit });
+        } else if (this.config.onDateRangeChange) {
           this.config.onDateRangeChange(startTs, endTs);
         }
       }
     }
+    /**
+     * RFC-0107: Handle maximize/restore chart
+     */
+    isMaximized = false;
+    originalModalStyle = "";
+    handleMaximize() {
+      if (!this.modal) return;
+      const chartPanel = this.modal.querySelector("#myio-water-tank-chart-panel");
+      const tankPanel = chartPanel?.previousElementSibling;
+      const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+      if (!chartPanel) return;
+      if (this.isMaximized) {
+        this.modal.style.cssText = this.originalModalStyle;
+        if (tankPanel) tankPanel.style.display = "";
+        chartPanel.style.cssText = `
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      `;
+        if (maximizeBtn) maximizeBtn.textContent = "\u26F6";
+        this.isMaximized = false;
+      } else {
+        this.originalModalStyle = this.modal.style.cssText;
+        this.modal.style.width = "95vw";
+        this.modal.style.height = "90vh";
+        this.modal.style.maxWidth = "95vw";
+        if (tankPanel) tankPanel.style.display = "none";
+        chartPanel.style.cssText = `
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        min-height: 100%;
+      `;
+        if (maximizeBtn) maximizeBtn.textContent = "\u26F6";
+        this.isMaximized = true;
+      }
+      requestAnimationFrame(() => {
+        this.renderCanvasChart();
+      });
+    }
     handleEscapeKey(e) {
       if (e.key === "Escape") {
         this.config.onClose();
@@ -21748,7 +22085,7 @@
       }
     }
     /**
-     * Update data and re-render chart
+     * Update data and re-render chart with new layout
      */
     updateData(data) {
       this.config.data = data;
@@ -21756,13 +22093,20 @@
         const bodyEl = this.modal.querySelector(".myio-water-tank-modal-body");
         if (bodyEl) {
           bodyEl.innerHTML = `
-          ${this.renderDateRangePicker()}
-          ${this.renderTankVisualization()}
-          ${this.renderChart()}
+          ${this.renderControlsBar()}
+          <div style="
+            display: flex;
+            gap: 20px;
+            flex: 1;
+            min-height: 400px;
+          ">
+            ${this.renderTankPanel()}
+            ${this.renderChartPanel()}
+          </div>
         `;
           const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
           if (applyDatesBtn) {
-            applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+            applyDatesBtn.addEventListener("click", () => this.handleApplyParams());
           }
           const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
           if (displayModeSelect) {
@@ -21771,6 +22115,10 @@
               this.refreshChart();
             });
           }
+          const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+          if (maximizeBtn) {
+            maximizeBtn.addEventListener("click", () => this.handleMaximize());
+          }
           requestAnimationFrame(() => {
             this.renderCanvasChart();
           });
@@ -22050,7 +22398,8 @@
           onError: (error) => this.handleError(error),
           onClose: () => this.close(),
           // Call close() to destroy view and trigger user callback
-          onDateRangeChange: (startTs, endTs) => this.handleDateRangeChange(startTs, endTs)
+          onDateRangeChange: (startTs, endTs) => this.handleDateRangeChange(startTs, endTs),
+          onParamsChange: (params) => this.handleParamsChange(params)
         });
         this.view.render();
         this.view.show();
@@ -22115,6 +22464,43 @@
         this.handleError(error);
       }
     }
+    /**
+     * RFC-0107: Handle params change (date range, aggregation, limit)
+     */
+    async handleParamsChange(params) {
+      console.log("[WaterTankModal] Params changed:", {
+        startTs: params.startTs,
+        endTs: params.endTs,
+        aggregation: params.aggregation,
+        limit: params.limit,
+        startDate: new Date(params.startTs).toISOString(),
+        endDate: new Date(params.endTs).toISOString()
+      });
+      this.options.startTs = params.startTs;
+      this.options.endTs = params.endTs;
+      this.options.aggregation = params.aggregation;
+      this.options.limit = params.limit;
+      this.context.timeRange.startTs = params.startTs;
+      this.context.timeRange.endTs = params.endTs;
+      try {
+        console.log("[WaterTankModal] Fetching data with new params...");
+        this.data = await this.fetchTelemetryData();
+        if (this.view) {
+          this.view.updateData(this.data);
+        }
+        if (this.options.onDataLoaded) {
+          try {
+            this.options.onDataLoaded(this.data);
+          } catch (callbackError) {
+            console.warn("[WaterTankModal] onDataLoaded callback error:", callbackError);
+          }
+        }
+        console.log("[WaterTankModal] Data refreshed with new params successfully");
+      } catch (error) {
+        console.error("[WaterTankModal] Failed to fetch data with new params:", error);
+        this.handleError(error);
+      }
+    }
     /**
      * Handle export functionality
      */
@@ -22236,8 +22622,8 @@
     }
     if (options.currentLevel !== void 0) {
       const level = Number(options.currentLevel);
-      if (isNaN(level) || level < 0 || level > 100) {
-        errors.push("currentLevel must be a number between 0 and 100");
+      if (isNaN(level) || level < 0) {
+        errors.push("currentLevel must be a non-negative number");
       }
     }
     if (options.limit !== void 0) {
@@ -28462,13 +28848,31 @@
   };
 
   // src/components/premium-modals/settings/SettingsFetcher.ts
-  var DefaultSettingsFetcher = class {
+  var DefaultSettingsFetcher = class _DefaultSettingsFetcher {
     jwtToken;
     tbBaseUrl;
+    static FETCH_TIMEOUT_MS = 8e3;
+    // 8 second timeout
     constructor(jwtToken, apiConfig) {
       this.jwtToken = jwtToken;
       this.tbBaseUrl = apiConfig?.tbBaseUrl || window.location.origin;
     }
+    /**
+     * Fetch with timeout to prevent hanging requests from blocking modal render
+     */
+    async fetchWithTimeout(url, options, timeoutMs = _DefaultSettingsFetcher.FETCH_TIMEOUT_MS) {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        const response = await fetch(url, {
+          ...options,
+          signal: controller.signal
+        });
+        return response;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    }
     async fetchCurrentSettings(deviceId, jwtToken, scope = "SERVER_SCOPE") {
       try {
         const [entityResult, attributesResult] = await Promise.allSettled([
@@ -28502,9 +28906,12 @@
       }
     }
     async fetchDeviceEntity(deviceId) {
-      const response = await fetch(`${this.tbBaseUrl}/api/device/${deviceId}`, {
-        headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
-      });
+      const response = await this.fetchWithTimeout(
+        `${this.tbBaseUrl}/api/device/${deviceId}`,
+        {
+          headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
+        }
+      );
       if (!response.ok) {
         throw new Error(
           `Failed to fetch device entity: ${response.status} ${response.statusText}`
@@ -28516,7 +28923,7 @@
       };
     }
     async fetchDeviceAttributes(deviceId, scope) {
-      const response = await fetch(
+      const response = await this.fetchWithTimeout(
         `${this.tbBaseUrl}/api/plugins/telemetry/DEVICE/${deviceId}/values/attributes/${scope}`,
         {
           headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
@@ -28725,12 +29132,16 @@
         const tbBaseUrl = this.params.api?.tbBaseUrl || window.location.origin;
         const url = `${tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE?keys=mapInstantaneousPower`;
         console.log("[SettingsModal] RFC-0080: Fetching GLOBAL from:", url);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 8e3);
         const response = await fetch(url, {
           headers: {
             "X-Authorization": `Bearer ${jwtToken}`,
             "Content-Type": "application/json"
-          }
+          },
+          signal: controller.signal
         });
+        clearTimeout(timeoutId);
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}`);
         }