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" >