From 272041f8bbe7a7ca3d74033d44edcb06ab783496 Mon Sep 17 00:00:00 2001 From: padreug Date: Sun, 22 Jun 2025 20:13:41 +0200 Subject: [PATCH] Enhance DCA dashboard: Add excitement to sat formatting for larger amounts, implement refresh functionality with notifications for data loading errors, and introduce stacking milestones and DCA tips sections for improved user engagement and insights. --- static/js/index.js | 46 ++- templates/satmachineclient/index.html | 412 +++++++++++++++++++------- 2 files changed, 351 insertions(+), 107 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index f91c022..ef0aebd 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -94,7 +94,12 @@ window.app = Vue.createApp({ formatSats(amount) { if (!amount) return '0 sats' - return new Intl.NumberFormat('en-US').format(amount) + ' sats' + const formatted = new Intl.NumberFormat('en-US').format(amount) + // Add some excitement for larger amounts + if (amount >= 1000000) return formatted + ' sats 💎' + if (amount >= 100000) return formatted + ' sats 🚀' + if (amount >= 10000) return formatted + ' sats ⚡' + return formatted + ' sats' }, async loadDashboardData() { @@ -126,7 +131,46 @@ window.app = Vue.createApp({ }) } catch (error) { console.error('Error loading transactions:', error) + this.$q.notify({ + type: 'negative', + message: 'Failed to load transactions', + position: 'top' + }) } + }, + + async refreshAllData() { + try { + this.loading = true + await Promise.all([ + this.loadDashboardData(), + this.loadTransactions() + ]) + this.$q.notify({ + type: 'positive', + message: 'Dashboard refreshed!', + icon: 'refresh', + position: 'top' + }) + } catch (error) { + console.error('Error refreshing data:', error) + this.$q.notify({ + type: 'negative', + message: 'Failed to refresh data', + position: 'top' + }) + } finally { + this.loading = false + } + }, + + getSatsMilestoneProgress() { + if (!this.dashboardData) return 0 + const sats = this.dashboardData.total_sats_accumulated + if (sats >= 1000000) return 100 + if (sats >= 100000) return 75 + if (sats >= 10000) return 50 + return Math.min((sats / 10000) * 50, 50) } }, diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html index 1cddfa4..c431a84 100644 --- a/templates/satmachineclient/index.html +++ b/templates/satmachineclient/index.html @@ -27,71 +27,126 @@
- - - -
DCA Overview
-
-
-
-
${formatSats(dashboardData.total_sats_accumulated)}
-
Total Sats
+ + + +
+
+
+ ⚡ ${formatSats(dashboardData.total_sats_accumulated)} +
+
stacked and growing!
+
+ ${dashboardData.total_transactions} DCA ${dashboardData.total_transactions === 1 ? 'purchase' : 'purchases'} • ${dashboardData.dca_mode} mode
-
-
-
${formatCurrency(dashboardData.total_fiat_invested)}
-
Total Invested
-
-
-
-
-
${formatCurrency(dashboardData.current_fiat_balance)}
-
Available Balance
-
-
-
-
-
${dashboardData.total_transactions}
-
Transactions
-
+
+ +
+ ${Math.min(Math.round((dashboardData.total_sats_accumulated / 100000) * 100), 100)}% +
+ +
to 100k sats
- -
-
+ + + + +
+
+ + +
${formatCurrency(dashboardData.total_fiat_invested)}
+
Total Invested
+ + +
+
+ + +
${formatCurrency(dashboardData.current_fiat_balance)}
+
Available Balance
+ + +
+
+ + +
${dashboardData.total_transactions}
+
DCA Sessions
+ + +
+
+ + +
+ ${Math.round(dashboardData.average_cost_basis)} +
+
-
+
Avg Cost (sats/GTQ)
+ + +
+
+ + + +
+
+
+ Bitcoin Performance +
+
+
${showFiatValues ? 'Hide' : 'Show'} Fiat Values
- -
+ +
- + +
${formatCurrencyWithCode(dashboardData.current_sats_fiat_value, dashboardData.currency)}
-
Current Value of Bitcoin Holdings
-
at today's ${dashboardData.currency} exchange rate
+
Current Bitcoin Value
+
at today's ${dashboardData.currency} rate
- -
+ + +
${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? '+' : ''} ${formatCurrencyWithCode((dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) - dashboardData.total_fiat_invested, dashboardData.currency)}
- ${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Bitcoin Appreciation vs Fiat' : 'Fiat Depreciation vs Bitcoin'} + ${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Portfolio Growth' : 'Portfolio Change'}
vs total invested
 @@ -99,46 +154,68 @@
-
-
- - -
- ${formatCurrency(dashboardData.pending_fiat_deposits)} pending deposit -
-
- Cash waiting to be inserted into ATM for DCA processing -
- -
+
+ + +
+ ⏳ ${formatCurrency(dashboardData.pending_fiat_deposits)} ready to DCA +
+
+ Cash waiting to be inserted into ATM for automatic Bitcoin purchases +
+
- + -
DCA Status
-
-
-
Mode: ${dashboardData.dca_mode}
+
+
+
+ DCA Strategy +
-
-
Status: - - ${dashboardData.dca_status} - -
+
+ + ${dashboardData.dca_status} +
-
-
Average Cost Basis: ${Math.round(dashboardData.average_cost_basis)} sats/GTQ
+ +
+
+ + +
+ ${dashboardData.dca_mode} Mode +
+
+ Automatic Bitcoin accumulation strategy +
+ + +
+
+ + +
+ ${Math.round(dashboardData.average_cost_basis)} sats/GTQ +
+
+ Average cost basis over time +
+ + +
@@ -148,16 +225,22 @@
-
Transaction History
+
+ DCA Transaction History +
+
+ Your Bitcoin accumulation journey +
Refresh @@ -172,18 +255,20 @@ :loading="loading" flat bordered - :no-data-label="'No transactions yet - start your DCA journey!'" + :no-data-label="'🚀 No transactions yet - start your DCA journey!'" + class="q-mt-md" >