From 0390ecd4a0372fc78cf43e1d7786cd3b9e5061e4 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 16 May 2026 23:24:20 +0200
Subject: [PATCH] feat(libra): color-code income/expense entries in transaction
 history
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Left green/red stripe on each card plus a matching tint on the
income-entry / expense-entry tag badge — mirrors the Record page's
red/green palette so the two screens read consistently.
---
 .../expenses/views/TransactionsPage.vue       | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index 416c645..62cac0c 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -30,6 +30,14 @@ const dateRangeType = ref<number | 'custom'>(15) // 15, 30, 60, or 'custom'
 const customStartDate = ref<string>('')
 const customEndDate = ref<string>('')
 
+function isIncome(t: Transaction): boolean {
+  return t.tags?.includes('income-entry') ?? false
+}
+
+function isExpense(t: Transaction): boolean {
+  return t.tags?.includes('expense-entry') ?? false
+}
+
 const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
 
 // Fuzzy search state and configuration
@@ -281,7 +289,11 @@ onMounted(() => {
         <div
           v-for="transaction in transactionsToDisplay"
           :key="transaction.id"
-          class="border-b md:border md:rounded-lg p-4 hover:bg-muted/50 transition-colors"
+          :class="[
+            'border-b md:border md:rounded-lg p-4 hover:bg-muted/50 transition-colors',
+            isIncome(transaction) && 'border-l-4 border-l-green-600',
+            isExpense(transaction) && 'border-l-4 border-l-red-600'
+          ]"
         >
           <!-- Transaction Header -->
           <div class="flex items-start justify-between gap-3 mb-2">
@@ -335,7 +347,16 @@ onMounted(() => {
 
             <!-- Tags -->
             <div v-if="transaction.tags && transaction.tags.length > 0" class="flex flex-wrap gap-1 mt-2">
-              <Badge v-for="tag in transaction.tags" :key="tag" variant="secondary" class="text-xs">
+              <Badge
+                v-for="tag in transaction.tags"
+                :key="tag"
+                variant="secondary"
+                :class="[
+                  'text-xs',
+                  tag === 'income-entry' && 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300',
+                  tag === 'expense-entry' && 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300'
+                ]"
+              >
                 {{ tag }}
               </Badge>
             </div>