fix: show expenses as absolute value and add balance card to transaction summary

Expenses were displayed as negative values, making it hard to reconcile
with individual transactions. Now shown as absolute value since the label
and color already convey the sign. Added a Balance card showing the net total.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/transactions/TransactionSummaryBar.tsx

@@ -1,14 +1,16 @@
 import { useTranslation } from "react-i18next";
-import { Hash, TrendingUp, TrendingDown } from "lucide-react";
+import { Hash, TrendingUp, TrendingDown, Scale } from "lucide-react";
 
 interface TransactionSummaryBarProps {
   totalCount: number;
+  totalAmount: number;
   incomeTotal: number;
   expenseTotal: number;
 }
 
 export default function TransactionSummaryBar({
   totalCount,
+  totalAmount,
   incomeTotal,
   expenseTotal,
 }: TransactionSummaryBarProps) {
@@ -33,12 +35,21 @@ export default function TransactionSummaryBar({
     {
       icon: TrendingDown,
       label: t("transactions.summary.expenses"),
-      value: expenseTotal.toLocaleString(undefined, {
+      value: Math.abs(expenseTotal).toLocaleString(undefined, {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
       }),
       color: "text-[var(--negative)]",
     },
+    {
+      icon: Scale,
+      label: t("transactions.summary.balance"),
+      value: totalAmount.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }),
+      color: totalAmount >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]",
+    },
   ];
 
   return (

src/i18n/locales/en.json

@@ -142,7 +142,8 @@
     "summary": {
       "count": "Transactions",
       "income": "Income",
-      "expenses": "Expenses"
+      "expenses": "Expenses",
+      "balance": "Balance"
     },
     "table": {
       "noCategory": "— No category —"

src/i18n/locales/fr.json

@@ -142,7 +142,8 @@
     "summary": {
       "count": "Transactions",
       "income": "Revenus",
-      "expenses": "Dépenses"
+      "expenses": "Dépenses",
+      "balance": "Solde"
     },
     "table": {
       "noCategory": "— Sans catégorie —"

src/pages/TransactionsPage.tsx

@@ -23,6 +23,7 @@ export default function TransactionsPage() {
 
       <TransactionSummaryBar
         totalCount={state.totalCount}
+        totalAmount={state.totalAmount}
         incomeTotal={state.incomeTotal}
         expenseTotal={state.expenseTotal}
       />