From 7e030c5d0a80bc651f05029845ea1a2d09de2bf1 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 20:36:46 +0200
Subject: [PATCH] Refactor milestone tracking: Introduce a new method to
 determine the next milestone based on total sats accumulated, and update
 progress calculations accordingly. Adjust frontend to display progress
 towards the next milestone and enhance user feedback with additional
 milestone indicators.

---
 static/js/index.js                    | 23 ++++++++++++++++++-----
 templates/satmachineclient/index.html | 17 ++++++++++++++---
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index ef0aebd..e61f6dc 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -164,13 +164,26 @@ window.app = Vue.createApp({
       }
     },
 
-    getSatsMilestoneProgress() {
+    getNextMilestone() {
+      if (!this.dashboardData) return { target: 100000, name: '100k sats' }
+      const sats = this.dashboardData.total_sats_accumulated
+      
+      if (sats < 10000) return { target: 10000, name: '10k sats' }
+      if (sats < 100000) return { target: 100000, name: '100k sats' }
+      if (sats < 500000) return { target: 500000, name: '500k sats' }
+      if (sats < 1000000) return { target: 1000000, name: '1M sats' }
+      if (sats < 2100000) return { target: 2100000, name: '2.1M sats' }
+      return { target: 21000000, name: '21M sats' }
+    },
+
+    getMilestoneProgress() {
       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)
+      const milestone = this.getNextMilestone()
+      
+      // Show total progress toward the next milestone (from 0)
+      const progress = (sats / milestone.target) * 100
+      return Math.min(Math.max(progress, 0), 100)
     }
   },
 
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index d634642..463c61a 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -42,7 +42,7 @@
             </div>
             <div class="col-12 col-md-4 q-mt-md">
               <q-circular-progress
-                :value="Math.min((dashboardData.total_sats_accumulated / 100000) * 100, 100)"
+                :value="getMilestoneProgress()"
                 size="80px"
                 :thickness="0.2"
                 color="orange"
@@ -50,10 +50,10 @@
                 class="q-ma-md"
               >
                 <div class="text-caption text-orange-8">
-                  ${Math.min(Math.round((dashboardData.total_sats_accumulated / 100000) * 100), 100)}%
+                  ${Math.round(getMilestoneProgress())}%
                 </div>
               </q-circular-progress>
-              <div class="text-caption text-grey-6">to 100k sats</div>
+              <div class="text-caption text-grey-6">to ${getNextMilestone().name}</div>
             </div>
           </div>
         </q-card-section>
@@ -392,6 +392,17 @@
             </q-item-section>
           </q-item>
           
+          <q-item>
+            <q-item-section avatar>
+              <div v-if="dashboardData.total_sats_accumulated >= 500000" class="text-positive text-h6">✅</div>
+              <div v-else class="text-grey-5 text-h6">⭕</div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-body2">500,000 sats</q-item-label>
+              <q-item-label caption>Half a million! 🔥</q-item-label>
+            </q-item-section>
+          </q-item>
+          
           <q-item>
             <q-item-section avatar>
               <div v-if="dashboardData.total_sats_accumulated >= 1000000" class="text-positive text-h6">✅</div>