From bfa5118fbe13658b965608b90c01dc921a1e1f1f Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 17 May 2026 16:11:57 +0200
Subject: [PATCH] feat(libra/balance): clarify income/expenses cards with info
 captions

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/accounting-app/views/BalancePage.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/accounting-app/views/BalancePage.vue b/src/accounting-app/views/BalancePage.vue
index c44382c..93ce27f 100644
--- a/src/accounting-app/views/BalancePage.vue
+++ b/src/accounting-app/views/BalancePage.vue
@@ -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>