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

feat(libra/balance): clarify income/expenses cards with info captions

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-05-17 16:11:57 +02:00
commit bfa5118fbe
1 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/accounting-app/views/BalancePage.vue
View file

@ -6,7 +6,7 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
import { useToast } from '@/core/composables/useToast'
import type { ExpensesAPI } from '@/modules/expenses/services/ExpensesAPI'
import type { Transaction } from '@/modules/expenses/types'
import { ArrowDown, ArrowUp, Clock, Loader2, PieChart, TrendingUp, TrendingDown } from 'lucide-vue-next'
import { ArrowDown, ArrowUp, Clock, Info, Loader2, PieChart, TrendingUp, TrendingDown } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
const { t } = useI18n()
@ -162,7 +162,7 @@ function formatFiat(amount: number, currency: string): string {
<!-- Income -->
<div class="rounded-xl border bg-card p-4">
<div class="flex items-center gap-2 mb-2">
<TrendingUp class="w-4 h-4 text-green-600 dark:text-green-400" />
<TrendingUp class="w-4 h-4 text-muted-foreground" />
<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Income</h3>
</div>
<p class="text-lg font-semibold text-foreground">
@ -178,12 +178,18 @@ function formatFiat(amount: number, currency: string): string {
{{ formatFiat(amount, currency) }}
</p>
</div>
<div class="mt-3 flex items-start gap-1.5">
<Info class="w-3 h-3 mt-0.5 shrink-0 text-primary/70" />
<p class="text-[11px] leading-snug text-primary/80">
Collected on behalf of the organization — you owe this back.
</p>
</div>
</div>
<!-- Expenses -->
<div class="rounded-xl border bg-card p-4">
<div class="flex items-center gap-2 mb-2">
<TrendingDown class="w-4 h-4 text-red-600 dark:text-red-400" />
<TrendingDown class="w-4 h-4 text-muted-foreground" />
<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Expenses</h3>
</div>
<p class="text-lg font-semibold text-foreground">
@ -199,6 +205,12 @@ function formatFiat(amount: number, currency: string): string {
{{ formatFiat(amount, currency) }}
</p>
</div>
<div class="mt-3 flex items-start gap-1.5">
<Info class="w-3 h-3 mt-0.5 shrink-0 text-primary/70" />
<p class="text-[11px] leading-snug text-primary/80">
Paid on the organization's behalf — owed back to you.
</p>
</div>
</div>
</div>