Line item editor

Free-form invoice rows with a bold title, a long description, quantity, unit and unit price — each tagged by where it came from.

What it is

Every row carries a kind: project_estimate, change_order, manual or adjustment. Title is the bold label ('Materials'), description is the detail, and units are normalised for display so 'Each'/'ea' and 'Hour'/'hr' read consistently while custom units (sqft, ton, ft) pass through exactly as typed. Descriptions open a full-width modal because a table cell is too small to write in.

Also called: invoice lines · qty times rate · itemised invoice · adjustments and credits

See it
Line item editor
Prepared for
Sutter Kline
1140 Ridge Line Rd · Fair Play
Shell package$36,530
Concrete & site$10,606
Doors & windows$7,070
Trim & finish$4,714
Total
$58,920
Signature
The line-item table mid-edit with a Manual row, a Project Estimate row and a Change Order row, plus the description modal open. src/components/invoices/InvoiceEditor.tsx. Sample data — no customer information appears here.
How it works
  1. 1Add Line appends a blank manual row; one-click inserts from the estimate or change-order sidecars append typed rows.
  2. 2Line totals are quantity times unit_price, rounded to cents by lineTotal().
  3. 3An adjustment row can carry a negative unit price to subtract.
  4. 4Saving replaces the whole line-item set and recomputes the invoice totals in one pass.
Why we built it

Rows added with one click off an estimate carry a title and no description, and the original validation demanded a description — so those rows were silently dropped and Save and Close looked like it had glitched. A line is now valid with either a title or a description, units are normalised so a row reads the same however it was typed, and tapping a description opens a full-width editor rather than asking a builder to write scope notes inside a table cell.

The problem
  • One-click inserted rows failing validation with no explanation.
  • Unreadable inconsistent unit labels across rows.
  • No way to show a deduction or credit on a bill.
Sound familiar?
What you get
Rows can be inserted in one click and then edited by hand.
Every row remembers whether it came from the estimate, a change order, or was typed.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →