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

Transaction History now shows a left green/red stripe on each card and
tints the matching income-entry/expense-entry tag badge — mirrors the
Record page's red/green palette so the two screens read consistently.
Adds an All / Income / Expenses filter row (with Filter icon, aligned
to the Calendar-iconed date range row above) that applies on top of
search and date filtering.
---
 .../expenses/views/TransactionsPage.vue       | 58 +++++++++++++++++--
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue
index 416c645..ae0618d 100644
--- a/src/modules/expenses/views/TransactionsPage.vue
+++ b/src/modules/expenses/views/TransactionsPage.vue
@@ -17,7 +17,8 @@ import {
   Flag,
   XCircle,
   RefreshCw,
-  Calendar
+  Calendar,
+  Filter
 } from 'lucide-vue-next'
 
 const { user } = useAuth()
@@ -29,6 +30,21 @@ const isLoading = ref(false)
 const dateRangeType = ref<number | 'custom'>(15) // 15, 30, 60, or 'custom'
 const customStartDate = ref<string>('')
 const customEndDate = ref<string>('')
+const typeFilter = ref<'all' | 'income' | 'expense'>('all')
+
+const typeFilterOptions = [
+  { label: 'All', value: 'all' as const },
+  { label: 'Income', value: 'income' as const },
+  { label: 'Expenses', value: 'expense' as const }
+]
+
+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)
 
@@ -55,9 +71,12 @@ const searchOptions: FuzzySearchOptions<Transaction> = {
   matchAllWhenSearchEmpty: true
 }
 
-// Transactions to display (search results or all transactions)
+// Transactions to display (search results or all transactions), filtered by type
 const transactionsToDisplay = computed(() => {
-  return searchResults.value.length > 0 ? searchResults.value : transactions.value
+  const base = searchResults.value.length > 0 ? searchResults.value : transactions.value
+  if (typeFilter.value === 'income') return base.filter(isIncome)
+  if (typeFilter.value === 'expense') return base.filter(isExpense)
+  return base
 })
 
 // Handle search results
@@ -205,6 +224,22 @@ onMounted(() => {
             </Button>
           </div>
 
+          <!-- Type Filter (All / Income / Expenses) -->
+          <div class="flex items-center gap-2 flex-wrap">
+            <Filter class="h-4 w-4 text-muted-foreground" />
+            <Button
+              v-for="option in typeFilterOptions"
+              :key="option.value"
+              :variant="typeFilter === option.value ? 'default' : 'outline'"
+              size="sm"
+              class="h-8 px-3 text-xs"
+              @click="typeFilter = option.value"
+              :disabled="isLoading"
+            >
+              {{ option.label }}
+            </Button>
+          </div>
+
           <!-- Custom Date Range Inputs -->
           <div v-if="dateRangeType === 'custom'" class="flex items-end gap-2 flex-wrap">
             <div class="flex flex-col gap-1">
@@ -281,7 +316,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 +374,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>