Update client API and frontend for DCA dashboard: Modify API endpoints to correctly reference wallet user, enhance Vue.js component with loading and error states, and implement data fetching for dashboard summary and transactions. Update HTML template to reflect new client extension structure and improve user experience with dynamic content rendering.

static/js/index.js

@@ -1,25 +1,25 @@
 window.app = Vue.createApp({
-  el: '#vue',
   mixins: [windowMixin],
   delimiters: ['${', '}'],
-  data: function () {
+  data() {
     return {
+      dashboardData: null,
+      transactions: [],
+      analytics: null,
+      loading: true,
+      error: null
     }
   },
 
-  ///////////////////////////////////////////////////
-  ////////////////METHODS FUNCTIONS//////////////////
-  ///////////////////////////////////////////////////
-
   methods: {
     // Utility Methods
     formatCurrency(amount) {
       if (!amount) return 'Q 0.00';
-
+      // Convert centavos to quetzales
       return new Intl.NumberFormat('es-GT', {
         style: 'currency',
         currency: 'GTQ',
-      }).format(amount);
+      }).format(amount / 100);
     },
 
     formatDate(dateString) {
@@ -38,16 +38,54 @@ window.app = Vue.createApp({
       return new Intl.NumberFormat('en-US').format(amount) + ' sats'
     },
 
+    async loadDashboardData() {
+      try {
+        const {data} = await LNbits.api.request(
+          'GET',
+          '/satmachineclient/api/v1/dashboard/summary',
+          this.g.user.wallets[0].inkey
+        )
+        this.dashboardData = data
+      } catch (error) {
+        console.error('Error loading dashboard data:', error)
+        this.error = 'Failed to load dashboard data'
+      }
+    },
+
+    async loadTransactions() {
+      try {
+        const {data} = await LNbits.api.request(
+          'GET',
+          '/satmachineclient/api/v1/dashboard/transactions?limit=10',
+          this.g.user.wallets[0].inkey
+        )
+        this.transactions = data
+      } catch (error) {
+        console.error('Error loading transactions:', error)
+      }
+    }
   },
-  ///////////////////////////////////////////////////
-  //////LIFECYCLE FUNCTIONS RUNNING ON PAGE LOAD/////
-  ///////////////////////////////////////////////////
+
   async created() {
-    // Load DCA client data
-    await Promise.all([
-    ])
+    try {
+      this.loading = true
+      await Promise.all([
+        this.loadDashboardData(),
+        this.loadTransactions()
+      ])
+    } catch (error) {
+      console.error('Error initializing dashboard:', error)
+      this.error = 'Failed to initialize dashboard'
+    } finally {
+      this.loading = false
+    }
   },
 
   computed: {
+    hasData() {
+      return this.dashboardData && !this.loading
+    }
   }
 })
+
+window.app.mount('#dcaClient')