Add sort and amount toggle to report details, sticky budget headers

- #1: Sortable columns (date, description, amount) in the transaction
  detail modal with click-to-toggle direction
- #2: Budget table headers stay fixed when scrolling vertically
- #3: Eye/EyeOff toggle to show/hide the amounts column in the
  transaction detail modal

Closes #1, closes #2, closes #3

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

src/components/budget/BudgetTable.tsx

@@ -337,11 +337,11 @@ export default function BudgetTable({ rows, onUpdatePlanned, onSplitEvenly }: Bu
           {subtotalsOnTop ? t("reports.subtotalsOnTop") : t("reports.subtotalsOnBottom")}
         </button>
       </div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
       <table className="w-full text-sm whitespace-nowrap">
-        <thead>
+        <thead className="sticky top-0 z-20">
-          <tr className="border-b border-[var(--border)]">
+          <tr className="border-b border-[var(--border)] bg-[var(--card)]">
-            <th className="text-left py-2.5 px-3 font-medium text-[var(--muted-foreground)] sticky left-0 bg-[var(--card)] z-10 min-w-[140px]">
+            <th className="text-left py-2.5 px-3 font-medium text-[var(--muted-foreground)] sticky left-0 bg-[var(--card)] z-30 min-w-[140px]">
               {t("budget.category")}
             </th>
             <th className="text-right py-2.5 px-2 font-medium text-[var(--muted-foreground)] min-w-[90px]">

src/components/shared/TransactionDetailModal.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { X, Loader2 } from "lucide-react";
+import { X, Loader2, ArrowUp, ArrowDown, Eye, EyeOff } from "lucide-react";
 import { getTransactionsByCategory } from "../../services/dashboardService";
 import type { TransactionRow } from "../../shared/types";
 
@@ -10,6 +10,9 @@ const cadFormatter = new Intl.NumberFormat("en-CA", {
   currency: "CAD",
 });
 
+type SortColumn = "date" | "description" | "amount";
+type SortDirection = "asc" | "desc";
+
 interface TransactionDetailModalProps {
   categoryId: number | null;
   categoryName: string;
@@ -31,6 +34,9 @@ export default function TransactionDetailModal({
   const [rows, setRows] = useState<TransactionRow[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [sortColumn, setSortColumn] = useState<SortColumn>("date");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+  const [showAmounts, setShowAmounts] = useState(true);
 
   const fetchData = useCallback(async () => {
     setIsLoading(true);
@@ -57,8 +63,42 @@ export default function TransactionDetailModal({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [onClose]);
 
+  const handleSort = (column: SortColumn) => {
+    if (sortColumn === column) {
+      setSortDirection((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortColumn(column);
+      setSortDirection(column === "description" ? "asc" : "desc");
+    }
+  };
+
+  const sortedRows = useMemo(() => {
+    const sorted = [...rows];
+    const dir = sortDirection === "asc" ? 1 : -1;
+    sorted.sort((a, b) => {
+      switch (sortColumn) {
+        case "date":
+          return (a.date < b.date ? -1 : a.date > b.date ? 1 : 0) * dir;
+        case "description":
+          return a.description.localeCompare(b.description) * dir;
+        case "amount":
+          return (a.amount - b.amount) * dir;
+        default:
+          return 0;
+      }
+    });
+    return sorted;
+  }, [rows, sortColumn, sortDirection]);
+
   const total = rows.reduce((sum, r) => sum + r.amount, 0);
 
+  const SortIcon = ({ column }: { column: SortColumn }) => {
+    if (sortColumn !== column) return null;
+    return sortDirection === "asc" ? <ArrowUp size={14} /> : <ArrowDown size={14} />;
+  };
+
+  const thClass = "px-6 py-2 font-medium cursor-pointer select-none hover:text-[var(--foreground)] transition-colors";
+
   return createPortal(
     <div
       className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50"
@@ -77,12 +117,21 @@ export default function TransactionDetailModal({
               ({rows.length} {t("charts.transactions")})
             </span>
           </div>
-          <button
+          <div className="flex items-center gap-1">
-            onClick={onClose}
+            <button
-            className="p-1 rounded-lg hover:bg-[var(--muted)] transition-colors"
+              onClick={() => setShowAmounts((v) => !v)}
-          >
+              className="p-1 rounded-lg hover:bg-[var(--muted)] transition-colors text-[var(--muted-foreground)]"
-            <X size={18} />
+              title={showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
-          </button>
+            >
+              {showAmounts ? <Eye size={18} /> : <EyeOff size={18} />}
+            </button>
+            <button
+              onClick={onClose}
+              className="p-1 rounded-lg hover:bg-[var(--muted)] transition-colors"
+            >
+              <X size={18} />
+            </button>
+          </div>
         </div>
 
         {/* Body */}
@@ -107,34 +156,64 @@ export default function TransactionDetailModal({
             <table className="w-full text-sm">
               <thead>
                 <tr className="border-b border-[var(--border)] text-[var(--muted-foreground)]">
-                  <th className="text-left px-6 py-2 font-medium">{t("transactions.date")}</th>
+                  <th
-                  <th className="text-left px-6 py-2 font-medium">{t("transactions.description")}</th>
+                    className={`text-left ${thClass}`}
-                  <th className="text-right px-6 py-2 font-medium">{t("transactions.amount")}</th>
+                    onClick={() => handleSort("date")}
+                  >
+                    <span className="inline-flex items-center gap-1">
+                      {t("transactions.date")}
+                      <SortIcon column="date" />
+                    </span>
+                  </th>
+                  <th
+                    className={`text-left ${thClass}`}
+                    onClick={() => handleSort("description")}
+                  >
+                    <span className="inline-flex items-center gap-1">
+                      {t("transactions.description")}
+                      <SortIcon column="description" />
+                    </span>
+                  </th>
+                  {showAmounts && (
+                    <th
+                      className={`text-right ${thClass}`}
+                      onClick={() => handleSort("amount")}
+                    >
+                      <span className="inline-flex items-center gap-1 justify-end">
+                        {t("transactions.amount")}
+                        <SortIcon column="amount" />
+                      </span>
+                    </th>
+                  )}
                 </tr>
               </thead>
               <tbody>
-                {rows.map((row) => (
+                {sortedRows.map((row) => (
                   <tr key={row.id} className="border-b border-[var(--border)] hover:bg-[var(--muted)]">
                     <td className="px-6 py-2 whitespace-nowrap">{row.date}</td>
                     <td className="px-6 py-2 truncate max-w-[300px]">{row.description}</td>
-                    <td className={`px-6 py-2 text-right whitespace-nowrap font-medium ${
+                    {showAmounts && (
-                      row.amount >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"
+                      <td className={`px-6 py-2 text-right whitespace-nowrap font-medium ${
-                    }`}>
+                        row.amount >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"
-                      {cadFormatter.format(row.amount)}
+                      }`}>
-                    </td>
+                        {cadFormatter.format(row.amount)}
+                      </td>
+                    )}
                   </tr>
                 ))}
               </tbody>
-              <tfoot>
+              {showAmounts && (
-                <tr className="font-semibold">
+                <tfoot>
-                  <td className="px-6 py-3" colSpan={2}>{t("charts.total")}</td>
+                  <tr className="font-semibold">
-                  <td className={`px-6 py-3 text-right ${
+                    <td className="px-6 py-3" colSpan={2}>{t("charts.total")}</td>
-                    total >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"
+                    <td className={`px-6 py-3 text-right ${
-                  }`}>
+                      total >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"
-                    {cadFormatter.format(total)}
+                    }`}>
-                  </td>
+                      {cadFormatter.format(total)}
-                </tr>
+                    </td>
-              </tfoot>
+                  </tr>
+                </tfoot>
+              )}
             </table>
           )}
         </div>

src/i18n/locales/en.json

@@ -349,6 +349,10 @@
     "budgetVsActual": "Budget vs Actual",
     "subtotalsOnTop": "Subtotals on top",
     "subtotalsOnBottom": "Subtotals on bottom",
+    "detail": {
+      "showAmounts": "Show amounts",
+      "hideAmounts": "Hide amounts"
+    },
     "bva": {
       "monthly": "Monthly",
       "ytd": "Year-to-Date",

src/i18n/locales/fr.json

@@ -349,6 +349,10 @@
     "budgetVsActual": "Budget vs R\u00e9el",
     "subtotalsOnTop": "Sous-totaux en haut",
     "subtotalsOnBottom": "Sous-totaux en bas",
+    "detail": {
+      "showAmounts": "Afficher les montants",
+      "hideAmounts": "Masquer les montants"
+    },
     "bva": {
       "monthly": "Mensuel",
       "ytd": "Cumul annuel",