feat: adiciona olhinho em parte superior

src/components/financial/FinancialCard.vue

@@ -13,10 +13,10 @@
         <div class="row items-center justify-between no-wrap">
           <div class="column" style="gap: 2px">
             <span v-if="percentage !== null" class="text-caption text-foreground">
-              {{ percentage }}% vs o mês anterior
+              {{ hideValues ? "••" : percentage }}% vs o mês anterior
             </span>
             <span v-if="integer !== null" class="text-caption text-foreground">
-              {{ integer }} {{ integerLabel }}
+              {{ hideValues ? "•" : integer }} {{ integerLabel }}
             </span>
           </div>
           <span v-if="description" class="text-caption text-foreground">
@@ -40,12 +40,15 @@ const props = defineProps({
   integer: { type: Number, default: null },
   integerLabel: { type: String, default: "pagamentos restantes" },
   description: { type: String, default: "" },
+  hideValues: { type: Boolean, default: false },
 });
 
 const formattedValue = computed(() =>
-  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(
-    props.financialValue,
-  ),
+  props.hideValues
+    ? "R$ ••••"
+    : new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(
+        props.financialValue,
+      ),
 );
 
 const hasFooter = computed(

src/pages/financial/FinancialPage.vue

@@ -1,6 +1,20 @@
 <template>
   <div>
     <DefaultHeaderPage title="Financeiro" :show-filter-icon="false" />
+    <div class="row justify-end q-px-md q-mb-xs">
+      <q-btn
+        flat
+        round
+        :icon="showValues ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+        color="primary"
+        @click="showValues = !showValues"
+      >
+        <q-tooltip anchor="center left" self="center right" :offset="[8, 0]">
+          {{ showValues ? 'Ocultar valores' : 'Exibir valores' }}
+        </q-tooltip>
+      </q-btn>
+    </div>
+
     <div class="row q-pa-md q-gutter-md">
       <FinancialCard
         title="Fundo de Marketing"
@@ -8,6 +22,7 @@
         :financial-value="0"
         :percentage="0"
         description="Estável"
+        :hide-values="!showValues"
       />
       <FinancialCard
         title="Receita de Mensalidade"
@@ -15,6 +30,7 @@
         :financial-value="0"
         :percentage="0"
         description="Estável"
+        :hide-values="!showValues"
       />
       <FinancialCard
         title="TBR Total"
@@ -22,6 +38,7 @@
         :financial-value="0"
         :percentage="0"
         description="Estável"
+        :hide-values="!showValues"
       />
       <TreasuryCard />
     </div>
@@ -33,6 +50,7 @@
         :financial-value="0"
         :integer="0"
         integer-label="pagamentos pendentes"
+        :hide-values="!showValues"
       />
       <FinancialCard
         title="Contas a Receber"
@@ -40,11 +58,13 @@
         :financial-value="0"
         :integer="0"
         integer-label="pagamentos pendentes"
+        :hide-values="!showValues"
       />
       <FinancialCard
         title="Saldo Bancário Total"
         icon="mdi-bank-outline"
         :financial-value="0"
+        :hide-values="!showValues"
       />
     </div>
 
@@ -56,9 +76,15 @@
 </template>
 
 <script setup>
+import { ref, watch } from "vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
 import TreasuryCard from "src/components/financial/TreasuryCard.vue";
 import LastTransactionsCard from "src/components/financial/LastTransactionsCard.vue";
 import FranchisePerformanceCard from "src/components/financial/FranchisePerformanceCard.vue";
+
+const STORAGE_KEY = "financial_show_values";
+const showValues = ref(localStorage.getItem(STORAGE_KEY) !== "false");
+
+watch(showValues, (val) => localStorage.setItem(STORAGE_KEY, String(val)));
 </script>