Redesign new-offer page as two-column workspace + live preview

Refactorkamo-internal
Shipped
May 30, 2026 at 1:21 AM UTC
Author
kamo
Commit
89ddb85

You asked for full real estate, modern, polished — last refactor put a single-column form inside a full-width shell, which is exactly the wide half-page-of-empty-canvas critique you'd already given. This rewrite uses the space. Layout on lg+ screens: - Full-width product picker at the top (the linchpin selection; gets its own card so the rest can react to it). - Two-column grid below: form sections on the left (Borrower, Loan amount, Custom terms), sticky "Offer preview" pane on the right. - Header gets a pinned Save Draft + Send to Borrower button group so the primary action is always reachable without scrolling. The mobile/narrow view keeps a sticky-bottom action bar. Right-side preview pane computes everything the borrower will see — monthly payment, total of payments, total interest, net disbursement, disclosed APR — in real time as inputs and overrides change. Override columns light up amber so it's obvious which numbers came from custom terms vs. the product. The math mirrors KamoLOS createDraft (level-amortized monthly payment, APR approximation on cash flows); backend reconciles precisely on save. LOC products get a kind-appropriate preview (Credit limit, Net available on first draw, Annual fee) instead of payment/term math. Each form section gets an iconified label ("Choose a Loan Product", "Borrower", "Loan amount & term") so the page reads as a workspace, not a single top-to-bottom form. Product min/max principal and term ranges are now surfaced as field helpers so the operator doesn't guess.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing