Wireframes — Core (W1–W6)

Visuals: wireframes-core.html · Slide deck

Low-fidelity layout wireframes: structure, hierarchy, and component placement — not visual design. Surface ownership: W1, W2, W6–W11, W14–W16 are Phoenix LiveView; W3, W4, and W13 (map canvas) are React islands; W5 and W12 are React Native / mobile web.

W1 — Sales pipeline (Kanban boards)

The daily home screen. Global nav, board switcher, filters, and drag-and-drop stage columns with per-stage totals. Live-updates via Phoenix Channels when teammates move cards.

Visual: wireframes-core.html

W2 — Job detail (job folder)

Where a rep lives once a lead is real. Left column is the activity/documents workspace; the right rail carries the personality insight card with its selling playbook and the website activity feed. Homeowner quote questions (see W12) also land in this activity feed.

Visual: wireframes-core.html

W3 — Quote builder (React island)

Three-pane layout: page structure left, live preview center, pricing and options right with good/better/best tabs and the admin-governed margin slider.

Visual: wireframes-core.html

W4 — Automation canvas (React island: React Flow over Oban)

Node palette left, flow graph center with branching, run-history rail right surfacing the BEAM-side execution state.

Visual: wireframes-core.html

W5 — Mobile field app (React Native)

Crew and rep view: today's schedule, always-visible offline sync status, thumb-first photo capture.

Visual: wireframes-core.html

W6 — Reporting dashboard

The owner's view: metric cards, pipeline funnel, and lead-source attribution fed by TimescaleDB continuous aggregates.

Visual: wireframes-core.html