Skip to content

feat: invoice builder UI with dynamic line items and real-time totals#125

Merged
0xdevcollins merged 1 commit intomainfrom
feat/invoice-builder-ui
Apr 4, 2026
Merged

feat: invoice builder UI with dynamic line items and real-time totals#125
0xdevcollins merged 1 commit intomainfrom
feat/invoice-builder-ui

Conversation

@0xdevcollins
Copy link
Copy Markdown
Owner

Closes #68

Summary

  • InvoiceDrawer — full-screen dialog (max 540px) with scrollable body:
    • Client details (email required, name, invoice number)
    • Dynamic line items table — add/remove rows, description, qty, unit price, row total
    • Tax rate (%) + discount (fixed amount) with live-updating totals summary
    • Currency selector (17 currencies)
    • Due date picker and notes/memo textarea
    • Save as Draft and Save & Send footer actions
    • Zod validation; draft saving works without due date
  • InvoicesTable — paginated table with:
    • Status badges (Draft, Sent, Viewed, Partial, Paid, Overdue, Cancelled)
    • Partial payment balance display
    • Per-row dropdown: Edit draft, Download PDF, Send to client, Delete
    • Loading skeleton (5 rows)
    • Empty state with CTA
  • invoices/page.tsx — fully wired page with:
    • Status filter tabs + search bar
    • All CRUD flows via TanStack Query mutations (create, update, delete, send, PDF)
    • Pagination controls
  • useInvoices hook — typed queries and mutations for all invoice API endpoints

Test plan

  • Create invoice → drawer opens, fill client + line items → Save as Draft → appears in table as DRAFT
  • Edit draft → change a line item → totals update in real-time → Save as Draft
  • Save & Send → invoice created/updated then sent → status transitions to SENT
  • Send existing draft via row action → status transitions to SENT
  • Download PDF → opens Cloudinary URL in new tab
  • Delete draft → confirm dialog → removed from list
  • Status filter tabs filter correctly
  • Search by customer email or invoice number
  • Responsive at 375px mobile breakpoint

🤖 Generated with Claude Code

Closes #68

- InvoiceDrawer: full form with client details, dynamic line items
  (add/remove rows), tax rate, discount, currency selector, due date
  picker, notes/memo field, and a live-updating totals summary
- InvoicesTable: paginated table with status badges, skeleton loading,
  empty state, per-row actions (edit, send, download PDF, delete)
- invoices/page.tsx: status filter tabs, search, pagination, all CRUD
  flows wired to the API via TanStack Query mutations
- useInvoices hook: typed queries and mutations for all invoice endpoints
- Zod validation on the form; draft saving does not require due date
- Responsive at 375px; drawer max 540px with internal scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@0xdevcollins 0xdevcollins merged commit 173d601 into main Apr 4, 2026
2 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dashboard: Invoice Builder UI — Line Items, Tax & Discounts

1 participant