Coder/aurum
1
0
Fork 0
mirror of https://github.com/Zproger/Aurum.git synced 2026-10-13 19:16:40 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: add search to Transactions tab, spanning all history

Browse Source 
Lets the user find a past purchase by keyword instead of paging through
months manually — search hits description/merchant/notes and ignores the
month filter, with a "jump to month" action on each result to view it in
its normal monthly context.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ZProger
2026-08-20 23:00:44 +03:00
parent b9ff3ab404
commit 2b2e01a8e2
8 changed files with 182 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/transactions/TransactionsTable.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from "react";
import { ArrowLeftRight, Pencil, StickyNote, Trash2 } from "lucide-react";
import { ArrowLeftRight, CalendarSearch, Pencil, StickyNote, Trash2 } from "lucide-react";
import { Dialog } from "@/components/ui/Dialog";
import { getCategoryIcon } from "@/lib/icons";
import { formatCurrency, formatTransactionDate } from "@/lib/format";
@@ -11,14 +11,22 @@ interface TransactionsTableProps {
items: Transaction[];
onEdit: (transaction: Transaction) => void;
onDelete: (transaction: Transaction) => void;
/** Present only while showing search results, which span every month —
* lets a row's date carry the year and offers a way to jump back to
* browsing that transaction's month instead of just listing it flat. */
onJumpToMonth?: (transaction: Transaction) => void;
}
export function TransactionsTable({ items, onEdit, onDelete }: TransactionsTableProps) {
export function TransactionsTable({ items, onEdit, onDelete, onJumpToMonth }: TransactionsTableProps) {
const { t } = useTranslation();
const [noteTransaction, setNoteTransaction] = useState<Transaction | null>(null);
if (items.length === 0) {
return <p className="py-12 text-center text-sm text-text-muted">{t("transactions.noneFound")}</p>;
return (
<p className="py-12 text-center text-sm text-text-muted">
{onJumpToMonth ? t("transactions.searchNoneFound") : t("transactions.noneFound")}
</p>
);
}
return (
@@ -42,7 +50,7 @@ export function TransactionsTable({ items, onEdit, onDelete }: TransactionsTable
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-medium text-text-primary">{tx.description}</span>
<span className="block truncate text-xs text-text-muted">
{formatTransactionDate(tx.date)} · {tx.account.name}
{formatTransactionDate(tx.date, Boolean(onJumpToMonth))} · {tx.account.name}
{isTransfer && tx.transfer_account_id ? ` ${t("transactions.transferSuffix")}` : ""}
{tx.category ? ` · ${translateCategoryName(tx.category.name)}` : ""}
</span>
@@ -58,6 +66,16 @@ export function TransactionsTable({ items, onEdit, onDelete }: TransactionsTable
</span>
<span className="flex shrink-0 gap-1">
{onJumpToMonth && (
<button
type="button"
aria-label={t("transactions.jumpToMonth")}
onClick={() => onJumpToMonth(tx)}
className="rounded-md p-1.5 text-text-muted hover:bg-surface-2 hover:text-text-primary"
>
<CalendarSearch size={15} />
</button>
)}
{tx.notes && (
<button
type="button"