# Ara Projects — UX wireframes

Static HTML wireframe export for the Ara Projects feature (schema merged in PR #404). Produced by our UX designer with Google Stitch (project `8537473387290162501`) and refined with Claude. Open [`index.html`](./index.html) in a browser for the journey directory; everything is offline-viewable (fonts and the Tailwind runtime are vendored under `assets/`).

The GitHub issues on the [Ara Projects board](https://github.com/orgs/Hestia-Homes/projects/6) reference these screens by path.

## How to read them

- **Structure is the spec; styling and copy are not.** V1 is built with the app's existing shadcn/Tailwind design system — the Material-3 theme here is disposable. All figures are sample data (every screen carries a "Sample data" badge).
- Known placeholder artefacts — do not treat as requirements:
  - Journey 2 mixes plumbing-job copy ("fix leaking pipe", "John Davies, Plumber") into a Windows work order; the *flow* is the spec.
  - Screen `1-admin-import/04` shows default stages "New / Active / Active / Active / Complete" — the real default ladder is Ordered / In progress / Completed / Charged / Closed.
  - Contractor names vary (Apex Construction vs "Contractor A") and some screens keep a generic legacy top nav.
- Some screens show features deliberately deferred from v1 (import diffing/review summary, booking and no-access flow, "Awaiting auth"/"No access" tiles, activity log, SharePoint sync toggle, "Add Custom Measure"). The corresponding "Ara Projects design:" issues own those.

## Journeys

1. `1-admin-import/` — admin: project setup wizard (6 steps) + work-order import + programme dashboard.
2. `2-contractor-journey/` — contractor: one work order through stage progression, evidence upload, completion.
3. `3-contractor-toggle/` — admin: full work-orders table + "view as contractor" scoped views.