New Transactions UI: attachments & unified add/edit dialog - #1
Draft
Mischa323 wants to merge 2 commits into
Draft
Conversation
Recreate the FinTrack Transactions design handoff in the real stack: Frontend - Redesigned Transactions table as a glass card with a grid layout, inline filter bar, and a new Receipt column (📎 count). - Rows are clickable and open a unified add/edit dialog (shared Dialog component with overlay/Esc/click-out close). - Dialog supports editing the date of historical transactions, an attachments section (image thumbnails / PDF icon), and a full-size attachment viewer (image + PDF iframe). - Attachments are uploaded to the backend on save; removals and new files are reconciled. Auth-protected files are fetched as blobs. Backend - Add Attachment Prisma model + migration (FK to Transaction, cascade). - New routes: POST /transactions/:id/attachments (multipart upload), GET /attachments/:id (inline stream), DELETE /attachments/:id. - Include attachment metadata in transaction list responses. https://claude.ai/code/session_01HEUSQ8Ntz9nzGMcstCtKeh
Read each attached receipt/invoice (image or PDF) with an AI model and store searchable tags (merchant, category, line items) on the attachment. The Transactions search box now matches these tags, so users can find transactions by what was actually on the receipt. Providers (configurable in Settings → AI, secrets stored like OIDC/Google): - Claude (Anthropic SDK) with a user-selectable model (Haiku / Sonnet / Opus); falls back to ANTHROPIC_API_KEY env var. - Odysseus (self-hosted) via its real API: Bearer token, POST /api/upload → /api/session → /api/chat. Backend - Attachment.tags + Settings AI fields (+ migration 20240111_ai_tagging). - services/aiTagging.js: provider dispatch, vision/PDF input, lenient tag parsing. - Tag on upload (best-effort, never fails the upload) + POST /transactions/:id/attachments/retag to re-analyze existing attachments. - Transaction search matches description OR attachment tags. - config route exposes/accepts AI settings (secrets returned as booleans only). Frontend - Settings 'AI' tab: provider toggle, model picker, keys. - Transaction dialog shows AI tags as chips with a Re-analyze button; receipt column tooltip lists tags. https://claude.ai/code/session_01HEUSQ8Ntz9nzGMcstCtKeh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements the Transaction Attachments & Editing design handoff inside the real FinTrack stack (React + Vite + Tailwind / Express + Prisma + SQLite), extending the existing components rather than introducing a parallel set.
What's new
Transactions screen
GlassCardwith the design's CSS-grid layout, inline filter bar (search / type / account / category), and uppercase muted headers.📎 {count}when a transaction has attachments.nl-NLformatting) per the spec.Add / Edit dialog
Dialogshell (glass-strong panel, blurred overlay, closes on overlay click / Esc / ×).Backend — real persistence
AttachmentPrisma model + migration, FK toTransactionwith cascade delete.POST /transactions/:id/attachments(multipart upload),GET /attachments/:id(inline stream),DELETE /attachments/:id.api/clientand renders object URLs.Validation
vite buildpasses.prisma validatepasses and all migrations (incl. the new one) apply cleanly.Notes
backend/uploads/attachments/(git-ignored), matching the existing import-upload pattern.https://claude.ai/code/session_01HEUSQ8Ntz9nzGMcstCtKeh
Generated by Claude Code