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

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

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>