From 483e89163ef95847af1db300a61d3a31cde8d326 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 17 May 2026 15:26:34 +0200
Subject: [PATCH] Tag each pending approval row with an INCOME / EXPENSE badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With both kinds of entry sharing the Pending Approvals list, the row
alone didn't tell the reviewer which direction the accounting goes.
Adds a small green INCOME / red EXPENSE badge as a caption line above
the description (so it doesn't compete with description wrapping),
driven by an isIncomeEntry(entry) helper that reads the Beancount tag
set the API already returns. Also drops the now-redundant orange
pending-icon avatar — the card title already says these are pending,
and the badge does the heavier lifting.
---
 static/js/index.js         |  3 +++
 templates/libra/index.html | 11 ++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 7c01c07..1f6ccb9 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1642,6 +1642,9 @@ window.app = Vue.createApp({
     formatSats(amount) {
       return new Intl.NumberFormat().format(amount)
     },
+    isIncomeEntry(entry) {
+      return Array.isArray(entry.tags) && entry.tags.includes('income-entry')
+    },
     formatFiat(amount, currency) {
       return new Intl.NumberFormat('en-US', {
         style: 'currency',
diff --git a/templates/libra/index.html b/templates/libra/index.html
index 8641fa4..04e7688 100644
--- a/templates/libra/index.html
+++ b/templates/libra/index.html
@@ -75,12 +75,13 @@
         <h6 class="q-my-none q-mb-md">Pending Approvals</h6>
         <q-list separator>
           <q-item v-for="entry in pendingExpenses" :key="entry.id">
-            <q-item-section avatar>
-              <q-icon name="pending" color="orange" size="sm">
-                <q-tooltip>Pending approval</q-tooltip>
-              </q-icon>
-            </q-item-section>
             <q-item-section>
+              <q-item-label caption>
+                <q-badge
+                  :color="isIncomeEntry(entry) ? 'green' : 'red'"
+                  :label="isIncomeEntry(entry) ? 'INCOME' : 'EXPENSE'"
+                />
+              </q-item-label>
               <q-item-label>{% raw %}{{ entry.description }}{% endraw %}</q-item-label>
               <q-item-label caption>
                 {% raw %}{{ formatDate(entry.entry_date) }}{% endraw %}