From 3d0fc9c910aa429be716de5c2c99c5bf486c2ea7 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 16:13:48 +0200
Subject: [PATCH] Add fiat value toggle functionality: Introduce a button to
 show/hide fiat values in the dashboard, enhancing user control over displayed
 financial data.

---
 static/js/index.js                    |  3 ++-
 templates/satmachineclient/index.html | 21 ++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index d36528b..04ca64e 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -7,7 +7,8 @@ window.app = Vue.createApp({
       dashboardData: null,
       transactions: [],
       loading: true,
-      error: null
+      error: null,
+      showFiatValues: false  // Hide fiat values by default
     }
   },
 
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index b0d9cd9..b0272f8 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -57,8 +57,23 @@
               </div>
             </div>
           </div>
-          <!-- Current Value Row -->
-          <div class="row q-col-gutter-md q-mt-sm">
+          <!-- Fiat Value Toggle Button -->
+          <div class="row q-mt-sm">
+            <div class="col-12 text-center">
+              <q-btn 
+                flat 
+                dense
+                :color="showFiatValues ? 'orange' : 'grey'"
+                :icon="showFiatValues ? 'visibility_off' : 'attach_money'"
+                @click="showFiatValues = !showFiatValues"
+              >
+                ${showFiatValues ? 'Hide' : 'Show'} Fiat Values
+              </q-btn>
+            </div>
+          </div>
+
+          <!-- Current Value Row (Conditional) -->
+          <div v-if="showFiatValues" class="row q-col-gutter-md q-mt-sm">
             <div class="col-12 col-md-6">
               <q-card flat class="bg-orange-1">
                 <q-card-section class="text-center">
@@ -76,7 +91,7 @@
                     ${formatCurrencyWithCode((dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) - dashboardData.total_fiat_invested, dashboardData.currency)}
                   </div>
                   <div class="text-caption" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-7' : 'text-red-7'">
-                    ${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Unrealized Gain' : 'Unrealized Loss'}
+                    ${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Bitcoin Appreciation vs Fiat' : 'Fiat Depreciation vs Bitcoin'}
                   </div>
                   <div class="text-caption text-grey">vs total invested</div>
                 </q-card-section>