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

added functionality for multi-edit of transactions

Browse Source
This commit is contained in:
jerick
2026-04-20 23:17:56 -04:00
parent 60fc836b73
commit f4216815e8
2 changed files with 272 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/api/transactions/bulk/route.ts Normal file
View File

@@ -0,0 +1,68 @@
import { NextResponse } from 'next/server'
import { z } from 'zod'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
const bulkSchema = z.discriminatedUnion('action', [
z.object({
action: z.literal('delete'),
ids: z.array(z.string()).min(1),
}),
z.object({
action: z.literal('assignBudget'),
ids: z.array(z.string()).min(1),
budgetId: z.string().nullable(),
}),
z.object({
action: z.literal('addNotes'),
ids: z.array(z.string()).min(1),
notes: z.string().max(500),
}),
])
export async function POST(req: Request) {
const session = await auth()
if (!session?.user?.id) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
const body = await req.json()
const result = bulkSchema.safeParse(body)
if (!result.success) return NextResponse.json({ error: result.error.flatten() }, { status: 400 })
const { action, ids } = result.data
const userId = session.user.id
// Verify all transaction IDs belong to this user
const owned = await prisma.transaction.findMany({
where: { id: { in: ids }, account: { userId } },
select: { id: true },
})
if (owned.length !== ids.length) {
return NextResponse.json({ error: 'One or more transactions not found' }, { status: 404 })
}
if (action === 'delete') {
await prisma.transaction.deleteMany({ where: { id: { in: ids } } })
return NextResponse.json({ deleted: ids.length })
}
if (action === 'assignBudget') {
const { budgetId } = result.data
if (budgetId !== null) {
const budget = await prisma.budget.findFirst({ where: { id: budgetId, userId } })
if (!budget) return NextResponse.json({ error: 'Budget not found' }, { status: 404 })
}
await prisma.transaction.updateMany({
where: { id: { in: ids } },
data: { budgetId },
})
return NextResponse.json({ updated: ids.length })
}
// addNotes
const { notes } = result.data
await prisma.transaction.updateMany({
where: { id: { in: ids } },
data: { notes: notes || null },
})
return NextResponse.json({ updated: ids.length })
}

208
src/components/transactions/TransactionTable.tsx
View File

@@ -2,11 +2,15 @@
import { useState } from 'react'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import { usePathname, useSearchParams, useRouter } from 'next/navigation'
import {
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table'
import { Pencil, ChevronLeft, ChevronRight } from 'lucide-react'
import { Pencil, ChevronLeft, ChevronRight, Trash2, Tag, StickyNote, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { formatCents } from '@/lib/utils/currency'
import { EditTransactionDialog } from './EditTransactionDialog'
import { cn } from '@/lib/utils'
@@ -46,16 +50,82 @@ export function TransactionTable({
}: Props) {
const pathname = usePathname()
const searchParams = useSearchParams()
const router = useRouter()
const [editing, setEditing] = useState<TransactionRow | null>(null)
const [selected, setSelected] = useState<Set<string>>(new Set())
const [bulkDialog, setBulkDialog] = useState<'delete' | 'budget' | 'notes' | null>(null)
const [budgetTarget, setBudgetTarget] = useState<string>('__none__')
const [notesValue, setNotesValue] = useState('')
const [working, setWorking] = useState(false)
const totalPages = Math.ceil(total / limit)
const allIds = transactions.map((t) => t.id)
const allSelected = allIds.length > 0 && allIds.every((id) => selected.has(id))
const someSelected = selected.size > 0
function toggleAll() {
if (allSelected) {
setSelected((prev) => {
const next = new Set(prev)
allIds.forEach((id) => next.delete(id))
return next
})
} else {
setSelected((prev) => new Set([...prev, ...allIds]))
}
}
function toggleOne(id: string) {
setSelected((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}
function clearSelection() {
setSelected(new Set())
}
function pageHref(p: number) {
const params = new URLSearchParams(searchParams.toString())
params.set('page', String(p))
return `${pathname}?${params.toString()}`
}
if (transactions.length === 0) {
async function bulkPost(body: object) {
setWorking(true)
const res = await fetch('/api/transactions/bulk', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
setWorking(false)
if (res.ok) {
clearSelection()
setBulkDialog(null)
router.refresh()
}
}
async function handleDelete() {
await bulkPost({ action: 'delete', ids: [...selected] })
}
async function handleAssignBudget() {
await bulkPost({
action: 'assignBudget',
ids: [...selected],
budgetId: budgetTarget === '__none__' ? null : budgetTarget,
})
}
async function handleAddNotes() {
await bulkPost({ action: 'addNotes', ids: [...selected], notes: notesValue })
}
if (transactions.length === 0 && !someSelected) {
return (
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground">
No transactions found.
@@ -63,12 +133,56 @@ export function TransactionTable({
)
}
const colSpan = showAccount ? 8 : 7
return (
<>
{/* Bulk action bar */}
{someSelected && (
<div className="flex items-center gap-3 rounded-md border bg-muted/50 px-4 py-2 mb-2">
<span className="text-sm font-medium">{selected.size} selected</span>
<div className="flex items-center gap-2 ml-auto">
<Button
size="sm"
variant="outline"
onClick={() => { setNotesValue(''); setBulkDialog('notes') }}
>
<StickyNote className="h-3.5 w-3.5 mr-1.5" />Notes
</Button>
<Button
size="sm"
variant="outline"
onClick={() => { setBudgetTarget('__none__'); setBulkDialog('budget') }}
>
<Tag className="h-3.5 w-3.5 mr-1.5" />Budget
</Button>
<Button
size="sm"
variant="destructive"
onClick={() => setBulkDialog('delete')}
>
<Trash2 className="h-3.5 w-3.5 mr-1.5" />Delete
</Button>
<Button size="sm" variant="ghost" onClick={clearSelection}>
<X className="h-3.5 w-3.5" />
</Button>
</div>
</div>
)}
<div className="rounded-md border overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-8 px-3">
<input
type="checkbox"
className="h-4 w-4 rounded border"
checked={allSelected}
onChange={toggleAll}
aria-label="Select all"
/>
</TableHead>
<TableHead className="w-28">Date</TableHead>
<TableHead>Description</TableHead>
{showAccount && <TableHead className="w-36">Account</TableHead>}
@@ -81,11 +195,21 @@ export function TransactionTable({
<TableBody>
{transactions.map((tx) => {
const isCredit = tx.type === 'CREDIT'
const isSelected = selected.has(tx.id)
const dateStr = new Date(tx.date).toLocaleDateString('en-US', {
month: 'short', day: 'numeric', year: 'numeric',
})
return (
<TableRow key={tx.id}>
<TableRow key={tx.id} className={isSelected ? 'bg-muted/40' : undefined}>
<TableCell className="px-3">
<input
type="checkbox"
className="h-4 w-4 rounded border"
checked={isSelected}
onChange={() => toggleOne(tx.id)}
aria-label="Select transaction"
/>
</TableCell>
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
{dateStr}
</TableCell>
@@ -180,6 +304,82 @@ export function TransactionTable({
onOpenChange={(open) => { if (!open) setEditing(null) }}
budgets={budgets}
/>
{/* Delete confirm dialog */}
<Dialog open={bulkDialog === 'delete'} onOpenChange={(o) => { if (!o) setBulkDialog(null) }}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>Delete {selected.size} transaction{selected.size !== 1 ? 's' : ''}?</DialogTitle>
</DialogHeader>
<p className="text-sm text-muted-foreground">This cannot be undone.</p>
<DialogFooter>
<Button variant="outline" onClick={() => setBulkDialog(null)}>Cancel</Button>
<Button variant="destructive" onClick={handleDelete} disabled={working}>
{working ? 'Deleting…' : 'Delete'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Assign budget dialog */}
<Dialog open={bulkDialog === 'budget'} onOpenChange={(o) => { if (!o) setBulkDialog(null) }}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>Assign budget</DialogTitle>
</DialogHeader>
<p className="text-sm text-muted-foreground">
Apply to {selected.size} selected transaction{selected.size !== 1 ? 's' : ''}.
</p>
<Select value={budgetTarget} onValueChange={setBudgetTarget}>
<SelectTrigger>
<SelectValue>
{budgetTarget === '__none__'
? 'No budget'
: (budgets.find((b) => b.id === budgetTarget)?.name ?? 'No budget')}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">No budget</SelectItem>
{budgets.map((b) => (
<SelectItem key={b.id} value={b.id}>
{b.name}
</SelectItem>
))}
</SelectContent>
</Select>
<DialogFooter>
<Button variant="outline" onClick={() => setBulkDialog(null)}>Cancel</Button>
<Button onClick={handleAssignBudget} disabled={working}>
{working ? 'Saving…' : 'Apply'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Add notes dialog */}
<Dialog open={bulkDialog === 'notes'} onOpenChange={(o) => { if (!o) setBulkDialog(null) }}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>Set notes</DialogTitle>
</DialogHeader>
<p className="text-sm text-muted-foreground">
Apply to {selected.size} selected transaction{selected.size !== 1 ? 's' : ''}. Leave blank to clear.
</p>
<Textarea
placeholder="Add a note…"
value={notesValue}
onChange={(e) => setNotesValue(e.target.value)}
maxLength={500}
rows={3}
/>
<DialogFooter>
<Button variant="outline" onClick={() => setBulkDialog(null)}>Cancel</Button>
<Button onClick={handleAddNotes} disabled={working}>
{working ? 'Saving…' : 'Apply'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}