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>
This commit is contained in:
le king fu
parent
15d626cbbb
commit
3e0f826256
4 changed files with 118 additions and 31 deletions
|
|
@ -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>
|
||||
<tr className="border-b border-[var(--border)]">
|
||||
<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]">
|
||||
<thead className="sticky top-0 z-20">
|
||||
<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-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]">
|
||||
|
|
|
|||
|
|
@ -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,6 +117,14 @@ export default function TransactionDetailModal({
|
|||
({rows.length} {t("charts.transactions")})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setShowAmounts((v) => !v)}
|
||||
className="p-1 rounded-lg hover:bg-[var(--muted)] transition-colors text-[var(--muted-foreground)]"
|
||||
title={showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
|
||||
>
|
||||
{showAmounts ? <Eye size={18} /> : <EyeOff size={18} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-lg hover:bg-[var(--muted)] transition-colors"
|
||||
|
|
@ -84,6 +132,7 @@ export default function TransactionDetailModal({
|
|||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
|
|
@ -107,24 +156,53 @@ 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 className="text-left px-6 py-2 font-medium">{t("transactions.description")}</th>
|
||||
<th className="text-right px-6 py-2 font-medium">{t("transactions.amount")}</th>
|
||||
<th
|
||||
className={`text-left ${thClass}`}
|
||||
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>
|
||||
{showAmounts && (
|
||||
<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>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
{showAmounts && (
|
||||
<tfoot>
|
||||
<tr className="font-semibold">
|
||||
<td className="px-6 py-3" colSpan={2}>{t("charts.total")}</td>
|
||||
|
|
@ -135,6 +213,7 @@ export default function TransactionDetailModal({
|
|||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
)}
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue