From 900ddb553b1e6e36066ddc6e29ce8e15822f5afa Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 22 Oct 2025 18:46:41 +0200
Subject: [PATCH] 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.
---
 static/js/index.js          | 17 +++++++++++++++++
 templates/castle/index.html | 17 ++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index cee8e08..3735438 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -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() {
diff --git a/templates/castle/index.html b/templates/castle/index.html
index 771cb06..68ef696 100644
--- a/templates/castle/index.html
+++ b/templates/castle/index.html
@@ -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>