siddharthd/finance-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(transactions): add imported date column, split filter, and sortable columns

Browse Source 
- Show created_at as "Imported" column in transactions and shared views
- For reconciled transactions, show original CSV import date (not statement processing date) via LEFT JOIN on reconciled_with_id
- Add has_split filter (all/split only/unsplit only) to transactions page
- Transactions table: sortable by imported date; split filter dropdown
- Shared table: client-side sort by date, imported, and amount
This commit is contained in:
siddharthd
2026-05-10 16:04:54 +10:00
parent 4a49add277
commit 0c1f88ed9c
6 changed files with 97 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/statements/page.tsx
+14 -8
View File
@@ -134,12 +134,12 @@ export default function StatementsPage() {
) : !filtered.length ? (
<p className="text-zinc-500 text-sm">{hasFilters ? "No statements match filters" : "No statements found"}</p>
) : (
<div className="border border-zinc-700 rounded-xl overflow-hidden">
<table className="w-full text-sm">
<div className="border border-zinc-700 rounded-xl overflow-x-auto">
<table className="w-full text-sm min-w-[800px]">
<thead>
<tr className="border-b border-zinc-800 bg-zinc-900">
<th className="text-left px-3 py-2.5 text-xs text-zinc-600 font-medium w-8">#</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Bank</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium sticky left-0 z-10 bg-zinc-900 border-r border-zinc-800/80">Bank</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Account</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Period</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Due / End</th>
@@ -147,7 +147,7 @@ export default function StatementsPage() {
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Amount</th>
<th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Txns</th>
<th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Owner</th>
<th className="px-4 py-2.5"></th>
<th className="px-4 py-2.5 hidden sm:table-cell"></th>
</tr>
</thead>
<tbody>
@@ -164,13 +164,19 @@ export default function StatementsPage() {
return (
<tr key={s.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/20 transition-colors">
<td className="px-3 py-3 text-xs text-zinc-600 tabular-nums">{idx + 1}</td>
<td className="px-4 py-3">
<div className="font-medium truncate max-w-[180px]" title={s.bank_name}>
<td className="px-4 py-3 sticky left-0 z-10 bg-zinc-950 border-r border-zinc-800/80">
<div className="font-medium truncate max-w-[160px]" title={s.bank_name}>
{s.bank_name}
</div>
{s.card_name && (
<div className="text-xs text-zinc-500 truncate max-w-[180px]">{s.card_name}</div>
<div className="text-xs text-zinc-500 truncate max-w-[160px]">{s.card_name}</div>
)}
<Link
href={`/transactions?statement_id=${s.id}`}
className="sm:hidden text-xs text-indigo-400 hover:text-indigo-300 mt-1 inline-block"
>
View →
</Link>
</td>
<td className="px-4 py-3 text-zinc-400 font-mono text-xs">
{s.account_number}
@@ -211,7 +217,7 @@ export default function StatementsPage() {
<span className="text-zinc-600 text-xs">{s.owner_name}</span>
)}
</td>
<td className="px-4 py-3">
<td className="px-4 py-3 hidden sm:table-cell">
<Link
href={`/transactions?statement_id=${s.id}`}
className="px-3 py-1 bg-zinc-800 hover:bg-zinc-700 rounded text-xs transition-colors whitespace-nowrap"