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

@ -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>