{{ name }} — Wireframes Index

Low-fidelity layout sketches for every page identified in the planning conversation. Each wireframe communicates structure, information hierarchy, and key behaviors — not visual design. The production app will replace these with a real design system (Tailwind + shadcn/ui) once the layouts are validated.

Wireframes: Index Sign in Dashboard New Estimate Estimate · Overview Estimate · Refine Estimate · Doc Preview Estimate · History HCP Match Modal Settings Training Data Original Reference

1 · Sign in

Clerk-powered auth landing. OAuth providers + email/password. Routes user to their default org.

Auth · Public

2 · Dashboard

Home screen. Recent estimates, filters, MTD stats, quick action to create a new estimate.

/ · App home

3 · New Estimate

Intake form (mobile-first). Replaces the n8n form trigger. Submits to webhook, redirects to detail view.

/estimates/new

4 · Estimate · Overview

Estimate detail with line items, totals, internal-only health card, matched historical lines, and inline edits.

/estimates/:id

5 · Estimate · Refine

AI chat with live-updating estimate above and Financial Metrics & Grading Table anchored bottom-right.

/estimates/:id/refine

6 · Estimate · Doc Preview

Full-screen doc view. Customer-facing layout — designed to be shown on the tech's phone in front of the homeowner.

/estimates/:id/doc

7 · Estimate · History

Refinement timeline. Every approved change with diff, who approved, and whether it was promoted to training data.

/estimates/:id/history

8 · HCP Customer Match Modal

Confirmation modal that pops on Complete. Searches HCP for the customer and lets the user confirm or create new.

Modal · Phase 1.5

9 · Settings

Org-level pricing config (per-tenant: labor rate, markup, deposit %, tax), integrations (HCP OAuth), members, branding.

/settings

10 · Training Data

Stats on the labor-line training pool. Categories breakdown, sparse tasks, recently promoted refinements.

/settings/training

📌 Reference · Original Refine Layout

The preferred layout reference — title bar, three-column header, anchored Financial Metrics panel, chat with window controls. Source of truth for the visual style.

Self-contained · inline CSS

Conventions across all wireframes