Settlement Form

An interactive HUD-1 settlement statement built with Lytenyte Grid, React, and TypeScript. It calculates the cash-at-settlement amount owed by (or returned to) a borrower at closing, based on line-item values entered directly into the grid.

Overview

The form mirrors a standard HUD-1 settlement statement and is divided into three sections:

Section	Lines	Description
Gross Amount Due from Borrower	101–112	Contract price, charges, payoffs, and seller-paid adjustments
Amounts Paid by/for Borrower	201–219	Deposit, loan proceeds, and seller-unpaid adjustments
Cash at Settlement	301–303	Net result — whether cash flows to or from the borrower

Section totals (lines 120, 220, 303) are computed automatically from the entered values using a built-in expression evaluator. Editing any input row recalculates everything instantly.

Getting Started

Prerequisites

• Node.js 18+
• pnpm (the project uses a pnpm-lock.yaml)

Install and Run

pnpm install
pnpm dev

Open http://localhost:5173 in your browser.

Other Commands

pnpm build      # type-check + production build → dist/
pnpm preview    # serve the production build locally
pnpm lint       # run ESLint

Project Structure

src/
├── main.tsx       # React entry point
├── App.tsx        # Root component — state, expression evaluator, grid layout
├── columns.tsx    # Lytenyte column definitions (label + value columns)
├── data.ts        # Initial row data for all form lines
└── types.ts       # TypeScript types for each row variant
main.css           # Tailwind + Lytenyte theme imports

Understanding the Expression System

Rows of type expression and final hold a string formula instead of a raw value. At render time App.tsx runs each formula through the Lytenyte Evaluator with three custom helpers:

Helper	Signature	Description
sum	sum(start, end)	Sums all value/expression rows between two row indices
value	value(rowId)	Returns the resolved number of any named row
from	from(rowId)	Converts a string row ID to its zero-based index

Example formula for line 120 (gross total):

sum(from("101"), rowIndex)

This sums every row from line 101 up to — but not including — the current row.

Tech Stack

• Lytenyte Pro — high-performance React grid
• React 19 with the React Compiler (Babel preset)
• TypeScript 6
• Tailwind CSS 4
• Vite 8