Invoice Generator & Tracking

Create professional invoices, save them locally, and track payment status with aging reports.

Overview

This single-page app helps freelancers and small businesses generate invoices quickly. Fill in customer details, edit line items in AG-Grid, and watch subtotal, tax, and total update automatically. Save invoices to the browser, switch to a list view for tracking, export to Excel, and download PDFs with jsPDF.

Key features

Customer & invoice form

• Customer name, email, billing address
• Invoice number, invoice date, due date, and tax rate
• Status: Draft, Sent, or Paid
• Template selector: Classic, Modern, or Minimal (affects preview styling and PDF layout)

Line items grid

• AG-Grid with Description, Qty, Rate, and auto-calculated Amount
• Editable cells with single-click edit; add rows with + Add row
• Three sample line items on new invoices

Totals

• Live subtotal, tax (configurable rate), and grand total
• Mini invoice preview panel reflects template choice

Save & PDF

• Save Invoice stores the full invoice in `localStorage`
• Download PDF generates a formatted invoice via jsPDF (template-aware header colors)
• New invoice clears the form with a fresh invoice number

Invoices list tab

• Separate tab showing all saved invoices in AG-Grid
• Columns: Invoice #, Customer, Date, Due, Total, Status (color-coded), Actions
• Edit loads an invoice back into the create form; Delete removes with confirmation

Aging summary

• Four buckets for unpaid invoices: Current (0–30), 31–60, 61–90, 90+ days
• Bar indicators, total outstanding, paid total, and invoice count

Export

• Export list to Excel downloads all saved invoices via SheetJS

Theme

• Dark mode toggle with saved preference and AG-Grid dark styling

Data & persistence

• Storage key: `invoiceGenerator_v1` for saved invoices; `invoiceGenerator_dark` for theme
• Each saved invoice includes line items, totals, template, status, and timestamp

Built with

Tailwind CSS, AG-Grid Community, Alpine.js, jsPDF, and SheetJS — all from CDN in one HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.