Unsaved-changes guard

Closing an invoice with unsaved edits prompts before discarding them.

What it is

The editor snapshots every editable field once the invoice has finished loading, then compares on every close path — the X, the backdrop click, escape — and prompts to save or discard if anything changed.

Also called: lost my invoice edits · closed without saving · did it save

See it
Unsaved-changes guard
Prepared for
Delia Yoder
1140 Ridge Line Rd · Fair Play
Shell package$26,331
Concrete & site$7,645
Doors & windows$5,096
Trim & finish$3,398
Total
$42,470
Signature
The unsaved-changes prompt over the dimmed editor with Save / Discard options. src/components/invoices/InvoiceEditor.tsx. Sample data — no customer information appears here.
How it works
  1. 1serializeForm() stringifies title, dates, terms, tax, notes, payment instructions, Bill To, lines and section toggles.
  2. 2The baseline is captured once, after async line items have loaded, so hydration is not mistaken for an edit.
  3. 3All close paths route through one handler that checks dirtiness first.
Why we built it

The invoice editor opens over the page and closes when the backdrop is tapped, which on a form that takes several minutes to fill in is one clumsy thumb away from losing the lot. Closing with unsaved changes now asks first. The comparison is taken once the invoice has finished loading, so an untouched invoice does not claim to be edited the moment it opens.

The problem
  • Losing invoice edits to a stray backdrop click.
Sound familiar?
What you get
Work is never silently discarded.
No false prompt when nothing actually changed.

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 →