Refactor DCA dashboard components: Update Vue.js app structure and improve HTML template for better loading and error handling. Enhance dashboard layout with new card sections for summary and recent transactions, and add a sidebar for quick stats. Clean up unused methods and streamline data rendering.

static/js/index.js

@@ -1,18 +1,17 @@
 window.app = Vue.createApp({
+  el: '#dcaClient',
   mixins: [windowMixin],
   delimiters: ['${', '}'],
-  data() {
+  data: function () {
     return {
       dashboardData: null,
       transactions: [],
-      analytics: null,
       loading: true,
       error: null
     }
   },
 
   methods: {
-    // Utility Methods
     formatCurrency(amount) {
       if (!amount) return 'Q 0.00';
       // Convert centavos to quetzales
@@ -27,12 +26,6 @@ window.app = Vue.createApp({
       return new Date(dateString).toLocaleDateString()
     },
 
-    formatDateTime(dateString) {
-      if (!dateString) return ''
-      const date = new Date(dateString)
-      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString('en-US', { hour12: false })
-    },
-
     formatSats(amount) {
       if (!amount) return '0 sats'
       return new Intl.NumberFormat('en-US').format(amount) + ' sats'
@@ -87,5 +80,3 @@ window.app = Vue.createApp({
     }
   }
 })
-
-window.app.mount('#dcaClient')