From 2e7beea673e9cfd28febc0e1d7bc962d1efd9607 Mon Sep 17 00:00:00 2001
From: Le-King-Fu <Le-King-Fu@users.noreply.github.com>
Date: Sun, 8 Feb 2026 23:30:44 +0000
Subject: [PATCH] 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>
---
 .../transactions/TransactionSummaryBar.tsx        | 15 +++++++++++++--
 src/i18n/locales/en.json                          |  3 ++-
 src/i18n/locales/fr.json                          |  3 ++-
 src/pages/TransactionsPage.tsx                    |  1 +
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/transactions/TransactionSummaryBar.tsx b/src/components/transactions/TransactionSummaryBar.tsx
index 142b3f9..cf20dec 100644
--- a/src/components/transactions/TransactionSummaryBar.tsx
+++ b/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 (
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6a32fe3..b0dfcb5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -142,7 +142,8 @@
     "summary": {
       "count": "Transactions",
       "income": "Income",
-      "expenses": "Expenses"
+      "expenses": "Expenses",
+      "balance": "Balance"
     },
     "table": {
       "noCategory": "— No category —"
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 45ed842..630cf81 100644
--- a/src/i18n/locales/fr.json
+++ b/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 —"
diff --git a/src/pages/TransactionsPage.tsx b/src/pages/TransactionsPage.tsx
index 9a0150f..b63fab4 100644
--- a/src/pages/TransactionsPage.tsx
+++ b/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}
       />