aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

feat(libra): color-code income/expense entries in transaction history

Browse source 
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.
This commit is contained in:
Padreug 2026-05-16 23:24:20 +02:00
commit 0390ecd4a0
1 changed files with 23 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/modules/expenses/views/TransactionsPage.vue
View file

@ -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>