Просмотр исходного кода

feat(treasury): show account balance on cards

Cards display the account balance and the Saldo Total card sums all balances; refresh accounts after a manual movement.
ebagabee 1 день назад
Родитель
Сommit
2df3745238
1 измененных файлов с 13 добавлено и 5 удалено
  1. 13 5
      src/pages/financial/TreasuryPage.vue

+ 13 - 5
src/pages/financial/TreasuryPage.vue

@@ -10,7 +10,7 @@
         <FinancialCard
         <FinancialCard
           :title="bank.label"
           :title="bank.label"
           :icon="bank.icon"
           :icon="bank.icon"
-          :financial-value="0"
+          :financial-value="bank.value"
           :percentage="0"
           :percentage="0"
           clickable
           clickable
           :editable="!!bank.account"
           :editable="!!bank.account"
@@ -50,19 +50,26 @@ import { formatToBRLCurrency, formatDateYMDtoDMY } from "src/helpers/utils";
 
 
 const $q = useQuasar();
 const $q = useQuasar();
 
 
-const totalCard = { key: "total", label: "Saldo Total", icon: "mdi-bank" };
-
 const accounts = ref([]);
 const accounts = ref([]);
 const launches = ref([]);
 const launches = ref([]);
 const loading = ref(false);
 const loading = ref(false);
-const selectedBank = ref(totalCard);
+
+const totalCard = computed(() => ({
+  key: "total",
+  label: "Saldo Total",
+  icon: "mdi-bank",
+  value: accounts.value.reduce((sum, account) => sum + (account.balance ?? 0), 0),
+}));
+
+const selectedBank = ref({ key: "total", label: "Saldo Total" });
 
 
 const cards = computed(() => [
 const cards = computed(() => [
-  totalCard,
+  totalCard.value,
   ...accounts.value.map((account) => ({
   ...accounts.value.map((account) => ({
     key: `account-${account.id}`,
     key: `account-${account.id}`,
     label: account.name,
     label: account.name,
     icon: "mdi-bank-outline",
     icon: "mdi-bank-outline",
+    value: account.balance ?? 0,
     account,
     account,
   })),
   })),
 ]);
 ]);
@@ -133,6 +140,7 @@ const handleAddItem = () => {
   }).onOk(() => {
   }).onOk(() => {
     $q.notify({ type: "positive", message: "Movimentação registrada com sucesso." });
     $q.notify({ type: "positive", message: "Movimentação registrada com sucesso." });
     fetchLaunches();
     fetchLaunches();
+    fetchAccounts();
   });
   });
 };
 };