diff --git a/src/accounting-app/views/BalancePage.vue b/src/accounting-app/views/BalancePage.vue index 93ce27f..1335021 100644 --- a/src/accounting-app/views/BalancePage.vue +++ b/src/accounting-app/views/BalancePage.vue @@ -25,8 +25,24 @@ const totalIncomeFiat = ref>({}) const pendingTransactions = ref([]) const isLoading = ref(true) -const fiatBalanceEntries = computed(() => - Object.entries(fiatBalances.value).filter(([, amount]) => Math.abs(amount) > 0.005) +// Per-currency split: sign convention from the user perspective: +// positive fiat_balance = user owes Libra, negative = Libra owes user. +// Distinct currencies can't be netted across each other (no spot rate), +// so we render them grouped by direction instead of one collapsed label. +const youOweFiatEntries = computed(() => + Object.entries(fiatBalances.value) + .filter(([, amount]) => amount > 0.005) + .map(([currency, amount]) => [currency, amount] as [string, number]) +) + +const libraOwesFiatEntries = computed(() => + Object.entries(fiatBalances.value) + .filter(([, amount]) => amount < -0.005) + .map(([currency, amount]) => [currency, Math.abs(amount)] as [string, number]) +) + +const hasAnyFiatBalance = computed(() => + youOweFiatEntries.value.length > 0 || libraOwesFiatEntries.value.length > 0 ) const expensesFiatEntries = computed(() => @@ -126,30 +142,64 @@ function formatFiat(amount: number, currency: string): string {

{{ t('libra.balance.netBalance') }}

-
-
+
+ +
+
+

+ {{ t('libra.balance.youOwe') }} +

+
+ + {{ formatFiat(amount, currency) }} + +
+
+
+

+ {{ t('libra.balance.owedToYou') }} +

+
+ + {{ formatFiat(amount, currency) }} + +
+
+
+ + +
- - {{ formatAmount(balance) }} - + {{ formatAmount(balance) }} {{ balanceCurrency }}
-
- - {{ formatFiat(Math.abs(amount), currency) }} + + +
+ + + Net at current rates: {{ formatAmount(balance) }} {{ balanceCurrency }} + ({{ libraOwesUser ? t('libra.balance.owedToYou').toLowerCase() : t('libra.balance.youOwe').toLowerCase() }})
-

- {{ libraOwesUser ? t('libra.balance.owedToYou') : t('libra.balance.youOwe') }} -