From a042745c0410b513ee12a625766f8e977ad4cea8 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 21:39:23 +0200
Subject: [PATCH] Enhance milestone progress calculation and logging: Add
 detailed logging for the milestone progress function to aid in debugging and
 improve handling of cases with no dashboard data. Update HTML to display
 progress with two decimal places for better precision.

---
 static/js/index.js                    | 9 +++++++--
 templates/satmachineclient/index.html | 8 ++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 352e154..f59b1bb 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -199,13 +199,18 @@ window.app = Vue.createApp({
     },
 
     getMilestoneProgress() {
-      if (!this.dashboardData) return 0
+      if (!this.dashboardData) {
+        console.log('getMilestoneProgress: no dashboard data')
+        return 0
+      }
       const sats = this.dashboardData.total_sats_accumulated
       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)
+      const result = Math.min(Math.max(progress, 0), 100)
+      console.log('getMilestoneProgress:', { sats, milestone, progress, result })
+      return result
     },
     async loadChartData() {
       // Prevent multiple simultaneous requests
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index 06b9369..c11d5dc 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -43,16 +43,16 @@
             </div>
             <div class="col-12 col-md-4 q-mt-md">
               <q-circular-progress
+                show-value
+                font-size="12px"
                 :value="getMilestoneProgress()"
                 size="80px"
                 :thickness="0.25"
                 color="orange-7"
                 track-color="orange-1"
-                class="q-ma-md"
+                class="q-ma-md text-orange-8"
               >
-                <div class="text-body2 text-weight-bold text-orange-8">
-                  ${Math.round(getMilestoneProgress())}%
-                </div>
+                ${(getMilestoneProgress() || 0).toFixed(2)}%
               </q-circular-progress>
               <div class="text-body2 text-weight-medium text-grey-7">to ${getNextMilestone().name}</div>
             </div>