Adds payable/receivable badges to entries

Improves clarity by displaying "Payable" or "Receivable" badges on entries
in the transaction list.

The badge color depends on whether the user is a superuser, indicating
the direction of the transaction from the user's perspective.
This helps users quickly understand which transactions are owed to them
and which they owe.
This commit is contained in:
padreug 2025-10-22 18:46:41 +02:00
parent d302023477
commit 900ddb553b
2 changed files with 31 additions and 3 deletions

View file

@ -646,6 +646,23 @@ window.app = Vue.createApp({
}
}
return false
},
isPayable(entry) {
// Check if this is a payable entry (castle owes user)
// Payables have a credit to an "Accounts Payable" account with the user's ID
if (!entry.lines || entry.lines.length === 0) return false
for (const line of entry.lines) {
// Look for a line with positive credit on an accounts payable account
if (line.credit > 0) {
// Check if the account is associated with this user's payables
const account = this.accounts.find(a => a.id === line.account_id)
if (account && account.name && account.name.includes('Accounts Payable') && account.account_type === 'liability') {
return true
}
}
}
return false
}
},
async created() {

View file

@ -76,7 +76,7 @@
</div>
</div>
<div v-if="balance !== null">
<div class="text-h4" :class="balance.balance >= 0 ? 'text-negative' : 'text-positive'">
<div class="text-h4" :class="isSuperUser ? (balance.balance >= 0 ? 'text-negative' : 'text-positive') : (balance.balance >= 0 ? 'text-positive' : 'text-negative')">
{% raw %}{{ formatSats(Math.abs(balance.balance)) }} sats{% endraw %}
</div>
<div v-if="balance.fiat_balances && Object.keys(balance.fiat_balances).length > 0" class="text-h6 q-mt-sm">
@ -254,8 +254,19 @@
<q-item-section>
<q-item-label>
{% raw %}{{ entry.description }}{% endraw %}
<q-badge v-if="isReceivable(entry)" color="orange" class="q-ml-sm">
Pending Payment
<!-- Castle's perspective: Receivables are incoming (green), Payables are outgoing (red) -->
<q-badge v-if="isSuperUser && isReceivable(entry)" color="positive" class="q-ml-sm">
Receivable
</q-badge>
<q-badge v-else-if="isSuperUser && isPayable(entry)" color="negative" class="q-ml-sm">
Payable
</q-badge>
<!-- User's perspective: Receivables are outgoing (red), Payables are incoming (green) -->
<q-badge v-else-if="!isSuperUser && isReceivable(entry)" color="negative" class="q-ml-sm">
Payable
</q-badge>
<q-badge v-else-if="!isSuperUser && isPayable(entry)" color="positive" class="q-ml-sm">
Receivable
</q-badge>
</q-item-label>
<q-item-label caption>