Use Numeric in JSON output

web/src/pages/BudgetSidebar.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
 import { defineComponent } from "vue"
+import Currency from "../components/Currency.vue"
 
 export default defineComponent({
-  props: ['budgetid', 'accountid'],
+    props: ["budgetid", "accountid"],
+    components: { Currency }
 })
 </script>
 
@@ -21,14 +23,14 @@ export default defineComponent({
       On-Budget Accounts
       <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{(account.Balance.Int / 100).toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
+        <Currency :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Off-Budget Accounts
       <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
-            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
+        <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
+        <Currency :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">