feat(libra/balance): show lifetime income vs expenses breakdown

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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 } from 'lucide-vue-next'
+import { ArrowDown, ArrowUp, Clock, Loader2, PieChart, TrendingUp, TrendingDown } from 'lucide-vue-next'
 import { Badge } from '@/components/ui/badge'
 
 const { t } = useI18n()
@@ -18,6 +18,10 @@ const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
 const balance = ref<number | null>(null)
 const balanceCurrency = ref<string>('sats')
 const fiatBalances = ref<Record<string, number>>({})
+const totalExpensesSats = ref<number>(0)
+const totalExpensesFiat = ref<Record<string, number>>({})
+const totalIncomeSats = ref<number>(0)
+const totalIncomeFiat = ref<Record<string, number>>({})
 const pendingTransactions = ref<Transaction[]>([])
 const isLoading = ref(true)
 
@@ -25,6 +29,18 @@ const fiatBalanceEntries = computed(() =>
   Object.entries(fiatBalances.value).filter(([, amount]) => Math.abs(amount) > 0.005)
 )
 
+const expensesFiatEntries = computed(() =>
+  Object.entries(totalExpensesFiat.value).filter(([, amount]) => Math.abs(amount) > 0.005)
+)
+
+const incomeFiatEntries = computed(() =>
+  Object.entries(totalIncomeFiat.value).filter(([, amount]) => Math.abs(amount) > 0.005)
+)
+
+const hasBreakdown = computed(() =>
+  totalExpensesSats.value > 0 || totalIncomeSats.value > 0
+)
+
 const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
 const budgetsEnabled = computed(() => import.meta.env.VITE_LIBRA_BUDGETS_ENABLED === 'true')
 
@@ -61,6 +77,10 @@ async function loadData() {
     balance.value = balanceData.balance
     balanceCurrency.value = balanceData.currency || 'sats'
     fiatBalances.value = balanceData.fiat_balances || {}
+    totalExpensesSats.value = balanceData.total_expenses_sats || 0
+    totalExpensesFiat.value = balanceData.total_expenses_fiat || {}
+    totalIncomeSats.value = balanceData.total_income_sats || 0
+    totalIncomeFiat.value = balanceData.total_income_fiat || {}
 
     // Filter for pending transactions (flag = '!')
     pendingTransactions.value = txData.entries.filter(tx => tx.flag === '!')
@@ -137,6 +157,51 @@ function formatFiat(amount: number, currency: string): string {
         </div>
       </div>
 
+      <!-- Lifetime Breakdown -->
+      <div v-if="hasBreakdown" class="grid grid-cols-2 gap-3 mb-6">
+        <!-- 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" />
+            <h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Income</h3>
+          </div>
+          <p class="text-lg font-semibold text-foreground">
+            {{ formatAmount(totalIncomeSats) }}
+            <span class="text-sm font-normal text-muted-foreground">sats</span>
+          </p>
+          <div v-if="incomeFiatEntries.length > 0" class="mt-1 space-y-0.5">
+            <p
+              v-for="[currency, amount] in incomeFiatEntries"
+              :key="currency"
+              class="text-xs text-muted-foreground"
+            >
+              {{ formatFiat(amount, currency) }}
+            </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" />
+            <h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Expenses</h3>
+          </div>
+          <p class="text-lg font-semibold text-foreground">
+            {{ formatAmount(totalExpensesSats) }}
+            <span class="text-sm font-normal text-muted-foreground">sats</span>
+          </p>
+          <div v-if="expensesFiatEntries.length > 0" class="mt-1 space-y-0.5">
+            <p
+              v-for="[currency, amount] in expensesFiatEntries"
+              :key="currency"
+              class="text-xs text-muted-foreground"
+            >
+              {{ formatFiat(amount, currency) }}
+            </p>
+          </div>
+        </div>
+      </div>
+
       <!-- Pending Section -->
       <div v-if="pendingCount > 0" class="rounded-xl border bg-card p-5 mb-6">
         <div class="flex items-center gap-2 mb-3">

src/modules/expenses/services/ExpensesAPI.ts

@@ -249,6 +249,10 @@ export class ExpensesAPI extends BaseService {
     balance: number
     currency: string
     fiat_balances?: Record<string, number>
+    total_expenses_sats?: number
+    total_expenses_fiat?: Record<string, number>
+    total_income_sats?: number
+    total_income_fiat?: Record<string, number>
   }> {
     try {
       const response = await fetch(`${this.baseUrl}/libra/api/v1/balance`, {