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

[0xdevcollins]

Summary

Build the invoice creation/editing UI in the merchant dashboard with a full invoice builder form.

Requirements

• Invoice builder form with:
  • Client details (name, email)
  • Dynamic line items table (description, quantity, unit price) with add/remove rows
  • Tax rate field with auto-calculated tax amount
  • Discount field (fixed amount or percentage)
  • Auto-calculated subtotal and total
  • Currency selector
  • Due date picker
  • Notes/memo field
• Form validation with Zod
• Save as Draft functionality
• Real data — no Lorem Ipsum
• Loading skeleton while form data loads
• Empty state for first-time invoice creation

Design Specs (from Design Brief)

• Modal/drawer max 520px for quick creation
• 24px internal padding, 16px between elements
• Inter for headings, Open Sans for body
• 8px spacing grid

Acceptance Criteria

• Line items dynamically add/remove with running totals
• Tax and discount calculate correctly in real-time
• Form validates all required fields before submission
• Draft saving works without requiring all fields
• Responsive at 375px mobile breakpoint