myio-js-library 0.1.30 → 0.1.32

package/README.md

@@ -1081,6 +1081,30 @@ const controller = await MyIOLibrary.createInputDateRangePickerInsideDIV({
 
 The library includes four premium modal components for ThingsBoard dashboards that provide comprehensive device analytics and reporting capabilities.
 
+#### Token Authentication
+
+Both AllReportModal and DeviceReportModal use a dual-token authentication system to access different API endpoints:
+
+- **`api.tbJwtToken`** - Used for ThingsBoard API endpoints (/) for device management and configuration
+- **`api.ingestionToken`** - Used for Data API endpoints (https://data.apps.myio-bas.com) for telemetry data access
+
+**Important**: The tokens are automatically applied based on the target endpoint. You must provide the appropriate token in the API configuration:
+
+```javascript
+// Example API configuration with both tokens
+const apiConfig = {
+  clientId: 'your-client-id',
+  clientSecret: 'your-client-secret',
+  dataApiBaseUrl: 'https://data.apps.myio-bas.com',
+  tbJwtToken: 'jwt-token-for-thingsboard-apis',      // For ThingsBoard endpoints
+  ingestionToken: 'ingestion-token-for-data-apis'    // For Data API endpoints
+};
+```
+
+The modals will automatically select the correct token based on the API endpoint being called:
+- Data API calls (data.apps.myio-bas.com) → Uses `ingestionToken`
+- ThingsBoard API calls (/) → Uses `tbJwtToken`
+
 #### `openDashboardPopupReport(params: OpenDeviceReportParams): ModalHandle`
 
 Opens a device-specific daily consumption report modal with built-in date range picker, sortable table, and CSV export functionality.

package/dist/index.cjs

@@ -2631,19 +2631,19 @@ function renderCardComponentV2({
           </div>
         </div>
 
-        <div class="connection-status-icon">
-          ${connectionIcon}
-        </div>
+        <div class="connection-status-icon" data-conn="${connectionStatus}" data-state="${deviceStatus}" aria-label="${connectionStatus}"></div>
         
       </div>
     `;
   container.innerHTML = cardHTML;
   const enhancedCardElement = container.querySelector(".device-card-centered");
-  if (!document.getElementById("myio-enhanced-card-layout-styl\u0111es")) {
+  if (!document.getElementById("myio-enhanced-card-layout-styles")) {
     const layoutStyle = document.createElement("style");
     layoutStyle.id = "myio-enhanced-card-layout-styles";
     layoutStyle.textContent = `
-      /* Premium Enhanced Card Design - Reduced Size (10% smaller) */
+      /* ===== MYIO Card v2 \u2014 Clean Piano Keys & Flat Status ===== */
+
+      /* Card shell (kept) */
       .device-card-centered.clickable {
         width: 90% !important;
         max-width: 280px !important;
@@ -2682,8 +2682,8 @@ function renderCardComponentV2({
       .device-card-centered.clickable:hover::before {
         opacity: 1;
       }
-      
-      /* Premium Selection State */
+
+      /* Selected / Offline (kept) */
       .device-card-centered.selected {
         border: 2px solid #00e09e !important;
         box-shadow: 0 12px 40px rgba(0, 224, 158, 0.25), 0 4px 12px rgba(0, 224, 158, 0.15) !important;
@@ -2696,7 +2696,6 @@ function renderCardComponentV2({
         background: linear-gradient(90deg, #00e09e 0%, #00d4aa 100%);
       }
       
-      /* Premium Offline State */
       .device-card-centered.offline {
         border: 2px solid #ef4444 !important;
         background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 50%, #fef2f2 100%) !important;
@@ -2716,8 +2715,8 @@ function renderCardComponentV2({
           box-shadow: 0 12px 40px rgba(239, 68, 68, 0.25), 0 4px 12px rgba(239, 68, 68, 0.2);
         }
       }
-      
-      /* Premium Device Image - Reduced Size (10% smaller) */
+
+      /* Device image & titles (kept) */
       .device-card-centered .device-image {
         max-height: 47px !important;
         width: auto;
@@ -2733,7 +2732,6 @@ function renderCardComponentV2({
         transform: scale(1.05);
       }
       
-      /* Premium Typography - Reduced Size (10% smaller) - FORCED VERTICAL LAYOUT */
       .device-card-centered .device-title-row {
         display: flex !important;
         flex-direction: column !important;
@@ -2770,8 +2768,8 @@ function renderCardComponentV2({
         margin: 0 !important;
         padding: 0 !important;
       }
-      
-      /* Premium Value Display - Reduced Size (10% smaller) */
+
+      /* Value pill (kept) */
       .device-card-centered .consumption-main {
         background: linear-gradient(135deg, rgba(0, 224, 158, 0.1) 0%, rgba(0, 180, 216, 0.1) 100%);
         border-radius: 10px;
@@ -2795,11 +2793,9 @@ function renderCardComponentV2({
         margin-left: 5px;
       }
       
-      /* Premium Status Icons - Reduced Size (10% smaller) */
       .device-card-centered .flash-icon {
         font-size: 1rem !important;
         margin-right: 7px;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
         transition: all 0.3s ease;
       }
       
@@ -2823,8 +2819,8 @@ function renderCardComponentV2({
           filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3));
         }
       }
-      
-      /* Premium Checkbox - Reduced Size (10% smaller) */
+
+      /* Checkbox (kept) */
       .device-card-centered .card-checkbox {
         width: 16px !important;
         height: 16px !important;
@@ -2861,71 +2857,105 @@ function renderCardComponentV2({
         font-weight: bold;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       }
-      
-      /* Premium Card Actions - Mirrored to Left Side - Reduced Size (10% smaller) */
+
+      /* \u2014\u2014\u2014 NEW: Piano-Key Actions (flat by default, full height) \u2014\u2014\u2014 */
       .device-card-centered .card-actions {
         position: absolute;
-        top: 10px;
-        left: 10px;
+        left: 12px;
+        top: 12px;
+        bottom: 12px;
+        padding: 0;
         display: flex;
         flex-direction: column;
-        gap: 7px;
+        gap: 0;
+        border: 1px solid rgba(226, 232, 240, 0.9);
+        border-radius: 8px;
+        background: #fff;
+        overflow: visible;
+        box-shadow: none !important;
         z-index: 10;
       }
       
       .device-card-centered .card-action {
-        width: 32px !important;
-        height: 32px !important;
-        border-radius: 9px !important;
-        background: rgba(255, 255, 255, 0.9) !important;
-        border: 1px solid rgba(226, 232, 240, 0.8) !important;
-        backdrop-filter: blur(10px);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        width: 36px !important;
+        height: 36px !important;
+        border: 0;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
+        background: #fff !important;
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        transform: translateZ(0);
+        transition: transform 0.18s ease, box-shadow 0.18s ease;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
+        margin: 0;
+        border-radius: 0;
       }
       
-      .device-card-centered .card-action:hover {
-        background: rgba(0, 224, 158, 0.1) !important;
-        border-color: rgba(0, 224, 158, 0.3) !important;
-        transform: scale(1.1) translateY(-1px);
-        box-shadow: 0 3px 10px rgba(0, 224, 158, 0.15);
+      .device-card-centered .card-action:first-child {
+        border-top-left-radius: 7px;
+        border-top-right-radius: 7px;
+      }
+      
+      .device-card-centered .card-action:last-child {
+        border-bottom: 0;
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
       }
       
       .device-card-centered .card-action img {
         width: 16px !important;
         height: 16px !important;
-        filter: grayscale(0.2) brightness(0.8);
-        transition: all 0.3s ease;
+        filter: grayscale(0.2) brightness(0.85);
+        transition: transform 0.18s ease, filter 0.18s ease;
+      }
+
+      /* Lift on interaction only */
+      .device-card-centered .card-action:hover,
+      .device-card-centered .card-action:focus-visible {
+        transform: translateY(-2px) scale(1.05);
+        box-shadow: 0 6px 14px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
+        outline: none;
       }
       
-      .device-card-centered .card-action:hover img {
+      .device-card-centered .card-action:hover img,
+      .device-card-centered .card-action:focus-visible img {
         filter: grayscale(0) brightness(1);
-        transform: scale(1.1);
+        transform: scale(1.08);
       }
-      
-      /* Premium Info Panel */
-      .myio-enhanced-card-container .info-panel {
-        background: rgba(255, 255, 255, 0.95) !important;
-        backdrop-filter: blur(20px) !important;
-        border-radius: 16px !important;
-        border: 1px solid rgba(226, 232, 240, 0.8);
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+
+      /* \u2014\u2014\u2014 NEW: Flat Status (CSS dot, never clipped) \u2014\u2014\u2014 */
+      .device-card-centered .connection-status-icon {
+        position: absolute;
+        bottom: 18px;
+        right: 18px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: #22c55e;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        z-index: 5;
       }
-      
-      .myio-enhanced-card-container .info-close {
-        background: rgba(239, 68, 68, 0.1) !important;
-        border: 1px solid rgba(239, 68, 68, 0.2) !important;
-        border-radius: 8px !important;
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s ease;
+
+      /* Map colors by connection or device state */
+      .device-card-centered .connection-status-icon[data-conn="offline"] {
+        background: #94a3b8;
+      }
+      .device-card-centered .connection-status-icon[data-state="warning"] {
+        background: #f59e0b;
+      }
+      .device-card-centered .connection-status-icon[data-state="danger"] {
+        background: #ef4444;
+      }
+      .device-card-centered .connection-status-icon[data-state="no_info"] {
+        background: #94a3b8;
+      }
+      .device-card-centered .connection-status-icon[data-state="maintenance"] {
+        background: #0ea5e9;
       }
       
       .myio-enhanced-card-container .info-close:hover {
@@ -2933,24 +2963,7 @@ function renderCardComponentV2({
         transform: scale(1.1);
       }
 
-      .device-card-centered .connection-status-icon {
-        position: absolute;
-        bottom: 10px;
-        right: 12px;
-        width: 22px;
-        height: 22px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.8);
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);  
-        font-size: 14px;
-        z-index: 5;
-        backdrop-filter: blur(4px);
-      }
-      
-      /* Premium Responsive Design */
+      /* Responsive / Dark mode (kept) */
       @media (max-width: 768px) {
         .device-card-centered.clickable {
           padding: 16px !important;
@@ -2962,12 +2975,11 @@ function renderCardComponentV2({
         }
         
         .device-card-centered .card-action {
-          width: 32px !important;
-          height: 32px !important;
+          width: 36px !important;
+          height: 36px !important;
         }
       }
       
-      /* Premium Dark Mode Support */
       @media (prefers-color-scheme: dark) {
         .device-card-centered.clickable {
           background: linear-gradient(145deg, #1e293b 0%, #334155 100%) !important;
@@ -2983,9 +2995,14 @@ function renderCardComponentV2({
           color: #94a3b8 !important;
         }
         
+        .device-card-centered .card-actions {
+          border-color: rgba(71, 85, 105, 0.8);
+          background: #1e293b;
+        }
+        
         .device-card-centered .card-action {
-          background: rgba(30, 41, 59, 0.9) !important;
-          border-color: rgba(71, 85, 105, 0.8) !important;
+          background: #1e293b !important;
+          border-bottom: 1px solid rgba(71, 85, 105, 0.8);
         }
       }
     `;
@@ -5759,10 +5776,11 @@ var createDefaultEnergyFetcher = (params) => {
     const url = `${baseUrl}/api/v1/telemetry/devices/${ingestionId}/energy?startTime=${encodeURIComponent(startISO)}&endTime=${encodeURIComponent(endISO)}&granularity=1d&page=1&pageSize=1000&deep=0`;
     const token = params.api.ingestionToken;
     if (!token) {
-      throw new Error("ingestionToken is required for Data/Ingestion API calls");
+      throw new Error("ingestionToken is required for Data API calls to data.apps.myio-bas.com");
     }
     const response = await fetch(url, {
       headers: {
+        // Using ingestionToken for Data API endpoints (data.apps.myio-bas.com)
         "Authorization": `Bearer ${token}`,
         "Content-Type": "application/json"
       }
@@ -7327,15 +7345,19 @@ var AllReportModal = class {
   }
   async fetchCustomerTotals(startISO, endISO) {
     if (this.params.fetcher) {
+      const token2 = this.params.api.ingestionToken || await this.authClient.getBearer();
       return await this.params.fetcher({
         baseUrl: this.params.api.dataApiBaseUrl || "https://api.data.apps.myio-bas.com",
-        token: await this.authClient.getBearer(),
+        token: token2,
         customerId: this.params.customerId,
         startISO,
         endISO
       });
     }
-    const token = await this.authClient.getBearer();
+    const token = this.params.api.ingestionToken;
+    if (!token) {
+      throw new Error("ingestionToken is required for Data API calls to data.apps.myio-bas.com");
+    }
     const baseUrl = this.params.api.dataApiBaseUrl || "https://api.data.apps.myio-bas.com";
     const startTime = encodeURIComponent(startISO);
     const endTime = encodeURIComponent(endISO);
@@ -7344,26 +7366,12 @@ var AllReportModal = class {
     const response = await fetch(url, {
       method: "GET",
       headers: {
+        // Using ingestionToken for Data API endpoints (data.apps.myio-bas.com)
         "Authorization": `Bearer ${token}`,
         "Content-Type": "application/json"
       }
     });
     if (!response.ok) {
-      if (response.status === 401) {
-        this.authClient.clearCache();
-        const newToken = await this.authClient.getBearer();
-        const retryResponse = await fetch(url, {
-          method: "GET",
-          headers: {
-            "Authorization": `Bearer ${newToken}`,
-            "Content-Type": "application/json"
-          }
-        });
-        if (!retryResponse.ok) {
-          throw new Error(`Erro de autentica\xE7\xE3o: ${retryResponse.status} ${retryResponse.statusText}`);
-        }
-        return await retryResponse.json();
-      }
       throw new Error(`Erro na API: ${response.status} ${response.statusText}`);
     }
     const data = await response.json();