From d7b5259b74a6bd8241c1b89a4a47ac6f6fa37771 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 22 Oct 2025 17:10:14 +0200
Subject: [PATCH] Adds "Pending Payment" badge for receivables

Improves user experience by visually indicating entries that represent outstanding payments owed by users.

This change introduces a "Pending Payment" badge for receivable entries in the transaction list. A receivable entry is determined by checking if the entry contains a debit line item against an account receivable account. This provides immediate visual feedback to the user, highlighting transactions requiring their action.
---
 static/js/index.js          | 17 +++++++++++++++++
 templates/castle/index.html |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/static/js/index.js b/static/js/index.js
index ba27c0c..93efa41 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -531,6 +531,23 @@ window.app = Vue.createApp({
         }
       }
       return null
+    },
+    isReceivable(entry) {
+      // Check if this is a receivable entry (user owes castle)
+      // Receivables have a debit to an "Accounts Receivable" 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 debit on an accounts receivable account
+        if (line.debit > 0) {
+          // Check if the account is associated with this user's receivables
+          const account = this.accounts.find(a => a.id === line.account_id)
+          if (account && account.name && account.name.includes('Accounts Receivable') && account.account_type === 'asset') {
+            return true
+          }
+        }
+      }
+      return false
     }
   },
   async created() {
diff --git a/templates/castle/index.html b/templates/castle/index.html
index b9b0c50..fbe7ef2 100644
--- a/templates/castle/index.html
+++ b/templates/castle/index.html
@@ -200,7 +200,12 @@
         <q-list v-if="transactions.length > 0" separator>
           <q-item v-for="entry in transactions" :key="entry.id">
             <q-item-section>
-              <q-item-label>{% raw %}{{ entry.description }}{% endraw %}</q-item-label>
+              <q-item-label>
+                {% raw %}{{ entry.description }}{% endraw %}
+                <q-badge v-if="isReceivable(entry)" color="orange" class="q-ml-sm">
+                  Pending Payment
+                </q-badge>
+              </q-item-label>
               <q-item-label caption>
                 {% raw %}{{ formatDate(entry.entry_date) }}{% endraw %}
               </q-item-label>