diff --git a/CLAUDE.md b/CLAUDE.md
index 5daf83b..9727525 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,16 +1,16 @@
-# Work Order System — Build TODO
+# Work Order System — Build TODO
 > Hand this file to Claude Code. All frontend files use `.mjs` extensions.
-> Stack: Go · Pure JS + Web Components · SQL Server · Docker
+> Stack: Go · Pure JS + Web Components · SQL Server · Docker
 
 ---
 
 ## Table of Contents
 - [Design System](#design-system)
 - [Project Structure](#project-structure)
-- [Phase 1 — Foundation](#phase-1--foundation)
-- [Phase 2 — Field Features](#phase-2--field-features)
-- [Phase 3 — Integrations & Admin](#phase-3--integrations--admin)
-- [Phase 4 — Polish & Optimization](#phase-4--polish--optimization)
+- [Phase 1 — Foundation](#phase-1--foundation)
+- [Phase 2 — Field Features](#phase-2--field-features)
+- [Phase 3 — Integrations & Admin](#phase-3--integrations--admin)
+- [Phase 4 — Polish & Optimization](#phase-4--polish--optimization)
 - [Component Inventory](#component-inventory)
 - [API Endpoints](#api-endpoints)
 - [Database Schema](#database-schema)
@@ -24,10 +24,10 @@
 ```css
 :root {
   /* Brand */
-  --navy:       #0D2137;   /* Primary dark — sidebar, headers */
-  --teal:       #0A7EA4;   /* Primary accent — buttons, links, active states */
-  --teal-lt:    #14B8D4;   /* Light accent — hover states, highlights */
-  --teal-dk:    #075E7A;   /* Dark accent — pressed states */
+  --navy:       #0D2137;   /* Primary dark — sidebar, headers */
+  --teal:       #0A7EA4;   /* Primary accent — buttons, links, active states */
+  --teal-lt:    #14B8D4;   /* Light accent — hover states, highlights */
+  --teal-dk:    #075E7A;   /* Dark accent — pressed states */
 
   /* Surfaces */
   --bg:         #F0F6FA;   /* Page background */
@@ -82,7 +82,7 @@
 ```
 
 ### Typography
-Load via `<link>` in `index.html` — no build step needed:
+Load via `<link>` in `index.html` — no build step needed:
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -94,13 +94,13 @@ Load via `<link>` in `index.html` — no build step needed:
   --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
 
-  --text-xs:   0.70rem;   /* 11px — labels, caps */
-  --text-sm:   0.813rem;  /* 13px — helper, meta */
-  --text-base: 0.938rem;  /* 15px — body */
-  --text-md:   1.063rem;  /* 17px — subheadings */
-  --text-lg:   1.25rem;   /* 20px — section headers */
-  --text-xl:   1.5rem;    /* 24px — page titles */
-  --text-2xl:  2rem;      /* 32px — dashboard hero numbers */
+  --text-xs:   0.70rem;   /* 11px — labels, caps */
+  --text-sm:   0.813rem;  /* 13px — helper, meta */
+  --text-base: 0.938rem;  /* 15px — body */
+  --text-md:   1.063rem;  /* 17px — subheadings */
+  --text-lg:   1.25rem;   /* 20px — section headers */
+  --text-xl:   1.5rem;    /* 24px — page titles */
+  --text-2xl:  2rem;      /* 32px — dashboard hero numbers */
 
   --weight-normal:   400;
   --weight-medium:   500;
@@ -115,11 +115,11 @@ Load via `<link>` in `index.html` — no build step needed:
 - Inputs: `--border` border, focus ring `--teal` 2px outline-offset, `--radius-sm` corners
 - Tables: header row `--surface-2`, alternating rows, sticky header on scroll
 - Status pills: colored dot + label, pill shape, light background tint of the status color
-- Icon + label pattern everywhere — use Lucide icons loaded via CDN (no npm)
+- Icon + label pattern everywhere — use Lucide icons loaded via CDN (no npm)
 
 ### Icons
 ```html
-<!-- index.html — Lucide icon CDN, no API key, tree-shakeable -->
+<!-- index.html — Lucide icon CDN, no API key, tree-shakeable -->
 <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 ```
 Call `lucide.createIcons()` after each render. Use named icons:
@@ -132,152 +132,152 @@ Call `lucide.createIcons()` after each render. Use named icons:
 
 ```
 workorder/
-├── CLAUDE.md                        ← !! READ FIRST — conventions for Claude Code
-├── cmd/server/main.go
-├── internal/
-│   ├── api/
-│   │   ├── router.go
-│   │   ├── middleware/
-│   │   │   ├── auth.go
-│   │   │   ├── cors.go
-│   │   │   └── logger.go
-│   │   └── handlers/
-│   │       ├── auth.go
-│   │       ├── workorder.go
-│   │       ├── step.go
-│   │       ├── resource.go
-│   │       ├── attachment.go
-│   │       ├── accounting.go
-│   │       ├── user.go
-│   │       ├── registry.go          ← people/vehicle/equipment/material master lists
-│   │       ├── dashboard.go
-│   │       └── report.go
-│   ├── service/
-│   │   ├── workorder.go
-│   │   ├── notification.go
-│   │   ├── spatial.go
-│   │   └── export.go               ← CSV/Excel export
-│   ├── repository/
-│   │   ├── db.go
-│   │   ├── workorder.go
-│   │   ├── step.go
-│   │   ├── resource.go
-│   │   ├── attachment.go
-│   │   ├── accounting.go
-│   │   ├── user.go
-│   │   └── registry.go
-│   ├── model/
-│   │   ├── workorder.go
-│   │   ├── step.go
-│   │   ├── resource.go
-│   │   ├── attachment.go
-│   │   ├── accounting.go
-│   │   ├── user.go
-│   │   └── dashboard.go
-│   └── config/config.go
-│
-├── web/                             ← All frontend — served as static files by Go
-│   ├── index.html                   ← App shell, loads fonts, Lucide, Leaflet
-│   ├── app.mjs                      ← <app-root> custom element + client router
-│   │
-│   ├── components/
-│   │   ├── layout/
-│   │   │   ├── app-sidebar.mjs      ← Left nav — collapsible, mobile drawer
-│   │   │   ├── app-topbar.mjs       ← Top bar — breadcrumb, notifications bell, user avatar
-│   │   │   ├── app-root.mjs         ← Shell that wires sidebar + topbar + <main>
-│   │   │   └── app-mobile-nav.mjs   ← Bottom tab bar for mobile (≤768px)
-│   │   │
-│   │   ├── work-orders/
-│   │   │   ├── wo-list.mjs          ← Searchable, filterable WO list
-│   │   │   ├── wo-kanban.mjs        ← Kanban board view (by status column)
-│   │   │   ├── wo-form.mjs          ← Create / edit full form
-│   │   │   ├── wo-detail.mjs        ← Read-only detail — tabs for each section
-│   │   │   ├── wo-checklist.mjs     ← Step checklist with check-off + progress bar
-│   │   │   ├── wo-resource-panel.mjs← Assign people, vehicles, equipment, materials
-│   │   │   ├── wo-photo-panel.mjs   ← Photo gallery, capture, before/during/after
-│   │   │   ├── wo-map.mjs           ← Leaflet map + directions button
-│   │   │   ├── wo-accounting.mjs    ← GL, cost center, WBS, billing ref fields
-│   │   │   ├── wo-timeline.mjs      ← Audit/activity log feed
-│   │   │   └── wo-print.mjs         ← Print-friendly layout for field packets
-│   │   │
-│   │   ├── dashboard/
-│   │   │   ├── dash-root.mjs        ← Dashboard page shell
-│   │   │   ├── dash-kpi-card.mjs    ← Reusable stat card (number + trend + icon)
-│   │   │   ├── dash-status-chart.mjs← Doughnut chart — WOs by status
-│   │   │   ├── dash-priority-bar.mjs← Bar chart — WOs by priority
-│   │   │   └── dash-recent-feed.mjs ← Recent activity feed
-│   │   │
-│   │   ├── registry/
-│   │   │   ├── people-list.mjs      ← Manage crew / technician records
-│   │   │   ├── people-form.mjs
-│   │   │   ├── vehicle-list.mjs     ← Manage fleet / vehicles
-│   │   │   ├── vehicle-form.mjs
-│   │   │   ├── equipment-list.mjs   ← Manage tools & equipment
-│   │   │   ├── equipment-form.mjs
-│   │   │   ├── material-list.mjs    ← Manage materials / inventory
-│   │   │   └── material-form.mjs
-│   │   │
-│   │   ├── users/
-│   │   │   ├── user-list.mjs        ← User management (admin only)
-│   │   │   ├── user-form.mjs        ← Create / edit user, assign role
-│   │   │   └── user-profile.mjs     ← Current user profile + password change
-│   │   │
-│   │   ├── reports/
-│   │   │   ├── report-root.mjs      ← Reports landing page
-│   │   │   ├── report-by-status.mjs
-│   │   │   ├── report-by-cost.mjs
-│   │   │   └── report-export.mjs    ← CSV / Excel download triggers
-│   │   │
-│   │   └── shared/
-│   │       ├── ui-badge.mjs         ← <ui-badge> — status + priority pills
-│   │       ├── ui-button.mjs        ← <ui-button> — primary/ghost/danger variants
-│   │       ├── ui-card.mjs          ← <ui-card> — surface container
-│   │       ├── ui-dialog.mjs        ← <ui-dialog> — modal with backdrop
-│   │       ├── ui-drawer.mjs        ← <ui-drawer> — slide-in panel (mobile forms)
-│   │       ├── ui-toast.mjs         ← <ui-toast> — success/error notifications
-│   │       ├── ui-spinner.mjs       ← <ui-spinner> — loading state
-│   │       ├── ui-empty.mjs         ← <ui-empty> — empty state illustration + CTA
-│   │       ├── ui-confirm.mjs       ← <ui-confirm> — "Are you sure?" dialog
-│   │       ├── ui-search.mjs        ← <ui-search> — debounced search input
-│   │       ├── ui-tabs.mjs          ← <ui-tabs> — tab bar + panels
-│   │       ├── ui-avatar.mjs        ← <ui-avatar> — initials or photo avatar
-│   │       └── ui-tooltip.mjs       ← <ui-tooltip> — hover tooltip
-│   │
-│   ├── lib/
-│   │   ├── api.mjs                  ← Fetch wrapper, auth header, error handling
-│   │   ├── router.mjs               ← Hash/history client router
-│   │   ├── store.mjs                ← Reactive state (lightweight signal pattern)
-│   │   ├── auth.mjs                 ← JWT storage, decode, role checks
-│   │   ├── format.mjs               ← Date, currency, phone formatters
-│   │   ├── validate.mjs             ← Form field validators
-│   │   └── utils.mjs                ← Misc helpers, debounce, deepMerge
-│   │
-│   └── styles/
-│       ├── global.css               ← CSS custom properties (design tokens above)
-│       ├── reset.css                ← Modern CSS reset
-│       ├── typography.css           ← Base font rules
-│       ├── forms.css                ← Shared input/select/textarea styles
-│       ├── tables.css               ← Shared table styles
-│       └── print.css               ← Print overrides for wo-print.mjs
-│
-├── migrations/
-│   ├── 001_initial.sql
-│   ├── 002_resources.sql
-│   ├── 003_attachments.sql
-│   ├── 004_accounting.sql
-│   ├── 005_users_roles.sql
-│   └── 006_audit_log.sql
-│
-├── uploads/                         ← Bind-mounted in Docker
-├── Dockerfile
-├── docker-compose.yml
-├── .env.example
-└── go.mod
+├── CLAUDE.md                        ← !! READ FIRST — conventions for Claude Code
+├── cmd/server/main.go
+├── internal/
+│   ├── api/
+│   │   ├── router.go
+│   │   ├── middleware/
+│   │   │   ├── auth.go
+│   │   │   ├── cors.go
+│   │   │   └── logger.go
+│   │   └── handlers/
+│   │       ├── auth.go
+│   │       ├── workorder.go
+│   │       ├── step.go
+│   │       ├── resource.go
+│   │       ├── attachment.go
+│   │       ├── accounting.go
+│   │       ├── user.go
+│   │       ├── registry.go          ← people/vehicle/equipment/material master lists
+│   │       ├── dashboard.go
+│   │       └── report.go
+│   ├── service/
+│   │   ├── workorder.go
+│   │   ├── notification.go
+│   │   ├── spatial.go
+│   │   └── export.go               ← CSV/Excel export
+│   ├── repository/
+│   │   ├── db.go
+│   │   ├── workorder.go
+│   │   ├── step.go
+│   │   ├── resource.go
+│   │   ├── attachment.go
+│   │   ├── accounting.go
+│   │   ├── user.go
+│   │   └── registry.go
+│   ├── model/
+│   │   ├── workorder.go
+│   │   ├── step.go
+│   │   ├── resource.go
+│   │   ├── attachment.go
+│   │   ├── accounting.go
+│   │   ├── user.go
+│   │   └── dashboard.go
+│   └── config/config.go
+│
+├── web/                             ← All frontend — served as static files by Go
+│   ├── index.html                   ← App shell, loads fonts, Lucide, Leaflet
+│   ├── app.mjs                      ← <app-root> custom element + client router
+│   │
+│   ├── components/
+│   │   ├── layout/
+│   │   │   ├── app-sidebar.mjs      ← Left nav — collapsible, mobile drawer
+│   │   │   ├── app-topbar.mjs       ← Top bar — breadcrumb, notifications bell, user avatar
+│   │   │   ├── app-root.mjs         ← Shell that wires sidebar + topbar + <main>
+│   │   │   └── app-mobile-nav.mjs   ← Bottom tab bar for mobile (≤768px)
+│   │   │
+│   │   ├── work-orders/
+│   │   │   ├── wo-list.mjs          ← Searchable, filterable WO list
+│   │   │   ├── wo-kanban.mjs        ← Kanban board view (by status column)
+│   │   │   ├── wo-form.mjs          ← Create / edit full form
+│   │   │   ├── wo-detail.mjs        ← Read-only detail — tabs for each section
+│   │   │   ├── wo-checklist.mjs     ← Step checklist with check-off + progress bar
+│   │   │   ├── wo-resource-panel.mjs← Assign people, vehicles, equipment, materials
+│   │   │   ├── wo-photo-panel.mjs   ← Photo gallery, capture, before/during/after
+│   │   │   ├── wo-map.mjs           ← Leaflet map + directions button
+│   │   │   ├── wo-accounting.mjs    ← GL, cost center, WBS, billing ref fields
+│   │   │   ├── wo-timeline.mjs      ← Audit/activity log feed
+│   │   │   └── wo-print.mjs         ← Print-friendly layout for field packets
+│   │   │
+│   │   ├── dashboard/
+│   │   │   ├── dash-root.mjs        ← Dashboard page shell
+│   │   │   ├── dash-kpi-card.mjs    ← Reusable stat card (number + trend + icon)
+│   │   │   ├── dash-status-chart.mjs← Doughnut chart — WOs by status
+│   │   │   ├── dash-priority-bar.mjs← Bar chart — WOs by priority
+│   │   │   └── dash-recent-feed.mjs ← Recent activity feed
+│   │   │
+│   │   ├── registry/
+│   │   │   ├── people-list.mjs      ← Manage crew / technician records
+│   │   │   ├── people-form.mjs
+│   │   │   ├── vehicle-list.mjs     ← Manage fleet / vehicles
+│   │   │   ├── vehicle-form.mjs
+│   │   │   ├── equipment-list.mjs   ← Manage tools & equipment
+│   │   │   ├── equipment-form.mjs
+│   │   │   ├── material-list.mjs    ← Manage materials / inventory
+│   │   │   └── material-form.mjs
+│   │   │
+│   │   ├── users/
+│   │   │   ├── user-list.mjs        ← User management (admin only)
+│   │   │   ├── user-form.mjs        ← Create / edit user, assign role
+│   │   │   └── user-profile.mjs     ← Current user profile + password change
+│   │   │
+│   │   ├── reports/
+│   │   │   ├── report-root.mjs      ← Reports landing page
+│   │   │   ├── report-by-status.mjs
+│   │   │   ├── report-by-cost.mjs
+│   │   │   └── report-export.mjs    ← CSV / Excel download triggers
+│   │   │
+│   │   └── shared/
+│   │       ├── ui-badge.mjs         ← <ui-badge> — status + priority pills
+│   │       ├── ui-button.mjs        ← <ui-button> — primary/ghost/danger variants
+│   │       ├── ui-card.mjs          ← <ui-card> — surface container
+│   │       ├── ui-dialog.mjs        ← <ui-dialog> — modal with backdrop
+│   │       ├── ui-drawer.mjs        ← <ui-drawer> — slide-in panel (mobile forms)
+│   │       ├── ui-toast.mjs         ← <ui-toast> — success/error notifications
+│   │       ├── ui-spinner.mjs       ← <ui-spinner> — loading state
+│   │       ├── ui-empty.mjs         ← <ui-empty> — empty state illustration + CTA
+│   │       ├── ui-confirm.mjs       ← <ui-confirm> — "Are you sure?" dialog
+│   │       ├── ui-search.mjs        ← <ui-search> — debounced search input
+│   │       ├── ui-tabs.mjs          ← <ui-tabs> — tab bar + panels
+│   │       ├── ui-avatar.mjs        ← <ui-avatar> — initials or photo avatar
+│   │       └── ui-tooltip.mjs       ← <ui-tooltip> — hover tooltip
+│   │
+│   ├── lib/
+│   │   ├── api.mjs                  ← Fetch wrapper, auth header, error handling
+│   │   ├── router.mjs               ← Hash/history client router
+│   │   ├── store.mjs                ← Reactive state (lightweight signal pattern)
+│   │   ├── auth.mjs                 ← JWT storage, decode, role checks
+│   │   ├── format.mjs               ← Date, currency, phone formatters
+│   │   ├── validate.mjs             ← Form field validators
+│   │   └── utils.mjs                ← Misc helpers, debounce, deepMerge
+│   │
+│   └── styles/
+│       ├── global.css               ← CSS custom properties (design tokens above)
+│       ├── reset.css                ← Modern CSS reset
+│       ├── typography.css           ← Base font rules
+│       ├── forms.css                ← Shared input/select/textarea styles
+│       ├── tables.css               ← Shared table styles
+│       └── print.css               ← Print overrides for wo-print.mjs
+│
+├── migrations/
+│   ├── 001_initial.sql
+│   ├── 002_resources.sql
+│   ├── 003_attachments.sql
+│   ├── 004_accounting.sql
+│   ├── 005_users_roles.sql
+│   └── 006_audit_log.sql
+│
+├── uploads/                         ← Bind-mounted in Docker
+├── Dockerfile
+├── docker-compose.yml
+├── .env.example
+└── go.mod
 ```
 
 ---
 
-## Phase 1 — Foundation
+## Phase 1 — Foundation
 **Goal:** Running app with shell, sidebar, auth, and WO CRUD.
 
 ### 1.1 CLAUDE.md (create first)
@@ -290,11 +290,11 @@ workorder/
 ### 1.2 Go Project Bootstrap
 - [ ] `go mod init github.com/yourorg/workorder`
 - [ ] Add dependencies: `chi/v5`, `sqlx`, `go-mssqldb`, `golang-jwt/jwt/v5`, `google/uuid`, `joho/godotenv`
-- [ ] `internal/config/config.go` — load from env: `ADDR`, `DB_DSN`, `JWT_SECRET`, `UPLOAD_PATH`, `BASE_URL`
-- [ ] `internal/repository/db.go` — `sqlx.Connect`, pool settings (max open 25, max idle 5, lifetime 5min)
-- [ ] `cmd/server/main.go` — wire config → db → router → `http.ListenAndServe`
+- [ ] `internal/config/config.go` — load from env: `ADDR`, `DB_DSN`, `JWT_SECRET`, `UPLOAD_PATH`, `BASE_URL`
+- [ ] `internal/repository/db.go` — `sqlx.Connect`, pool settings (max open 25, max idle 5, lifetime 5min)
+- [ ] `cmd/server/main.go` — wire config → db → router → `http.ListenAndServe`
 
-### 1.3 Database — Migration 001
+### 1.3 Database — Migration 001
 ```sql
 -- work_orders table (full schema as planned)
 -- Computed wo_number column: 'WO-' + zero-padded id
@@ -321,22 +321,22 @@ workorder/
   );
   -- Seed one admin user
   ```
-- [ ] `POST /api/auth/login` — bcrypt compare, return `{ token, user }` with 8hr JWT
-- [ ] `POST /api/auth/refresh` — accepts valid token, returns new token
-- [ ] `GET /api/auth/me` — current user from token claims
+- [ ] `POST /api/auth/login` — bcrypt compare, return `{ token, user }` with 8hr JWT
+- [ ] `POST /api/auth/refresh` — accepts valid token, returns new token
+- [ ] `GET /api/auth/me` — current user from token claims
 - [ ] JWT middleware: attach user to `context.Context`, return 401 JSON on failure
 - [ ] Role helper: `RequireRole(roles ...string)` middleware
 
 ### 1.5 Work Order Backend (CRUD)
-- [ ] `model/workorder.go` — `WorkOrder`, `WorkOrderListItem`, `WorkOrderDetail` structs with `db:` and `json:` tags
+- [ ] `model/workorder.go` — `WorkOrder`, `WorkOrderListItem`, `WorkOrderDetail` structs with `db:` and `json:` tags
 - [ ] `repository/workorder.go`
-    - `List(ctx, filters)` — status, search, priority, parentType, page/limit
-    - `GetByID(ctx, id)` — single WO
-    - `Create(ctx, wo)` — insert + return generated ID
-    - `Update(ctx, wo)` — partial update, always set `updated_at = GETUTCDATE()`
-    - `UpdateStatus(ctx, id, status, userID)` — transition + audit log insert
-    - `Delete(ctx, id)` — soft delete (add `deleted_at` column)
-    - `GetDetail(ctx, id)` — joins WO + steps + resources + attachments + accounting in one call
+    - `List(ctx, filters)` — status, search, priority, parentType, page/limit
+    - `GetByID(ctx, id)` — single WO
+    - `Create(ctx, wo)` — insert + return generated ID
+    - `Update(ctx, wo)` — partial update, always set `updated_at = GETUTCDATE()`
+    - `UpdateStatus(ctx, id, status, userID)` — transition + audit log insert
+    - `Delete(ctx, id)` — soft delete (add `deleted_at` column)
+    - `GetDetail(ctx, id)` — joins WO + steps + resources + attachments + accounting in one call
 - [ ] Handlers: `List`, `Get`, `Create`, `Update`, `Delete`, `UpdateStatus`
 - [ ] Paginated response: `{ data: [...], meta: { page, per_page, total } }`
 
@@ -349,14 +349,14 @@ workorder/
     - `<script type="module" src="app.mjs">`
     - Viewport meta tag: `width=device-width, initial-scale=1`
 
-- [ ] `web/styles/reset.css` — modern reset (box-sizing, margin 0, img max-width)
-- [ ] `web/styles/global.css` — all design tokens, base body/font rules
-- [ ] `web/styles/forms.css` — input, select, textarea, label, fieldset base styles
-- [ ] `web/lib/api.mjs` — fetch wrapper, auto-inject `Authorization`, handle 401 → emit `auth:expired`
-- [ ] `web/lib/auth.mjs` — `getToken()`, `setToken()`, `clearToken()`, `getUser()`, `hasRole()`
-- [ ] `web/lib/router.mjs` — hash router, `on(pattern, handler)`, `navigate(path)`, `start()`
-- [ ] `web/lib/format.mjs` — `formatDate()`, `formatDateTime()`, `formatRelative()`, `formatPhone()`
-- [ ] `web/lib/store.mjs` — reactive signal: `createStore(initial)` returns `{ get, set, subscribe }`
+- [ ] `web/styles/reset.css` — modern reset (box-sizing, margin 0, img max-width)
+- [ ] `web/styles/global.css` — all design tokens, base body/font rules
+- [ ] `web/styles/forms.css` — input, select, textarea, label, fieldset base styles
+- [ ] `web/lib/api.mjs` — fetch wrapper, auto-inject `Authorization`, handle 401 → emit `auth:expired`
+- [ ] `web/lib/auth.mjs` — `getToken()`, `setToken()`, `clearToken()`, `getUser()`, `hasRole()`
+- [ ] `web/lib/router.mjs` — hash router, `on(pattern, handler)`, `navigate(path)`, `start()`
+- [ ] `web/lib/format.mjs` — `formatDate()`, `formatDateTime()`, `formatRelative()`, `formatPhone()`
+- [ ] `web/lib/store.mjs` — reactive signal: `createStore(initial)` returns `{ get, set, subscribe }`
 
 ### 1.7 Sidebar Layout
 - [ ] **`web/components/layout/app-sidebar.mjs`**
@@ -372,17 +372,17 @@ workorder/
 
 - [ ] **Nav items (in order):**
   ```
-  ─── Main ────────────────
+  ─── Main ────────────────
   Dashboard        /          (layout-dashboard icon)
   Work Orders      /work-orders (clipboard-list icon)
-  ─── Resources ───────────
+  ─── Resources ───────────
   People           /registry/people  (users icon)
   Vehicles         /registry/vehicles (truck icon)
   Equipment        /registry/equipment (wrench icon)
   Materials        /registry/materials (package icon)
-  ─── Operations ──────────
+  ─── Operations ──────────
   Reports          /reports   (bar-chart-2 icon)
-  ─── Admin ────────────────  (only shown if role = admin)
+  ─── Admin ────────────────  (only shown if role = admin)
   Users            /users     (user-cog icon)
   Settings         /settings  (settings icon)
   ```
@@ -394,7 +394,7 @@ workorder/
     - Topbar is fixed/sticky at top, `z-index` above content
 
 - [ ] **`web/components/layout/app-mobile-nav.mjs`**
-    - Fixed bottom tab bar on screens ≤ 768px
+    - Fixed bottom tab bar on screens ≤ 768px
     - Show 5 main items: Dashboard, Work Orders, People, Reports, Menu (opens drawer)
     - Active tab: `--teal` color + underline indicator
     - Safe area padding for iOS notch: `padding-bottom: env(safe-area-inset-bottom)`
@@ -410,7 +410,7 @@ workorder/
       grid-template-columns: var(--sidebar-w) 1fr;
       grid-template-rows: 56px 1fr;
   
-      /* Mobile ≤768px */
+      /* Mobile ≤768px */
       grid-template-columns: 1fr;
       grid-template-rows: 56px 1fr 56px;
       ```
@@ -418,21 +418,21 @@ workorder/
 - [ ] **`web/app.mjs`**
     - Register all components
     - Initialize router: map hash routes to `<main>` innerHTML swaps
-    - Listen for `auth:expired` → clear token → navigate to `/login`
+    - Listen for `auth:expired` → clear token → navigate to `/login`
 
 ### 1.8 Shared UI Components (needed in Phase 1)
-- [ ] **`ui-badge.mjs`** — status & priority pills
+- [ ] **`ui-badge.mjs`** — status & priority pills
   ```html
   <ui-badge type="status" value="in_progress">In Progress</ui-badge>
   <ui-badge type="priority" value="urgent">Urgent</ui-badge>
   ```
   Colored dot + label, background is 15% opacity of the status color
 
-- [ ] **`ui-button.mjs`** — `variant="primary|ghost|danger|icon"`, `size="sm|md|lg"`, `loading` attr shows spinner
-- [ ] **`ui-spinner.mjs`** — CSS animated ring, `size` attr
-- [ ] **`ui-toast.mjs`** — fixed top-right, slide-in animation, auto-dismiss after 4s, `type="success|error|info"`
-- [ ] **`ui-empty.mjs`** — centered illustration + heading + body + optional CTA button
-- [ ] **`ui-dialog.mjs`** — `<dialog>` element, backdrop, close on Escape + backdrop click, `size="sm|md|lg"`
+- [ ] **`ui-button.mjs`** — `variant="primary|ghost|danger|icon"`, `size="sm|md|lg"`, `loading` attr shows spinner
+- [ ] **`ui-spinner.mjs`** — CSS animated ring, `size` attr
+- [ ] **`ui-toast.mjs`** — fixed top-right, slide-in animation, auto-dismiss after 4s, `type="success|error|info"`
+- [ ] **`ui-empty.mjs`** — centered illustration + heading + body + optional CTA button
+- [ ] **`ui-dialog.mjs`** — `<dialog>` element, backdrop, close on Escape + backdrop click, `size="sm|md|lg"`
 
 ### 1.9 WO List Page
 - [ ] **`wo-list.mjs`**
@@ -441,7 +441,7 @@ workorder/
     - View toggle: List view | Kanban view (icon buttons, remember choice in localStorage)
     - **List view:** table on desktop, card stack on mobile
         - Columns: WO#, Title, Site, Status, Priority, Scheduled, Steps progress, Photos count, Actions
-        - Row click → navigate to detail
+        - Row click → navigate to detail
         - Actions column: Edit (pencil), delete (trash, confirm dialog)
         - Sticky header, sortable columns (client-side sort for Phase 1)
     - Loading: skeleton rows (CSS animation, not a spinner)
@@ -456,18 +456,18 @@ workorder/
     - Drag-and-drop to change status (HTML5 drag API, no lib needed)
 
 ### 1.10 WO Form Page
-- [ ] **`wo-form.mjs`** — used for both Create and Edit
+- [ ] **`wo-form.mjs`** — used for both Create and Edit
     - Page header: "New Work Order" or "Edit WO-000123" + breadcrumb
     - Layout: two-column on desktop (`grid-template-columns: 2fr 1fr`), single column mobile
-    - **Left column — main fields:**
+    - **Left column — main fields:**
         - Title (required, full width)
         - Description (textarea, 3 rows)
-        - Instructions (textarea, 5 rows — will become rich text in Phase 4)
+        - Instructions (textarea, 5 rows — will become rich text in Phase 4)
         - Site Name
-        - Address (with optional geocode button → fills Lat/Lng)
+        - Address (with optional geocode button → fills Lat/Lng)
         - Lat / Lng (read-only display, set by geocoder or map click)
         - Access Notes (gate codes, road conditions)
-    - **Right column — metadata:**
+    - **Right column — metadata:**
         - Status (select)
         - Priority (select with colored indicator)
         - Parent Type (select: None / Project / Trouble Ticket / Service Order)
@@ -479,7 +479,7 @@ workorder/
     - Unsaved-changes guard: warn before navigating away if form is dirty
 
 ### 1.11 WO Detail Page
-- [ ] **`wo-detail.mjs`** — tabbed layout
+- [ ] **`wo-detail.mjs`** — tabbed layout
     - Header section: WO number (mono font), title, status badge, priority badge
     - Metadata strip: site, scheduled date, created by, parent link (clickable)
     - Action buttons: Edit, Print, Change Status (dropdown), Close WO
@@ -489,75 +489,75 @@ workorder/
 
 ---
 
-## Phase 2 — Field Features
+## Phase 2 — Field Features
 **Goal:** Everything a crew needs on their phone in the field.
 
 ### 2.1 Database Migrations
-- [ ] `002_resources.sql` — `wo_steps`, `wo_resources`, `resource_people`, `resource_vehicles`, `resource_equipment`, `resource_materials`
-- [ ] `003_attachments.sql` — `wo_attachments`
+- [ ] `002_resources.sql` — `wo_steps`, `wo_resources`, `resource_people`, `resource_vehicles`, `resource_equipment`, `resource_materials`
+- [ ] `003_attachments.sql` — `wo_attachments`
 
 ### 2.2 Checklist / Steps
 **Backend:**
-- [ ] `GET /api/work-orders/{id}/steps` — ordered list
-- [ ] `POST /api/work-orders/{id}/steps` — add step `{ title, description, step_order, required }`
-- [ ] `PUT /api/work-orders/{id}/steps/{sid}` — edit step (title, description, reorder)
-- [ ] `PUT /api/work-orders/{id}/steps/reorder` — bulk reorder `{ steps: [{id, order}] }`
-- [ ] `POST /api/work-orders/{id}/steps/{sid}/complete` — check off, record `completed_by`, `completed_at`, optional `notes`
-- [ ] `POST /api/work-orders/{id}/steps/{sid}/uncomplete` — undo check (dispatcher+ only)
+- [ ] `GET /api/work-orders/{id}/steps` — ordered list
+- [ ] `POST /api/work-orders/{id}/steps` — add step `{ title, description, step_order, required }`
+- [ ] `PUT /api/work-orders/{id}/steps/{sid}` — edit step (title, description, reorder)
+- [ ] `PUT /api/work-orders/{id}/steps/reorder` — bulk reorder `{ steps: [{id, order}] }`
+- [ ] `POST /api/work-orders/{id}/steps/{sid}/complete` — check off, record `completed_by`, `completed_at`, optional `notes`
+- [ ] `POST /api/work-orders/{id}/steps/{sid}/uncomplete` — undo check (dispatcher+ only)
 - [ ] `DELETE /api/work-orders/{id}/steps/{sid}`
 
 **Frontend `wo-checklist.mjs`:**
 - [ ] Progress bar at top: `X of Y steps complete` with animated fill
 - [ ] Each step row:
-    - Checkbox (large, touch-friendly — min 44px tap target)
+    - Checkbox (large, touch-friendly — min 44px tap target)
     - Step number + title (strikethrough when complete)
     - Description (collapsed, expand on tap)
-    - "Add note" button → inline textarea for completion note
-    - Photo camera button → triggers photo capture attached to this step
+    - "Add note" button → inline textarea for completion note
+    - Photo camera button → triggers photo capture attached to this step
     - Completed by + timestamp (shown when done, muted)
 - [ ] Add Step form at bottom: title field + optional description + Add button
 - [ ] Drag handle for reordering (desktop; long-press on mobile)
-- [ ] Steps auto-saved — no save button, immediate API call on check
-- [ ] If all steps complete → confetti animation + prompt to move status to Pending Review
+- [ ] Steps auto-saved — no save button, immediate API call on check
+- [ ] If all steps complete → confetti animation + prompt to move status to Pending Review
 
 ### 2.3 Resource Registry (Master Lists)
 **Backend:**
-- [ ] `GET /api/registry/people?search=&active=true` — paginated list
-- [ ] `POST /api/registry/people` — create person record
-- [ ] `PUT /api/registry/people/{id}` — update
-- [ ] `DELETE /api/registry/people/{id}` — soft delete (set `active = 0`)
+- [ ] `GET /api/registry/people?search=&active=true` — paginated list
+- [ ] `POST /api/registry/people` — create person record
+- [ ] `PUT /api/registry/people/{id}` — update
+- [ ] `DELETE /api/registry/people/{id}` — soft delete (set `active = 0`)
 - [ ] Same CRUD for `/registry/vehicles`, `/registry/equipment`, `/registry/materials`
 
-**Frontend — People (`people-list.mjs`, `people-form.mjs`):**
+**Frontend — People (`people-list.mjs`, `people-form.mjs`):**
 - [ ] List page: avatar + name + role + phone + email + active badge + edit/deactivate actions
 - [ ] Form fields: display name, role/title, email, phone, notes, active toggle
 - [ ] Avatar: show initials in colored circle (hash name to color), or upload photo
 
-**Frontend — Vehicles (`vehicle-list.mjs`, `vehicle-form.mjs`):**
+**Frontend — Vehicles (`vehicle-list.mjs`, `vehicle-form.mjs`):**
 - [ ] List: unit number, description, type, license plate, active status
 - [ ] Form fields: unit number, description, vehicle type (bucket truck / van / trailer / other), license plate, notes, active toggle
 
-**Frontend — Equipment (`equipment-list.mjs`, `equipment-form.mjs`):**
+**Frontend — Equipment (`equipment-list.mjs`, `equipment-form.mjs`):**
 - [ ] List: name, asset tag, category, last assigned WO, active status
 - [ ] Form fields: name, asset tag, category (fusion splicer / OTDR / blower / reel / other), serial number, notes, active toggle
 
-**Frontend — Materials (`material-list.mjs`, `material-form.mjs`):**
+**Frontend — Materials (`material-list.mjs`, `material-form.mjs`):**
 - [ ] List: name, part number, unit of measure, active status
 - [ ] Form fields: name, part number, unit (ft / ea / box / roll), notes, active toggle
 
 ### 2.4 Resource Assignment Panel
 **Backend:**
 - [ ] `GET /api/work-orders/{id}/resources`
-- [ ] `POST /api/work-orders/{id}/resources` — `{ resource_type, resource_id, quantity?, notes? }`
+- [ ] `POST /api/work-orders/{id}/resources` — `{ resource_type, resource_id, quantity?, notes? }`
 - [ ] `DELETE /api/work-orders/{id}/resources/{rid}`
-- [ ] `GET /api/registry/people?search=` — for typeahead pickers
+- [ ] `GET /api/registry/people?search=` — for typeahead pickers
 
 **Frontend `wo-resource-panel.mjs`:**
-- [ ] Four sections: People · Vehicles · Equipment · Materials
+- [ ] Four sections: People · Vehicles · Equipment · Materials
 - [ ] Each section:
-    - Assigned list: avatar/icon + name + remove (×) button
-    - "Add" button → opens `<ui-dialog>` with searchable picker
-    - Picker: search input + scrollable list with checkboxes → "Add Selected" button
+    - Assigned list: avatar/icon + name + remove (×) button
+    - "Add" button → opens `<ui-dialog>` with searchable picker
+    - Picker: search input + scrollable list with checkboxes → "Add Selected" button
     - Materials: quantity field next to each assigned item
 - [ ] Empty section shows `<ui-empty>` inline: "No people assigned yet"
 - [ ] Changes reflect immediately, API call on each add/remove
@@ -565,50 +565,50 @@ workorder/
 
 ### 2.5 Photo Panel
 **Backend:**
-- [ ] `POST /api/work-orders/{id}/attachments` — multipart, fields: `file`, `phase`, `caption`, `step_id?`
+- [ ] `POST /api/work-orders/{id}/attachments` — multipart, fields: `file`, `phase`, `caption`, `step_id?`
 - [ ] `GET /api/work-orders/{id}/attachments`
-- [ ] `PUT /api/work-orders/{id}/attachments/{aid}` — update caption/phase
+- [ ] `PUT /api/work-orders/{id}/attachments/{aid}` — update caption/phase
 - [ ] `DELETE /api/work-orders/{id}/attachments/{aid}`
 - [ ] Extract EXIF GPS on server if present in JPEG
 - [ ] Generate thumbnail on upload (use `imaging` Go package, 400px wide JPEG)
 - [ ] Serve originals at `/uploads/{path}`, thumbs at `/uploads/thumbs/{path}`
 
 **Frontend `wo-photo-panel.mjs`:**
-- [ ] Phase tabs at top: **All · Before · During · After** — filter photos by phase
+- [ ] Phase tabs at top: **All · Before · During · After** — filter photos by phase
 - [ ] Photo grid: 3 columns desktop, 2 columns tablet, 2 columns mobile
 - [ ] Each photo tile: thumbnail, hover overlay with caption + phase badge
-- [ ] Click → lightbox modal with full-size image, prev/next arrows, swipe on mobile
+- [ ] Click → lightbox modal with full-size image, prev/next arrows, swipe on mobile
 - [ ] Upload button:
     - Desktop: file picker (multi-select, drag-and-drop zone)
     - Mobile: `<input type="file" accept="image/*" capture="environment">` for camera
 - [ ] Upload flow: show thumbnail preview + phase selector + caption field before confirm
 - [ ] Upload progress: per-file progress bar, queue multiple uploads
 - [ ] Geo-tagged indicator: small pin icon if lat/lng present
-- [ ] Empty state per phase: "No 'before' photos yet — capture site condition before starting"
+- [ ] Empty state per phase: "No 'before' photos yet — capture site condition before starting"
 
 ### 2.6 Map & Location
 **Backend:**
-- [ ] `GET /api/work-orders/{id}/location` — return `{ lat, lng, address, site_name, access_notes }`
-- [ ] `PUT /api/work-orders/{id}/location` — update coordinates + address
+- [ ] `GET /api/work-orders/{id}/location` — return `{ lat, lng, address, site_name, access_notes }`
+- [ ] `PUT /api/work-orders/{id}/location` — update coordinates + address
 
 **Frontend `wo-map.mjs`:**
 - [ ] Leaflet map, 300px height (expandable to full-screen on mobile)
 - [ ] OpenStreetMap tile layer (no API key)
 - [ ] Custom pin: teal SVG marker with WO number label
-- [ ] "Get Directions" button → deeplink:
+- [ ] "Get Directions" button → deeplink:
     - iOS: `maps://maps.apple.com/?daddr={lat},{lng}`
     - Android/other: `https://maps.google.com/maps?daddr={lat},{lng}`
-- [ ] "Set Location" mode: click map to drop pin → updates lat/lng fields in WO form
-- [ ] Geocode button in WO form: type address → calls OpenStreetMap Nominatim → fills lat/lng (free, no key)
+- [ ] "Set Location" mode: click map to drop pin → updates lat/lng fields in WO form
+- [ ] Geocode button in WO form: type address → calls OpenStreetMap Nominatim → fills lat/lng (free, no key)
 - [ ] Access notes shown below map in an info box with lock icon
 
 ### 2.7 Mobile Responsiveness Audit
-- [ ] All tap targets ≥ 44×44px
+- [ ] All tap targets ≥ 44×44px
 - [ ] No horizontal scroll on any page at 375px width
 - [ ] Forms: single column, full-width inputs
 - [ ] Tables: horizontal scroll container or card-based list on mobile
-- [ ] Sidebar: hidden, accessible via hamburger → slides in as drawer with backdrop
-- [ ] Bottom nav `app-mobile-nav.mjs` visible on ≤ 768px, hidden on desktop
+- [ ] Sidebar: hidden, accessible via hamburger → slides in as drawer with backdrop
+- [ ] Bottom nav `app-mobile-nav.mjs` visible on ≤ 768px, hidden on desktop
 - [ ] Photo capture uses `capture="environment"` on mobile
 - [ ] Map "Get Directions" opens native maps app
 - [ ] Dialogs: full-screen on mobile (`position: fixed; inset: 0`)
@@ -616,13 +616,13 @@ workorder/
 
 ---
 
-## Phase 3 — Integrations & Admin
+## Phase 3 — Integrations & Admin
 
 ### 3.1 Accounting Codes
 **Backend:**
-- [ ] `004_accounting.sql` — `wo_accounting` table (wo_id, code_type, code_value, description)
+- [ ] `004_accounting.sql` — `wo_accounting` table (wo_id, code_type, code_value, description)
 - [ ] `GET /api/work-orders/{id}/accounting`
-- [ ] `PUT /api/work-orders/{id}/accounting` — upsert all codes in one request `[{ code_type, code_value, description }]`
+- [ ] `PUT /api/work-orders/{id}/accounting` — upsert all codes in one request `[{ code_type, code_value, description }]`
 
 **Frontend `wo-accounting.mjs`:**
 - [ ] Four fields in a clean two-column grid:
@@ -640,21 +640,21 @@ workorder/
 - [ ] When type selected: show search/ID input for the parent record
 - [ ] In WO detail header: linked parent shown as a chip with icon
   ```
-  📋 Project: Elm Street FTTH Build  →
+  📋 Project: Elm Street FTTH Build  →
   ```
 - [ ] Clicking the chip opens a drawer with parent record summary (Phase 4: deep link)
-- [ ] Backend: `GET /api/work-orders?parent_type=project&parent_id=42` — list WOs for a given parent
+- [ ] Backend: `GET /api/work-orders?parent_type=project&parent_id=42` — list WOs for a given parent
 
 ### 3.3 Audit Log / Activity Timeline
 **Backend:**
-- [ ] `006_audit_log.sql` — `wo_audit_log` (id, wo_id, action, old_value, new_value, performed_by, performed_at)
+- [ ] `006_audit_log.sql` — `wo_audit_log` (id, wo_id, action, old_value, new_value, performed_by, performed_at)
 - [ ] Log every status change, resource assignment, step completion, photo upload, accounting change
-- [ ] `GET /api/work-orders/{id}/activity` — paginated, newest first
+- [ ] `GET /api/work-orders/{id}/activity` — paginated, newest first
 
 **Frontend `wo-timeline.mjs`:**
 - [ ] Vertical timeline feed: dot + connector line
 - [ ] Each entry: user avatar + action description + timestamp (relative + absolute on hover)
-- [ ] Status changes: colored badge showing old → new
+- [ ] Status changes: colored badge showing old → new
 - [ ] Photo uploads: thumbnail preview inline
 - [ ] Step completions: step title + optional note
 - [ ] Load more button at bottom (pagination)
@@ -662,19 +662,19 @@ workorder/
 
 ### 3.4 User Management (Admin Only)
 **Backend:**
-- [ ] `GET /api/users` — list all users (admin only)
-- [ ] `POST /api/users` — create user, auto-send invite email
-- [ ] `PUT /api/users/{id}` — update name, role, active status
-- [ ] `PUT /api/users/{id}/password` — admin reset
-- [ ] `DELETE /api/users/{id}` — deactivate (soft delete)
-- [ ] `GET /api/users/me` — current user profile
-- [ ] `PUT /api/users/me` — update own display name, avatar
-- [ ] `PUT /api/users/me/password` — change own password (requires current password)
+- [ ] `GET /api/users` — list all users (admin only)
+- [ ] `POST /api/users` — create user, auto-send invite email
+- [ ] `PUT /api/users/{id}` — update name, role, active status
+- [ ] `PUT /api/users/{id}/password` — admin reset
+- [ ] `DELETE /api/users/{id}` — deactivate (soft delete)
+- [ ] `GET /api/users/me` — current user profile
+- [ ] `PUT /api/users/me` — update own display name, avatar
+- [ ] `PUT /api/users/me/password` — change own password (requires current password)
 
 **Frontend:**
-- [ ] **`user-list.mjs`** — table: avatar, name, email, role badge, last login, active toggle, edit button
-- [ ] **`user-form.mjs`** — dialog: display name, email, role select, active toggle, force password reset checkbox
-- [ ] **`user-profile.mjs`** — own profile: avatar upload, display name, current password + new password fields
+- [ ] **`user-list.mjs`** — table: avatar, name, email, role badge, last login, active toggle, edit button
+- [ ] **`user-form.mjs`** — dialog: display name, email, role select, active toggle, force password reset checkbox
+- [ ] **`user-profile.mjs`** — own profile: avatar upload, display name, current password + new password fields
 - [ ] Role badges with colors: Admin=danger, Dispatcher=teal, Field Tech=warning, Viewer=muted
 
 ### 3.5 Notifications
@@ -685,17 +685,17 @@ workorder/
     - WO status changes (for creator and assignees)
     - All steps completed (for dispatcher/admin)
     - WO approaching scheduled time (30 min warning, cron job)
-- [ ] `GET /api/notifications?unread=true` — list notifications
-- [ ] `PUT /api/notifications/{id}/read` — mark read
-- [ ] `PUT /api/notifications/read-all` — mark all read
+- [ ] `GET /api/notifications?unread=true` — list notifications
+- [ ] `PUT /api/notifications/{id}/read` — mark read
+- [ ] `PUT /api/notifications/read-all` — mark all read
 - [ ] Email notification: Go `net/smtp` with HTML template, send on assignment
 
 **Frontend:**
 - [ ] Bell icon in topbar: unread count badge (red dot with number)
-- [ ] Click bell → dropdown panel with notification list
+- [ ] Click bell → dropdown panel with notification list
 - [ ] Each notification: icon, message, WO link, relative time, unread dot
 - [ ] "Mark all read" button at top
-- [ ] Click notification → navigate to WO detail + mark read
+- [ ] Click notification → navigate to WO detail + mark read
 - [ ] Poll `/api/notifications?unread=true` every 60s for new count
 
 ### 3.6 Print / Field Packet
@@ -709,31 +709,31 @@ workorder/
     - Map static image (use Leaflet's `map.printPlugin` or OpenStreetMap static tiles)
     - Numbered step checklist (checkbox squares for pen check-off)
     - Accounting codes
-    - Photo thumbnails (before photos only, 2×3 grid)
+    - Photo thumbnails (before photos only, 2×3 grid)
     - Signature / completion line
 - [ ] `print.css`: hide sidebar, topbar, action buttons; show print-only elements; break pages sensibly
 
 ### 3.7 Reports
 **Backend:**
-- [ ] `GET /api/reports/summary` — total WOs by status, by priority, by date range
-- [ ] `GET /api/reports/by-cost-center` — WO count and open/closed by cost center
-- [ ] `GET /api/reports/by-resource` — WOs per person/vehicle over date range
-- [ ] `GET /api/reports/overdue` — WOs past scheduled end still not closed
-- [ ] `GET /api/reports/export?format=csv&status=closed&from=&to=` — CSV download
+- [ ] `GET /api/reports/summary` — total WOs by status, by priority, by date range
+- [ ] `GET /api/reports/by-cost-center` — WO count and open/closed by cost center
+- [ ] `GET /api/reports/by-resource` — WOs per person/vehicle over date range
+- [ ] `GET /api/reports/overdue` — WOs past scheduled end still not closed
+- [ ] `GET /api/reports/export?format=csv&status=closed&from=&to=` — CSV download
 
 **Frontend:**
-- [ ] **`report-root.mjs`** — filter bar: date range, status, cost center, parent type
-- [ ] **`report-by-status.mjs`** — doughnut chart (Chart.js) + summary table
-- [ ] **`report-by-cost.mjs`** — bar chart by cost center + table with WO list
-- [ ] **`report-export.mjs`** — "Export to CSV" button + date range picker + format select
+- [ ] **`report-root.mjs`** — filter bar: date range, status, cost center, parent type
+- [ ] **`report-by-status.mjs`** — doughnut chart (Chart.js) + summary table
+- [ ] **`report-by-cost.mjs`** — bar chart by cost center + table with WO list
+- [ ] **`report-export.mjs`** — "Export to CSV" button + date range picker + format select
 
 ---
 
-## Phase 4 — Polish & Optimization
+## Phase 4 — Polish & Optimization
 
 ### 4.1 Dashboard
 **Backend:**
-- [ ] `GET /api/dashboard` — single endpoint returns all KPIs:
+- [ ] `GET /api/dashboard` — single endpoint returns all KPIs:
   ```json
   {
     "open_count": 42,
@@ -748,12 +748,12 @@ workorder/
   ```
 
 **Frontend `dash-root.mjs`:**
-- [ ] **KPI row** — four `<dash-kpi-card>` components:
+- [ ] **KPI row** — four `<dash-kpi-card>` components:
     - Open Work Orders (blue, clipboard icon)
     - In Progress (orange, activity icon)
     - Overdue (red, alert-circle icon)
     - Closed Today (green, check-circle icon)
-    - Each card: large number, trend indicator (↑↓ vs yesterday), icon, click → filtered WO list
+    - Each card: large number, trend indicator (↑↓ vs yesterday), icon, click → filtered WO list
 
 - [ ] **Charts row** (2 columns):
     - Doughnut: WOs by Status (Chart.js, use status colors from design system)
@@ -767,12 +767,12 @@ workorder/
 - [ ] Skeleton loading state while data loads
 
 ### 4.2 Offline / PWA Basics
-- [ ] `manifest.json` — app name, icons, `display: standalone`, theme color `#0D2137`
-- [ ] `sw.js` — Service Worker:
+- [ ] `manifest.json` — app name, icons, `display: standalone`, theme color `#0D2137`
+- [ ] `sw.js` — Service Worker:
     - Cache shell (index.html, CSS, .mjs files) on install
     - Cache API GET responses in IndexedDB for offline read
     - Queue photo uploads when offline, sync on reconnect (Background Sync API)
-- [ ] Offline indicator banner: "You're offline — viewing cached data"
+- [ ] Offline indicator banner: "You're offline — viewing cached data"
 - [ ] "Add to Home Screen" prompt on mobile
 
 ### 4.3 Rich Text Instructions
@@ -782,13 +782,13 @@ workorder/
 
 ### 4.4 Full-Text Search
 - [ ] SQL Server `CONTAINS` or `FREETEXT` on `work_orders.title`, `description`, `instructions`, `site_name`
-- [ ] Global search bar in topbar — results show WOs, people, equipment matching query
+- [ ] Global search bar in topbar — results show WOs, people, equipment matching query
 - [ ] Keyboard shortcut: `Ctrl+K` / `Cmd+K` opens search spotlight dialog
 
 ### 4.5 Scheduling Calendar
-- [ ] **`wo-calendar.mjs`** — monthly/weekly view
+- [ ] **`wo-calendar.mjs`** — monthly/weekly view
 - [ ] Each WO block: title, priority color stripe, assignee avatars
-- [ ] Click WO block → detail drawer slides in without leaving calendar
+- [ ] Click WO block → detail drawer slides in without leaving calendar
 - [ ] Drag WO block to reschedule (updates `scheduled_start`, `scheduled_end`)
 
 ### 4.6 Crew Scheduling View
@@ -811,38 +811,38 @@ workorder/
 
 | Component | File | Status | Phase |
 |-----------|------|--------|-------|
-| App shell | `app-root.mjs` | ⬜ | 1 |
-| Sidebar | `app-sidebar.mjs` | ⬜ | 1 |
-| Topbar | `app-topbar.mjs` | ⬜ | 1 |
-| Mobile nav | `app-mobile-nav.mjs` | ⬜ | 1 |
-| WO List | `wo-list.mjs` | ⬜ | 1 |
-| WO Kanban | `wo-kanban.mjs` | ⬜ | 1 |
-| WO Form | `wo-form.mjs` | ⬜ | 1 |
-| WO Detail | `wo-detail.mjs` | ⬜ | 1 |
-| Status Badge | `ui-badge.mjs` | ⬜ | 1 |
-| Button | `ui-button.mjs` | ⬜ | 1 |
-| Dialog | `ui-dialog.mjs` | ⬜ | 1 |
-| Toast | `ui-toast.mjs` | ⬜ | 1 |
-| Spinner | `ui-spinner.mjs` | ⬜ | 1 |
-| Empty state | `ui-empty.mjs` | ⬜ | 1 |
-| Checklist | `wo-checklist.mjs` | ⬜ | 2 |
-| Resource panel | `wo-resource-panel.mjs` | ⬜ | 2 |
-| Photo panel | `wo-photo-panel.mjs` | ⬜ | 2 |
-| Map | `wo-map.mjs` | ⬜ | 2 |
-| People list/form | `people-list.mjs` | ⬜ | 2 |
-| Vehicle list/form | `vehicle-list.mjs` | ⬜ | 2 |
-| Equipment list/form | `equipment-list.mjs` | ⬜ | 2 |
-| Material list/form | `material-list.mjs` | ⬜ | 2 |
-| Accounting | `wo-accounting.mjs` | ⬜ | 3 |
-| Timeline | `wo-timeline.mjs` | ⬜ | 3 |
-| Print packet | `wo-print.mjs` | ⬜ | 3 |
-| User list/form | `user-list.mjs` | ⬜ | 3 |
-| User profile | `user-profile.mjs` | ⬜ | 3 |
-| Reports | `report-root.mjs` | ⬜ | 3 |
-| Dashboard | `dash-root.mjs` | ⬜ | 4 |
-| KPI card | `dash-kpi-card.mjs` | ⬜ | 4 |
-| Calendar | `wo-calendar.mjs` | ⬜ | 4 |
-| Search spotlight | (in `app-topbar.mjs`) | ⬜ | 4 |
+| App shell | `app-root.mjs` | ⬜ | 1 |
+| Sidebar | `app-sidebar.mjs` | ⬜ | 1 |
+| Topbar | `app-topbar.mjs` | ⬜ | 1 |
+| Mobile nav | `app-mobile-nav.mjs` | ⬜ | 1 |
+| WO List | `wo-list.mjs` | ⬜ | 1 |
+| WO Kanban | `wo-kanban.mjs` | ⬜ | 1 |
+| WO Form | `wo-form.mjs` | ⬜ | 1 |
+| WO Detail | `wo-detail.mjs` | ⬜ | 1 |
+| Status Badge | `ui-badge.mjs` | ⬜ | 1 |
+| Button | `ui-button.mjs` | ⬜ | 1 |
+| Dialog | `ui-dialog.mjs` | ⬜ | 1 |
+| Toast | `ui-toast.mjs` | ⬜ | 1 |
+| Spinner | `ui-spinner.mjs` | ⬜ | 1 |
+| Empty state | `ui-empty.mjs` | ⬜ | 1 |
+| Checklist | `wo-checklist.mjs` | ⬜ | 2 |
+| Resource panel | `wo-resource-panel.mjs` | ⬜ | 2 |
+| Photo panel | `wo-photo-panel.mjs` | ⬜ | 2 |
+| Map | `wo-map.mjs` | ⬜ | 2 |
+| People list/form | `people-list.mjs` | ⬜ | 2 |
+| Vehicle list/form | `vehicle-list.mjs` | ⬜ | 2 |
+| Equipment list/form | `equipment-list.mjs` | ⬜ | 2 |
+| Material list/form | `material-list.mjs` | ⬜ | 2 |
+| Accounting | `wo-accounting.mjs` | ⬜ | 3 |
+| Timeline | `wo-timeline.mjs` | ⬜ | 3 |
+| Print packet | `wo-print.mjs` | ⬜ | 3 |
+| User list/form | `user-list.mjs` | ⬜ | 3 |
+| User profile | `user-profile.mjs` | ⬜ | 3 |
+| Reports | `report-root.mjs` | ⬜ | 3 |
+| Dashboard | `dash-root.mjs` | ⬜ | 4 |
+| KPI card | `dash-kpi-card.mjs` | ⬜ | 4 |
+| Calendar | `wo-calendar.mjs` | ⬜ | 4 |
+| Search spotlight | (in `app-topbar.mjs`) | ⬜ | 4 |
 
 ---
 
@@ -851,9 +851,9 @@ workorder/
 ### Auth
 | Method | Path | Auth | Description |
 |--------|------|------|-------------|
-| POST | `/api/auth/login` | ✗ | Login, returns JWT + user |
-| POST | `/api/auth/refresh` | ✓ | Refresh token |
-| GET | `/api/auth/me` | ✓ | Current user |
+| POST | `/api/auth/login` | ✗ | Login, returns JWT + user |
+| POST | `/api/auth/refresh` | ✓ | Refresh token |
+| GET | `/api/auth/me` | ✓ | Current user |
 
 ### Work Orders
 | Method | Path | Role | Description |
@@ -940,10 +940,10 @@ workorder/
 | `users` | App users with roles |
 
 ### Key Patterns
-- Soft deletes: `deleted_at DATETIME2 NULL` — never hard delete, always filter `WHERE deleted_at IS NULL`
+- Soft deletes: `deleted_at DATETIME2 NULL` — never hard delete, always filter `WHERE deleted_at IS NULL`
 - Audit timestamps: every table has `created_at`, `updated_at` (auto via `DEFAULT GETUTCDATE()`)
-- Polymorphic parent: `parent_type NVARCHAR(50)`, `parent_id INT` — handles any parent record type
-- Named params only: never string-concatenate SQL — always use `@param_name` or `@p1`
+- Polymorphic parent: `parent_type NVARCHAR(50)`, `parent_id INT` — handles any parent record type
+- Named params only: never string-concatenate SQL — always use `@param_name` or `@p1`
 
 ---
 
@@ -952,30 +952,30 @@ workorder/
 ### CLAUDE.md Content (create this file in project root)
 
 ```markdown
-# Work Order System — Claude Code Conventions
+# Work Order System — Claude Code Conventions
 
 ## Frontend
-- ALL frontend JavaScript module files use `.mjs` extension — no exceptions
-- No build step, no npm for frontend — pure ES modules via <script type="module">
+- ALL frontend JavaScript module files use `.mjs` extension — no exceptions
+- No build step, no npm for frontend — pure ES modules via <script type="module">
 - CDN dependencies: Lucide (icons), Leaflet (maps), Chart.js (charts), Google Fonts
-- Always use CSS custom property vars — never hardcode hex colors
+- Always use CSS custom property vars — never hardcode hex colors
 - Component pattern: Shadow DOM, #private class fields, custom events with namespaces
-- Custom event naming: colon-namespaced — 'wo:select', 'steps:updated', 'auth:expired'
+- Custom event naming: colon-namespaced — 'wo:select', 'steps:updated', 'auth:expired'
 - Imports always include .mjs extension: import { api } from '../lib/api.mjs'
 
 ## Go Backend
 - Package names: lowercase single word (handlers, repository, model, service)
-- Errors: always wrap with context — fmt.Errorf("repo.Create: %w", err)
-- DB queries: named params only — @param_name, never string concat
-- HTTP errors: always JSON — {"error": "message"} with correct status code
+- Errors: always wrap with context — fmt.Errorf("repo.Create: %w", err)
+- DB queries: named params only — @param_name, never string concat
+- HTTP errors: always JSON — {"error": "message"} with correct status code
 - Logging: use log/slog with structured key-value pairs
 - Response envelope: { data: ..., meta: {...}, error: null }
 
 ## Database
-- Soft deletes only — deleted_at column, filter WHERE deleted_at IS NULL
+- Soft deletes only — deleted_at column, filter WHERE deleted_at IS NULL
 - Every table: created_at, updated_at with DEFAULT GETUTCDATE()
 - Polymorphic refs: parent_type + parent_id columns
-- All SQL in repository layer — no raw SQL in handlers or service
+- All SQL in repository layer — no raw SQL in handlers or service
 
 ## Git
 - Branches: feature/*, fix/*, chore/*
@@ -1002,25 +1002,25 @@ require (
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
-<!-- Icons — Lucide (tree-shakeable, no API key) -->
+<!-- Icons — Lucide (tree-shakeable, no API key) -->
 <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 
-<!-- Maps — Leaflet (no API key) -->
+<!-- Maps — Leaflet (no API key) -->
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
 
-<!-- Charts — Chart.js -->
+<!-- Charts — Chart.js -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
 ```
 
 ---
 
-*Start with Phase 1 in order. Each checkbox is one commit. Don't skip CLAUDE.md — it must exist before any code is written.*
+*Start with Phase 1 in order. Each checkbox is one commit. Don't skip CLAUDE.md — it must exist before any code is written.*
 
 ---
 
-# Work Order System — Technical Build Plan
-**Stack:** Go (backend API) · Pure JavaScript + Web Components (frontend) · SQL Server (MSSQL) · Docker
+# Work Order System — Technical Build Plan
+**Stack:** Go (backend API) · Pure JavaScript + Web Components (frontend) · SQL Server (MSSQL) · Docker
 
 ---
 
@@ -1031,7 +1031,7 @@ require (
 3. [Database Schema](#3-database-schema)
 4. [Go Backend](#4-go-backend)
 5. [REST API Design](#5-rest-api-design)
-6. [Frontend — Web Components](#6-frontend--web-components)
+6. [Frontend — Web Components](#6-frontend--web-components)
 7. [File & Photo Handling](#7-file--photo-handling)
 8. [Maps & Location](#8-maps--location)
 9. [Authentication & Authorization](#9-authentication--authorization)
@@ -1044,40 +1044,40 @@ require (
 ## 1. Architecture Overview
 
 ```
-┌─────────────────────────────────────────────────────────┐
-│                     Browser Client                       │
-│  ┌────────────────────────────────────────────────────┐ │
-│  │          Pure JS + Web Components SPA              │ │
-│  │  <wo-list>  <wo-form>  <wo-map>  <wo-checklist>   │ │
-│  └───────────────────┬────────────────────────────────┘ │
-└──────────────────────│──────────────────────────────────┘
-                       │ REST/JSON over HTTPS
-┌──────────────────────▼──────────────────────────────────┐
-│                    Go API Server                         │
-│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
-│  │  Router  │  │ Handlers │  │  Service │              │
-│  │  (chi)   │  │          │  │  Layer   │              │
-│  └──────────┘  └──────────┘  └──────────┘              │
-│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
-│  │   Auth   │  │  Upload  │  │  Spatial │              │
-│  │  (JWT)   │  │ Handler  │  │  Utils   │              │
-│  └──────────┘  └──────────┘  └──────────┘              │
-└──────────────────────┬──────────────────────────────────┘
-                       │ sqlx / database/sql
-┌──────────────────────▼──────────────────────────────────┐
-│              SQL Server (MSSQL)                          │
-│  work_orders · wo_resources · wo_steps · wo_attachments  │
-│  wo_accounting · wo_parents · users · resource_registry  │
-└─────────────────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────────────┐
+│                     Browser Client                       │
+│  ┌────────────────────────────────────────────────────┐ │
+│  │          Pure JS + Web Components SPA              │ │
+│  │  <wo-list>  <wo-form>  <wo-map>  <wo-checklist>   │ │
+│  └───────────────────┬────────────────────────────────┘ │
+└──────────────────────│──────────────────────────────────┘
+                       │ REST/JSON over HTTPS
+┌──────────────────────▼──────────────────────────────────┐
+│                    Go API Server                         │
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
+│  │  Router  │  │ Handlers │  │  Service │              │
+│  │  (chi)   │  │          │  │  Layer   │              │
+│  └──────────┘  └──────────┘  └──────────┘              │
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
+│  │   Auth   │  │  Upload  │  │  Spatial │              │
+│  │  (JWT)   │  │ Handler  │  │  Utils   │              │
+│  └──────────┘  └──────────┘  └──────────┘              │
+└──────────────────────┬──────────────────────────────────┘
+                       │ sqlx / database/sql
+┌──────────────────────▼──────────────────────────────────┐
+│              SQL Server (MSSQL)                          │
+│  work_orders · wo_resources · wo_steps · wo_attachments  │
+│  wo_accounting · wo_parents · users · resource_registry  │
+└─────────────────────────────────────────────────────────┘
 ```
 
 **Key decisions:**
-- **No framework on the frontend** — Custom Elements v1, Shadow DOM, ES Modules. Works in all modern browsers with zero build step.
-- **chi router** for Go — lightweight, idiomatic, stdlib-compatible middleware.
-- **sqlx** for DB access — thin wrapper over `database/sql`, named params, struct scanning.
-- **SQL Server** — matches your existing infrastructure; geography type for spatial data.
+- **No framework on the frontend** — Custom Elements v1, Shadow DOM, ES Modules. Works in all modern browsers with zero build step.
+- **chi router** for Go — lightweight, idiomatic, stdlib-compatible middleware.
+- **sqlx** for DB access — thin wrapper over `database/sql`, named params, struct scanning.
+- **SQL Server** — matches your existing infrastructure; geography type for spatial data.
 - **Multipart uploads** stored to local volume (or swap for Azure Blob / S3 later).
-- **JWT** stateless auth — fits well with a SPA + API split.
+- **JWT** stateless auth — fits well with a SPA + API split.
 
 ---
 
@@ -1085,71 +1085,71 @@ require (
 
 ```
 workorder/
-├── cmd/
-│   └── server/
-│       └── main.go              # Entry point, wires everything together
-├── internal/
-│   ├── api/
-│   │   ├── router.go            # chi router setup, middleware chain
-│   │   ├── middleware.go        # JWT, CORS, logging, recovery
-│   │   └── handlers/
-│   │       ├── workorder.go     # WO CRUD handlers
-│   │       ├── resource.go      # People / vehicle / equipment assignment
-│   │       ├── step.go          # Checklist steps
-│   │       ├── attachment.go    # Photo & file upload
-│   │       ├── accounting.go    # Accounting code endpoints
-│   │       ├── parent.go        # Parent record linking (polymorphic)
-│   │       └── auth.go          # Login / token refresh
-│   ├── service/
-│   │   ├── workorder.go         # Business logic layer
-│   │   ├── resource.go
-│   │   ├── notification.go      # Email/push when WO assigned
-│   │   └── spatial.go           # Geocoding, distance calc
-│   ├── repository/
-│   │   ├── workorder.go         # SQL queries — work orders
-│   │   ├── resource.go          # SQL queries — resources
-│   │   ├── step.go
-│   │   ├── attachment.go
-│   │   └── db.go                # sqlx connection pool setup
-│   ├── model/
-│   │   ├── workorder.go         # Structs: WorkOrder, WorkOrderSummary
-│   │   ├── resource.go          # Person, Vehicle, Equipment, Material
-│   │   ├── step.go              # Step, StepCompletion
-│   │   ├── attachment.go        # Attachment
-│   │   ├── accounting.go        # AccountingCode
-│   │   └── auth.go              # User, Claims
-│   └── config/
-│       └── config.go            # Env-based config (DB DSN, JWT secret, upload path)
-├── web/                         # Frontend — served as static files by Go
-│   ├── index.html               # Shell — loads the app component
-│   ├── app.mjs                   # <app-root> component, client-side router
-│   ├── components/
-│   │   ├── wo-list.mjs           # Work order list / search
-│   │   ├── wo-form.mjs           # Create / edit work order
-│   │   ├── wo-detail.mjs         # Read-only detail view
-│   │   ├── wo-checklist.mjs      # Step checklist with check-off
-│   │   ├── wo-resource-panel.mjs # Assign people, vehicles, equipment
-│   │   ├── wo-photo-panel.mjs    # Photo capture and gallery
-│   │   ├── wo-map.mjs            # Embedded map + directions
-│   │   ├── wo-accounting.mjs     # Accounting code fields
-│   │   ├── wo-status-badge.mjs   # Status pill (reusable)
-│   │   └── wo-timeline.mjs       # Activity / audit log
-│   ├── lib/
-│   │   ├── api.mjs               # Fetch wrapper, auth header injection
-│   │   ├── router.mjs            # Tiny hash/history router
-│   │   ├── store.mjs             # Lightweight reactive state (no Redux)
-│   │   └── utils.mjs             # Formatters, validators
-│   └── styles/
-│       ├── global.css           # CSS custom properties (design tokens)
-│       └── reset.css
-├── uploads/                     # Stored attachments (bind-mounted in Docker)
-├── migrations/
-│   ├── 001_initial_schema.sql
-│   ├── 002_resource_registry.sql
-│   └── 003_spatial_fields.sql
-├── docker-compose.yml
-├── Dockerfile
-└── .env.example
+├── cmd/
+│   └── server/
+│       └── main.go              # Entry point, wires everything together
+├── internal/
+│   ├── api/
+│   │   ├── router.go            # chi router setup, middleware chain
+│   │   ├── middleware.go        # JWT, CORS, logging, recovery
+│   │   └── handlers/
+│   │       ├── workorder.go     # WO CRUD handlers
+│   │       ├── resource.go      # People / vehicle / equipment assignment
+│   │       ├── step.go          # Checklist steps
+│   │       ├── attachment.go    # Photo & file upload
+│   │       ├── accounting.go    # Accounting code endpoints
+│   │       ├── parent.go        # Parent record linking (polymorphic)
+│   │       └── auth.go          # Login / token refresh
+│   ├── service/
+│   │   ├── workorder.go         # Business logic layer
+│   │   ├── resource.go
+│   │   ├── notification.go      # Email/push when WO assigned
+│   │   └── spatial.go           # Geocoding, distance calc
+│   ├── repository/
+│   │   ├── workorder.go         # SQL queries — work orders
+│   │   ├── resource.go          # SQL queries — resources
+│   │   ├── step.go
+│   │   ├── attachment.go
+│   │   └── db.go                # sqlx connection pool setup
+│   ├── model/
+│   │   ├── workorder.go         # Structs: WorkOrder, WorkOrderSummary
+│   │   ├── resource.go          # Person, Vehicle, Equipment, Material
+│   │   ├── step.go              # Step, StepCompletion
+│   │   ├── attachment.go        # Attachment
+│   │   ├── accounting.go        # AccountingCode
+│   │   └── auth.go              # User, Claims
+│   └── config/
+│       └── config.go            # Env-based config (DB DSN, JWT secret, upload path)
+├── web/                         # Frontend — served as static files by Go
+│   ├── index.html               # Shell — loads the app component
+│   ├── app.mjs                   # <app-root> component, client-side router
+│   ├── components/
+│   │   ├── wo-list.mjs           # Work order list / search
+│   │   ├── wo-form.mjs           # Create / edit work order
+│   │   ├── wo-detail.mjs         # Read-only detail view
+│   │   ├── wo-checklist.mjs      # Step checklist with check-off
+│   │   ├── wo-resource-panel.mjs # Assign people, vehicles, equipment
+│   │   ├── wo-photo-panel.mjs    # Photo capture and gallery
+│   │   ├── wo-map.mjs            # Embedded map + directions
+│   │   ├── wo-accounting.mjs     # Accounting code fields
+│   │   ├── wo-status-badge.mjs   # Status pill (reusable)
+│   │   └── wo-timeline.mjs       # Activity / audit log
+│   ├── lib/
+│   │   ├── api.mjs               # Fetch wrapper, auth header injection
+│   │   ├── router.mjs            # Tiny hash/history router
+│   │   ├── store.mjs             # Lightweight reactive state (no Redux)
+│   │   └── utils.mjs             # Formatters, validators
+│   └── styles/
+│       ├── global.css           # CSS custom properties (design tokens)
+│       └── reset.css
+├── uploads/                     # Stored attachments (bind-mounted in Docker)
+├── migrations/
+│   ├── 001_initial_schema.sql
+│   ├── 002_resource_registry.sql
+│   └── 003_spatial_fields.sql
+├── docker-compose.yml
+├── Dockerfile
+└── .env.example
 ```
 
 ---
@@ -1159,7 +1159,7 @@ workorder/
 ### Core Tables
 
 ```sql
--- ── Work Orders ───────────────────────────────────────────────────────────────
+-- ── Work Orders ───────────────────────────────────────────────────────────────
 CREATE TABLE work_orders (
     id              INT IDENTITY PRIMARY KEY,
     wo_number       AS ('WO-' + RIGHT('000000' + CAST(id AS VARCHAR), 6)) PERSISTED,
@@ -1193,7 +1193,7 @@ CREATE TABLE work_orders (
     CONSTRAINT chk_wo_priority CHECK (priority IN ('low','normal','high','urgent'))
 );
 
--- ── Resource Registry (master lists) ─────────────────────────────────────────
+-- ── Resource Registry (master lists) ─────────────────────────────────────────
 CREATE TABLE resource_people (
     id          INT IDENTITY PRIMARY KEY,
     name        NVARCHAR(100) NOT NULL,
@@ -1227,7 +1227,7 @@ CREATE TABLE resource_materials (
     active      BIT NOT NULL DEFAULT 1
 );
 
--- ── Work Order Resource Assignments ───────────────────────────────────────────
+-- ── Work Order Resource Assignments ───────────────────────────────────────────
 CREATE TABLE wo_resources (
     id              INT IDENTITY PRIMARY KEY,
     wo_id           INT NOT NULL REFERENCES work_orders(id) ON DELETE CASCADE,
@@ -1239,7 +1239,7 @@ CREATE TABLE wo_resources (
     CONSTRAINT chk_resource_type CHECK (resource_type IN ('person','vehicle','equipment','material'))
 );
 
--- ── Checklist Steps ───────────────────────────────────────────────────────────
+-- ── Checklist Steps ───────────────────────────────────────────────────────────
 CREATE TABLE wo_steps (
     id              INT IDENTITY PRIMARY KEY,
     wo_id           INT NOT NULL REFERENCES work_orders(id) ON DELETE CASCADE,
@@ -1253,7 +1253,7 @@ CREATE TABLE wo_steps (
     notes           NVARCHAR(MAX)           -- Field notes added at completion
 );
 
--- ── Attachments (photos, docs) ────────────────────────────────────────────────
+-- ── Attachments (photos, docs) ────────────────────────────────────────────────
 CREATE TABLE wo_attachments (
     id              INT IDENTITY PRIMARY KEY,
     wo_id           INT NOT NULL REFERENCES work_orders(id) ON DELETE CASCADE,
@@ -1270,7 +1270,7 @@ CREATE TABLE wo_attachments (
     uploaded_at     DATETIME2 NOT NULL DEFAULT GETUTCDATE()
 );
 
--- ── Accounting Codes ──────────────────────────────────────────────────────────
+-- ── Accounting Codes ──────────────────────────────────────────────────────────
 CREATE TABLE wo_accounting (
     id              INT IDENTITY PRIMARY KEY,
     wo_id           INT NOT NULL REFERENCES work_orders(id) ON DELETE CASCADE,
@@ -1280,7 +1280,7 @@ CREATE TABLE wo_accounting (
     CONSTRAINT uq_wo_accounting UNIQUE (wo_id, code_type)
 );
 
--- ── Audit Log ─────────────────────────────────────────────────────────────────
+-- ── Audit Log ─────────────────────────────────────────────────────────────────
 CREATE TABLE wo_audit_log (
     id              INT IDENTITY PRIMARY KEY,
     wo_id           INT NOT NULL REFERENCES work_orders(id) ON DELETE CASCADE,
@@ -1291,7 +1291,7 @@ CREATE TABLE wo_audit_log (
     performed_at    DATETIME2 NOT NULL DEFAULT GETUTCDATE()
 );
 
--- ── Indexes ───────────────────────────────────────────────────────────────────
+-- ── Indexes ───────────────────────────────────────────────────────────────────
 CREATE INDEX ix_wo_status       ON work_orders (status);
 CREATE INDEX ix_wo_parent       ON work_orders (parent_type, parent_id);
 CREATE INDEX ix_wo_scheduled    ON work_orders (scheduled_start);
@@ -1625,20 +1625,20 @@ func (r *WorkOrderRepo) UpdateStatus(ctx context.Context, id int, status string,
 ### Status Transition Rules (enforced server-side)
 
 ```
-draft → assigned → scheduled → in_progress → pending_review → closed
-                                           ↘ (re-open)  ↗
+draft → assigned → scheduled → in_progress → pending_review → closed
+                                           ↘ (re-open)  ↗
 ```
 
 ---
 
-## 6. Frontend — Web Components
+## 6. Frontend — Web Components
 
 ### Design Principles
 
-- **No build step** — plain `<script type="module">` imports. Works directly in browser.
-- **Shadow DOM** per component — style isolation, no CSS leakage.
-- **Custom events** for cross-component communication — no shared global state pollution.
-- **`api.mjs`** is the single HTTP layer — all fetch calls go through it.
+- **No build step** — plain `<script type="module">` imports. Works directly in browser.
+- **Shadow DOM** per component — style isolation, no CSS leakage.
+- **Custom events** for cross-component communication — no shared global state pollution.
+- **`api.mjs`** is the single HTTP layer — all fetch calls go through it.
 
 ### `web/lib/api.mjs`
 
@@ -1665,7 +1665,7 @@ async function request(method, path, body, isFormData = false) {
   });
 
   if (res.status === 401) {
-    // Token expired — redirect to login
+    // Token expired — redirect to login
     window.dispatchEvent(new CustomEvent('auth:expired'));
     return;
   }
@@ -1687,7 +1687,7 @@ export const api = {
 ### `web/lib/router.mjs`
 
 ```javascript
-// Hash-based router — no server config needed
+// Hash-based router — no server config needed
 class Router {
   #routes = [];
 
@@ -1761,7 +1761,7 @@ class WoList extends HTMLElement {
               <div class="wo-number">${wo.wo_number}</div>
               <div class="title">${wo.title}</div>
               <div class="progress">
-                ${wo.site_name}  ·  ${wo.steps_done}/${wo.step_count} steps
+                ${wo.site_name}  ·  ${wo.steps_done}/${wo.step_count} steps
               </div>
             </div>
             <wo-status-badge status="${wo.status}"></wo-status-badge>
@@ -1838,7 +1838,7 @@ class WoResourcePanel extends HTMLElement {
         <ul>
           ${assigned.map(a => `
             <li>${a.name}
-              <button class="remove-btn" data-id="${a.id}">×</button>
+              <button class="remove-btn" data-id="${a.id}">×</button>
             </li>`).join('')}
         </ul>
         <select class="add-select" data-type="${type}">
@@ -1947,7 +1947,7 @@ class WoChecklist extends HTMLElement {
 customElements.define('wo-checklist', WoChecklist);
 ```
 
-### `web/styles/global.css` — Design Tokens
+### `web/styles/global.css` — Design Tokens
 
 ```css
 :root {
@@ -2140,7 +2140,7 @@ func JWT(secret string) func(http.Handler) http.Handler {
 ### `Dockerfile`
 
 ```dockerfile
-# ── Build stage ───────────────────────────────────────────
+# ── Build stage ───────────────────────────────────────────
 FROM golang:1.23-alpine AS builder
 WORKDIR /app
 COPY go.mod go.sum ./
@@ -2148,7 +2148,7 @@ RUN go mod download
 COPY . .
 RUN CGO_ENABLED=0 go build -o workorder ./cmd/server
 
-# ── Runtime stage ─────────────────────────────────────────
+# ── Runtime stage ─────────────────────────────────────────
 FROM alpine:3.20
 WORKDIR /app
 RUN apk add --no-cache tzdata ca-certificates
@@ -2200,7 +2200,7 @@ If you're connecting to your **existing SQL Server** instance, just point `DB_DS
 
 ## 11. Phased Build Plan
 
-### Phase 1 — Foundation (Weeks 1–4)
+### Phase 1 — Foundation (Weeks 1–4)
 
 **Goal:** Working CRUD with project linking and status flow.
 
@@ -2209,13 +2209,13 @@ If you're connecting to your **existing SQL Server** instance, just point `DB_DS
 - [ ] Auth: login endpoint, JWT middleware, user table
 - [ ] Work Order CRUD endpoints (list, get, create, update, status)
 - [ ] Frontend shell: `index.html`, router, `api.mjs`, global CSS
-- [ ] `<wo-list>` — list with search + filter by status
-- [ ] `<wo-form>` — create / edit form with all base fields
-- [ ] `<wo-status-badge>` — reusable status pill
+- [ ] `<wo-list>` — list with search + filter by status
+- [ ] `<wo-form>` — create / edit form with all base fields
+- [ ] `<wo-status-badge>` — reusable status pill
 - [ ] Docker Compose working locally
 - [ ] Basic role checking (admin vs viewer)
 
-### Phase 2 — Field Features (Weeks 5–8)
+### Phase 2 — Field Features (Weeks 5–8)
 
 **Goal:** Everything a field crew needs on their phone.
 
@@ -2224,17 +2224,17 @@ If you're connecting to your **existing SQL Server** instance, just point `DB_DS
 - [ ] Resource registry endpoints + `<wo-resource-panel>` picker
 - [ ] DB: `wo_attachments` table
 - [ ] Photo upload endpoint with GPS extraction
-- [ ] `<wo-photo-panel>` — capture, gallery, before/during/after phases
-- [ ] `<wo-map>` — Leaflet map + site pin
+- [ ] `<wo-photo-panel>` — capture, gallery, before/during/after phases
+- [ ] `<wo-map>` — Leaflet map + site pin
 - [ ] Directions button (native maps deeplink)
 - [ ] Mobile-responsive layout (CSS Grid, touch-friendly targets)
 
-### Phase 3 — Integrations (Weeks 9–12)
+### Phase 3 — Integrations (Weeks 9–12)
 
 **Goal:** Connects to the rest of the system.
 
 - [ ] DB: `wo_accounting` table
-- [ ] `<wo-accounting>` — GL, cost center, WBS, billing ref fields
+- [ ] `<wo-accounting>` — GL, cost center, WBS, billing ref fields
 - [ ] Parent linking: polymorphic `parent_type`/`parent_id`
 - [ ] Link WOs to existing Projects (query existing project IDs)
 - [ ] Link to Trouble Tickets / Service Orders (when those APIs exist)
@@ -2242,9 +2242,9 @@ If you're connecting to your **existing SQL Server** instance, just point `DB_DS
 - [ ] Email notification on assignment (Go `net/smtp` or SendGrid)
 - [ ] Reporting endpoint: WOs by status, by cost center, by date range
 
-### Phase 4 — Optimization (Week 13+)
+### Phase 4 — Optimization (Week 13+)
 
-- [ ] Dashboard `<wo-dashboard>` — KPI cards + charts (Chart.mjs via CDN)
+- [ ] Dashboard `<wo-dashboard>` — KPI cards + charts (Chart.mjs via CDN)
 - [ ] Crew scheduling calendar view
 - [ ] Offline support (Service Worker + IndexedDB cache for field use)
 - [ ] CSV / Excel export for accounting reconciliation
@@ -2261,7 +2261,7 @@ If you're connecting to your **existing SQL Server** instance, just point `DB_DS
 Packages:     lowercase, single word  (handlers, repository, model)
 Errors:       always wrapped          (fmt.Errorf("repo.Create: %w", err))
 HTTP errors:  JSON envelope           {"error": "message"} with correct status code
-DB queries:   named params only       @param_name — never string concat
+DB queries:   named params only       @param_name — never string concat
 Logging:      log/slog                structured key-value pairs
 Tests:        _test.go files          table-driven, httptest.NewRecorder for handlers
 ```
@@ -2280,10 +2280,10 @@ State:        component-local            lift to app-root only when truly shared
 ### Git Branch Strategy
 
 ```
-main          — production-ready, tagged releases
-develop       — integration branch
-feature/*     — individual features (feature/wo-checklist)
-fix/*         — bug fixes
+main          — production-ready, tagged releases
+develop       — integration branch
+feature/*     — individual features (feature/wo-checklist)
+fix/*         — bug fixes
 ```
 
 ---
@@ -2314,1027 +2314,6 @@ require (
 
 Zero build tooling. Zero npm for the frontend. Open in browser and go.
 
-# Work Order System — Build TODO
-> Hand this file to Claude Code. All frontend files use `.mjs` extensions.
-> Stack: Go · Pure JS + Web Components · SQL Server · Docker
-
----
-
-## Table of Contents
-- [Design System](#design-system)
-- [Project Structure](#project-structure)
-- [Phase 1 — Foundation](#phase-1--foundation)
-- [Phase 2 — Field Features](#phase-2--field-features)
-- [Phase 3 — Integrations & Admin](#phase-3--integrations--admin)
-- [Phase 4 — Polish & Optimization](#phase-4--polish--optimization)
-- [Component Inventory](#component-inventory)
-- [API Endpoints](#api-endpoints)
-- [Database Schema](#database-schema)
-- [Conventions](#conventions)
-
----
-
-## Design System
-
-### Color Palette
-```css
-:root {
-  /* Brand */
-  --navy:       #0D2137;   /* Primary dark — sidebar, headers */
-  --teal:       #0A7EA4;   /* Primary accent — buttons, links, active states */
-  --teal-lt:    #14B8D4;   /* Light accent — hover states, highlights */
-  --teal-dk:    #075E7A;   /* Dark accent — pressed states */
-
-  /* Surfaces */
-  --bg:         #F0F6FA;   /* Page background */
-  --surface:    #FFFFFF;   /* Cards, panels */
-  --surface-2:  #E8F0F5;   /* Inset areas, table stripes */
-  --sidebar-bg: #0D2137;   /* Sidebar background */
-  --sidebar-hover: #153248;
-  --sidebar-active: #0A7EA4;
-
-  /* Text */
-  --text:       #1A2E3B;   /* Primary text */
-  --text-muted: #64748B;   /* Secondary / helper text */
-  --text-inv:   #FFFFFF;   /* Text on dark backgrounds */
-
-  /* Semantic */
-  --success:    #1D9D6C;
-  --warning:    #E07B39;
-  --danger:     #C0392B;
-  --info:       #0A7EA4;
-
-  /* Borders & Shadows */
-  --border:     #D1DDE6;
-  --border-lt:  #E8F0F5;
-  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
-  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
-  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
-
-  /* Status Pills */
-  --status-draft:          #94A3B8;
-  --status-assigned:       #0A7EA4;
-  --status-scheduled:      #8B5CF6;
-  --status-in_progress:    #E07B39;
-  --status-pending_review: #D97706;
-  --status-closed:         #1D9D6C;
-
-  /* Priority */
-  --priority-low:    #64748B;
-  --priority-normal: #0A7EA4;
-  --priority-high:   #E07B39;
-  --priority-urgent: #C0392B;
-
-  /* Spacing */
-  --radius-sm:  4px;
-  --radius:     8px;
-  --radius-lg:  12px;
-  --radius-xl:  16px;
-
-  /* Sidebar width */
-  --sidebar-w:  260px;
-  --sidebar-collapsed: 64px;
-}
-```
-
-### Typography
-Load via `<link>` in `index.html` — no build step needed:
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-```
-
-```css
-:root {
-  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
-
-  --text-xs:   0.70rem;   /* 11px — labels, caps */
-  --text-sm:   0.813rem;  /* 13px — helper, meta */
-  --text-base: 0.938rem;  /* 15px — body */
-  --text-md:   1.063rem;  /* 17px — subheadings */
-  --text-lg:   1.25rem;   /* 20px — section headers */
-  --text-xl:   1.5rem;    /* 24px — page titles */
-  --text-2xl:  2rem;      /* 32px — dashboard hero numbers */
-
-  --weight-normal:   400;
-  --weight-medium:   500;
-  --weight-semibold: 600;
-  --weight-bold:     700;
-}
-```
-
-### Component Design Patterns
-- Cards: white background, `var(--border)` border, `var(--radius)` corners, `var(--shadow-sm)`
-- Buttons: filled primary = `--teal`, ghost = transparent + `--teal` border, danger = `--danger`
-- Inputs: `--border` border, focus ring `--teal` 2px outline-offset, `--radius-sm` corners
-- Tables: header row `--surface-2`, alternating rows, sticky header on scroll
-- Status pills: colored dot + label, pill shape, light background tint of the status color
-- Icon + label pattern everywhere — use Lucide icons loaded via CDN (no npm)
-
-### Icons
-```html
-<!-- index.html — Lucide icon CDN, no API key, tree-shakeable -->
-<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
-```
-Call `lucide.createIcons()` after each render. Use named icons:
-`clipboard-list`, `users`, `truck`, `wrench`, `map-pin`, `camera`, `file-invoice`,
-`layout-dashboard`, `settings`, `bell`, `chevron-left`, `plus`, `search`, `filter`
-
----
-
-## Project Structure
-
-```
-workorder/
-├── CLAUDE.md                        ← !! READ FIRST — conventions for Claude Code
-├── cmd/server/main.go
-├── internal/
-│   ├── api/
-│   │   ├── router.go
-│   │   ├── middleware/
-│   │   │   ├── auth.go
-│   │   │   ├── cors.go
-│   │   │   └── logger.go
-│   │   └── handlers/
-│   │       ├── auth.go
-│   │       ├── workorder.go
-│   │       ├── step.go
-│   │       ├── resource.go
-│   │       ├── attachment.go
-│   │       ├── accounting.go
-│   │       ├── user.go
-│   │       ├── registry.go          ← people/vehicle/equipment/material master lists
-│   │       ├── dashboard.go
-│   │       └── report.go
-│   ├── service/
-│   │   ├── workorder.go
-│   │   ├── notification.go
-│   │   ├── spatial.go
-│   │   └── export.go               ← CSV/Excel export
-│   ├── repository/
-│   │   ├── db.go
-│   │   ├── workorder.go
-│   │   ├── step.go
-│   │   ├── resource.go
-│   │   ├── attachment.go
-│   │   ├── accounting.go
-│   │   ├── user.go
-│   │   └── registry.go
-│   ├── model/
-│   │   ├── workorder.go
-│   │   ├── step.go
-│   │   ├── resource.go
-│   │   ├── attachment.go
-│   │   ├── accounting.go
-│   │   ├── user.go
-│   │   └── dashboard.go
-│   └── config/config.go
-│
-├── web/                             ← All frontend — served as static files by Go
-│   ├── index.html                   ← App shell, loads fonts, Lucide, Leaflet
-│   ├── app.mjs                      ← <app-root> custom element + client router
-│   │
-│   ├── components/
-│   │   ├── layout/
-│   │   │   ├── app-sidebar.mjs      ← Left nav — collapsible, mobile drawer
-│   │   │   ├── app-topbar.mjs       ← Top bar — breadcrumb, notifications bell, user avatar
-│   │   │   ├── app-root.mjs         ← Shell that wires sidebar + topbar + <main>
-│   │   │   └── app-mobile-nav.mjs   ← Bottom tab bar for mobile (≤768px)
-│   │   │
-│   │   ├── work-orders/
-│   │   │   ├── wo-list.mjs          ← Searchable, filterable WO list
-│   │   │   ├── wo-kanban.mjs        ← Kanban board view (by status column)
-│   │   │   ├── wo-form.mjs          ← Create / edit full form
-│   │   │   ├── wo-detail.mjs        ← Read-only detail — tabs for each section
-│   │   │   ├── wo-checklist.mjs     ← Step checklist with check-off + progress bar
-│   │   │   ├── wo-resource-panel.mjs← Assign people, vehicles, equipment, materials
-│   │   │   ├── wo-photo-panel.mjs   ← Photo gallery, capture, before/during/after
-│   │   │   ├── wo-map.mjs           ← Leaflet map + directions button
-│   │   │   ├── wo-accounting.mjs    ← GL, cost center, WBS, billing ref fields
-│   │   │   ├── wo-timeline.mjs      ← Audit/activity log feed
-│   │   │   └── wo-print.mjs         ← Print-friendly layout for field packets
-│   │   │
-│   │   ├── dashboard/
-│   │   │   ├── dash-root.mjs        ← Dashboard page shell
-│   │   │   ├── dash-kpi-card.mjs    ← Reusable stat card (number + trend + icon)
-│   │   │   ├── dash-status-chart.mjs← Doughnut chart — WOs by status
-│   │   │   ├── dash-priority-bar.mjs← Bar chart — WOs by priority
-│   │   │   └── dash-recent-feed.mjs ← Recent activity feed
-│   │   │
-│   │   ├── registry/
-│   │   │   ├── people-list.mjs      ← Manage crew / technician records
-│   │   │   ├── people-form.mjs
-│   │   │   ├── vehicle-list.mjs     ← Manage fleet / vehicles
-│   │   │   ├── vehicle-form.mjs
-│   │   │   ├── equipment-list.mjs   ← Manage tools & equipment
-│   │   │   ├── equipment-form.mjs
-│   │   │   ├── material-list.mjs    ← Manage materials / inventory
-│   │   │   └── material-form.mjs
-│   │   │
-│   │   ├── users/
-│   │   │   ├── user-list.mjs        ← User management (admin only)
-│   │   │   ├── user-form.mjs        ← Create / edit user, assign role
-│   │   │   └── user-profile.mjs     ← Current user profile + password change
-│   │   │
-│   │   ├── reports/
-│   │   │   ├── report-root.mjs      ← Reports landing page
-│   │   │   ├── report-by-status.mjs
-│   │   │   ├── report-by-cost.mjs
-│   │   │   └── report-export.mjs    ← CSV / Excel download triggers
-│   │   │
-│   │   └── shared/
-│   │       ├── ui-badge.mjs         ← <ui-badge> — status + priority pills
-│   │       ├── ui-button.mjs        ← <ui-button> — primary/ghost/danger variants
-│   │       ├── ui-card.mjs          ← <ui-card> — surface container
-│   │       ├── ui-dialog.mjs        ← <ui-dialog> — modal with backdrop
-│   │       ├── ui-drawer.mjs        ← <ui-drawer> — slide-in panel (mobile forms)
-│   │       ├── ui-toast.mjs         ← <ui-toast> — success/error notifications
-│   │       ├── ui-spinner.mjs       ← <ui-spinner> — loading state
-│   │       ├── ui-empty.mjs         ← <ui-empty> — empty state illustration + CTA
-│   │       ├── ui-confirm.mjs       ← <ui-confirm> — "Are you sure?" dialog
-│   │       ├── ui-search.mjs        ← <ui-search> — debounced search input
-│   │       ├── ui-tabs.mjs          ← <ui-tabs> — tab bar + panels
-│   │       ├── ui-avatar.mjs        ← <ui-avatar> — initials or photo avatar
-│   │       └── ui-tooltip.mjs       ← <ui-tooltip> — hover tooltip
-│   │
-│   ├── lib/
-│   │   ├── api.mjs                  ← Fetch wrapper, auth header, error handling
-│   │   ├── router.mjs               ← Hash/history client router
-│   │   ├── store.mjs                ← Reactive state (lightweight signal pattern)
-│   │   ├── auth.mjs                 ← JWT storage, decode, role checks
-│   │   ├── format.mjs               ← Date, currency, phone formatters
-│   │   ├── validate.mjs             ← Form field validators
-│   │   └── utils.mjs                ← Misc helpers, debounce, deepMerge
-│   │
-│   └── styles/
-│       ├── global.css               ← CSS custom properties (design tokens above)
-│       ├── reset.css                ← Modern CSS reset
-│       ├── typography.css           ← Base font rules
-│       ├── forms.css                ← Shared input/select/textarea styles
-│       ├── tables.css               ← Shared table styles
-│       └── print.css               ← Print overrides for wo-print.mjs
-│
-├── migrations/
-│   ├── 001_initial.sql
-│   ├── 002_resources.sql
-│   ├── 003_attachments.sql
-│   ├── 004_accounting.sql
-│   ├── 005_users_roles.sql
-│   └── 006_audit_log.sql
-│
-├── uploads/                         ← Bind-mounted in Docker
-├── Dockerfile
-├── docker-compose.yml
-├── .env.example
-└── go.mod
-```
-
----
-
-## Phase 1 — Foundation
-**Goal:** Running app with shell, sidebar, auth, and WO CRUD.
-
-### 1.1 CLAUDE.md (create first)
-- [ ] Document `.mjs` extension convention for all frontend JS modules
-- [ ] Document Go conventions: package names, error wrapping, named DB params
-- [ ] Document CSS convention: always use design token vars, never hardcoded hex
-- [ ] Document component convention: Shadow DOM, `#private` fields, custom events
-- [ ] List all CDN dependencies and their globals (`L` for Leaflet, `lucide`, `Chart`)
-
-### 1.2 Go Project Bootstrap
-- [ ] `go mod init github.com/yourorg/workorder`
-- [ ] Add dependencies: `chi/v5`, `sqlx`, `go-mssqldb`, `golang-jwt/jwt/v5`, `google/uuid`, `joho/godotenv`
-- [ ] `internal/config/config.go` — load from env: `ADDR`, `DB_DSN`, `JWT_SECRET`, `UPLOAD_PATH`, `BASE_URL`
-- [ ] `internal/repository/db.go` — `sqlx.Connect`, pool settings (max open 25, max idle 5, lifetime 5min)
-- [ ] `cmd/server/main.go` — wire config → db → router → `http.ListenAndServe`
-
-### 1.3 Database — Migration 001
-```sql
--- work_orders table (full schema as planned)
--- Computed wo_number column: 'WO-' + zero-padded id
--- status CHECK constraint
--- priority CHECK constraint
--- Indexes on status, parent, scheduled_start
-```
-
-### 1.4 Auth
-- [ ] `migrations/005_users_roles.sql`
-  ```sql
-  CREATE TABLE users (
-      id           INT IDENTITY PRIMARY KEY,
-      username     NVARCHAR(100) NOT NULL UNIQUE,
-      email        NVARCHAR(200) NOT NULL UNIQUE,
-      display_name NVARCHAR(200),
-      password_hash NVARCHAR(200) NOT NULL,   -- bcrypt
-      role         NVARCHAR(30) NOT NULL DEFAULT 'viewer',
-                   -- admin | dispatcher | field_tech | viewer
-      avatar_url   NVARCHAR(500),
-      active       BIT NOT NULL DEFAULT 1,
-      last_login   DATETIME2,
-      created_at   DATETIME2 NOT NULL DEFAULT GETUTCDATE()
-  );
-  -- Seed one admin user
-  ```
-- [ ] `POST /api/auth/login` — bcrypt compare, return `{ token, user }` with 8hr JWT
-- [ ] `POST /api/auth/refresh` — accepts valid token, returns new token
-- [ ] `GET /api/auth/me` — current user from token claims
-- [ ] JWT middleware: attach user to `context.Context`, return 401 JSON on failure
-- [ ] Role helper: `RequireRole(roles ...string)` middleware
-
-### 1.5 Work Order Backend (CRUD)
-- [ ] `model/workorder.go` — `WorkOrder`, `WorkOrderListItem`, `WorkOrderDetail` structs with `db:` and `json:` tags
-- [ ] `repository/workorder.go`
-    - `List(ctx, filters)` — status, search, priority, parentType, page/limit
-    - `GetByID(ctx, id)` — single WO
-    - `Create(ctx, wo)` — insert + return generated ID
-    - `Update(ctx, wo)` — partial update, always set `updated_at = GETUTCDATE()`
-    - `UpdateStatus(ctx, id, status, userID)` — transition + audit log insert
-    - `Delete(ctx, id)` — soft delete (add `deleted_at` column)
-    - `GetDetail(ctx, id)` — joins WO + steps + resources + attachments + accounting in one call
-- [ ] Handlers: `List`, `Get`, `Create`, `Update`, `Delete`, `UpdateStatus`
-- [ ] Paginated response: `{ data: [...], meta: { page, per_page, total } }`
-
-### 1.6 Frontend Shell
-- [ ] `web/index.html`
-    - Load Google Fonts (Inter + JetBrains Mono)
-    - Load Lucide CDN
-    - Load Leaflet CSS + JS CDN
-    - Load Chart.js CDN
-    - `<script type="module" src="app.mjs">`
-    - Viewport meta tag: `width=device-width, initial-scale=1`
-
-- [ ] `web/styles/reset.css` — modern reset (box-sizing, margin 0, img max-width)
-- [ ] `web/styles/global.css` — all design tokens, base body/font rules
-- [ ] `web/styles/forms.css` — input, select, textarea, label, fieldset base styles
-- [ ] `web/lib/api.mjs` — fetch wrapper, auto-inject `Authorization`, handle 401 → emit `auth:expired`
-- [ ] `web/lib/auth.mjs` — `getToken()`, `setToken()`, `clearToken()`, `getUser()`, `hasRole()`
-- [ ] `web/lib/router.mjs` — hash router, `on(pattern, handler)`, `navigate(path)`, `start()`
-- [ ] `web/lib/format.mjs` — `formatDate()`, `formatDateTime()`, `formatRelative()`, `formatPhone()`
-- [ ] `web/lib/store.mjs` — reactive signal: `createStore(initial)` returns `{ get, set, subscribe }`
-
-### 1.7 Sidebar Layout
-- [ ] **`web/components/layout/app-sidebar.mjs`**
-    - Dark navy background (`var(--sidebar-bg)`)
-    - Top: app logo / wordmark
-    - Nav items with Lucide icon + label (see nav items below)
-    - Active item: left accent bar + `--teal` background
-    - Hover: `--sidebar-hover` background, smooth transition
-    - Bottom: current user avatar + name + logout button
-    - **Collapsible:** click toggle collapses to icon-only mode (`--sidebar-collapsed` width)
-    - Collapse state stored in `localStorage`
-    - Collapsed: show only icons with `<ui-tooltip>` on hover showing label
-
-- [ ] **Nav items (in order):**
-  ```
-  ─── Main ────────────────
-  Dashboard        /          (layout-dashboard icon)
-  Work Orders      /work-orders (clipboard-list icon)
-  ─── Resources ───────────
-  People           /registry/people  (users icon)
-  Vehicles         /registry/vehicles (truck icon)
-  Equipment        /registry/equipment (wrench icon)
-  Materials        /registry/materials (package icon)
-  ─── Operations ──────────
-  Reports          /reports   (bar-chart-2 icon)
-  ─── Admin ────────────────  (only shown if role = admin)
-  Users            /users     (user-cog icon)
-  Settings         /settings  (settings icon)
-  ```
-
-- [ ] **`web/components/layout/app-topbar.mjs`**
-    - Left: hamburger menu button (mobile) / breadcrumb (desktop)
-    - Right: notification bell with unread count badge, user avatar dropdown
-    - Dropdown: "My Profile", "Change Password", divider, "Sign Out"
-    - Topbar is fixed/sticky at top, `z-index` above content
-
-- [ ] **`web/components/layout/app-mobile-nav.mjs`**
-    - Fixed bottom tab bar on screens ≤ 768px
-    - Show 5 main items: Dashboard, Work Orders, People, Reports, Menu (opens drawer)
-    - Active tab: `--teal` color + underline indicator
-    - Safe area padding for iOS notch: `padding-bottom: env(safe-area-inset-bottom)`
-
-- [ ] **`web/components/layout/app-root.mjs`**
-    - Orchestrates sidebar + topbar + `<main>` content slot
-    - Desktop: sidebar left, content fills remaining width
-    - Mobile: sidebar hidden (drawer), topbar + bottom tab bar
-    - CSS Grid layout:
-      ```css
-      /* Desktop */
-      display: grid;
-      grid-template-columns: var(--sidebar-w) 1fr;
-      grid-template-rows: 56px 1fr;
-  
-      /* Mobile ≤768px */
-      grid-template-columns: 1fr;
-      grid-template-rows: 56px 1fr 56px;
-      ```
-
-- [ ] **`web/app.mjs`**
-    - Register all components
-    - Initialize router: map hash routes to `<main>` innerHTML swaps
-    - Listen for `auth:expired` → clear token → navigate to `/login`
-
-### 1.8 Shared UI Components (needed in Phase 1)
-- [ ] **`ui-badge.mjs`** — status & priority pills
-  ```html
-  <ui-badge type="status" value="in_progress">In Progress</ui-badge>
-  <ui-badge type="priority" value="urgent">Urgent</ui-badge>
-  ```
-  Colored dot + label, background is 15% opacity of the status color
-
-- [ ] **`ui-button.mjs`** — `variant="primary|ghost|danger|icon"`, `size="sm|md|lg"`, `loading` attr shows spinner
-- [ ] **`ui-spinner.mjs`** — CSS animated ring, `size` attr
-- [ ] **`ui-toast.mjs`** — fixed top-right, slide-in animation, auto-dismiss after 4s, `type="success|error|info"`
-- [ ] **`ui-empty.mjs`** — centered illustration + heading + body + optional CTA button
-- [ ] **`ui-dialog.mjs`** — `<dialog>` element, backdrop, close on Escape + backdrop click, `size="sm|md|lg"`
-
-### 1.9 WO List Page
-- [ ] **`wo-list.mjs`**
-    - Page header: "Work Orders" title + "New Work Order" primary button
-    - Filter bar: search input, status dropdown, priority dropdown, date range pickers
-    - View toggle: List view | Kanban view (icon buttons, remember choice in localStorage)
-    - **List view:** table on desktop, card stack on mobile
-        - Columns: WO#, Title, Site, Status, Priority, Scheduled, Steps progress, Photos count, Actions
-        - Row click → navigate to detail
-        - Actions column: Edit (pencil), delete (trash, confirm dialog)
-        - Sticky header, sortable columns (client-side sort for Phase 1)
-    - Loading: skeleton rows (CSS animation, not a spinner)
-    - Empty state: `<ui-empty>` with clipboard illustration + "Create your first Work Order"
-    - Pagination: page controls at bottom
-
-- [ ] **`wo-kanban.mjs`**
-    - Columns: Draft | Assigned | Scheduled | In Progress | Pending Review | Closed
-    - Each column header: status color + count badge
-    - Cards: WO#, title, site name, priority badge, assignee avatars, step progress bar
-    - Horizontal scroll on mobile (each column is scrollable vertically)
-    - Drag-and-drop to change status (HTML5 drag API, no lib needed)
-
-### 1.10 WO Form Page
-- [ ] **`wo-form.mjs`** — used for both Create and Edit
-    - Page header: "New Work Order" or "Edit WO-000123" + breadcrumb
-    - Layout: two-column on desktop (`grid-template-columns: 2fr 1fr`), single column mobile
-    - **Left column — main fields:**
-        - Title (required, full width)
-        - Description (textarea, 3 rows)
-        - Instructions (textarea, 5 rows — will become rich text in Phase 4)
-        - Site Name
-        - Address (with optional geocode button → fills Lat/Lng)
-        - Lat / Lng (read-only display, set by geocoder or map click)
-        - Access Notes (gate codes, road conditions)
-    - **Right column — metadata:**
-        - Status (select)
-        - Priority (select with colored indicator)
-        - Parent Type (select: None / Project / Trouble Ticket / Service Order)
-        - Parent ID (text field, shown only when parent type selected)
-        - Scheduled Start (datetime-local input)
-        - Scheduled End (datetime-local input)
-    - Footer: Cancel (ghost) | Save Draft | Save & Open (primary)
-    - Validation: highlight invalid fields, scroll to first error, toast on success
-    - Unsaved-changes guard: warn before navigating away if form is dirty
-
-### 1.11 WO Detail Page
-- [ ] **`wo-detail.mjs`** — tabbed layout
-    - Header section: WO number (mono font), title, status badge, priority badge
-    - Metadata strip: site, scheduled date, created by, parent link (clickable)
-    - Action buttons: Edit, Print, Change Status (dropdown), Close WO
-    - Tabs: **Overview | Checklist | Resources | Photos | Accounting | Activity**
-    - Each tab is its own component loaded lazily when tab is clicked
-    - Tab indicator: `--teal` underline, smooth slide transition
-
----
-
-## Phase 2 — Field Features
-**Goal:** Everything a crew needs on their phone in the field.
-
-### 2.1 Database Migrations
-- [ ] `002_resources.sql` — `wo_steps`, `wo_resources`, `resource_people`, `resource_vehicles`, `resource_equipment`, `resource_materials`
-- [ ] `003_attachments.sql` — `wo_attachments`
-
-### 2.2 Checklist / Steps
-**Backend:**
-- [ ] `GET /api/work-orders/{id}/steps` — ordered list
-- [ ] `POST /api/work-orders/{id}/steps` — add step `{ title, description, step_order, required }`
-- [ ] `PUT /api/work-orders/{id}/steps/{sid}` — edit step (title, description, reorder)
-- [ ] `PUT /api/work-orders/{id}/steps/reorder` — bulk reorder `{ steps: [{id, order}] }`
-- [ ] `POST /api/work-orders/{id}/steps/{sid}/complete` — check off, record `completed_by`, `completed_at`, optional `notes`
-- [ ] `POST /api/work-orders/{id}/steps/{sid}/uncomplete` — undo check (dispatcher+ only)
-- [ ] `DELETE /api/work-orders/{id}/steps/{sid}`
-
-**Frontend `wo-checklist.mjs`:**
-- [ ] Progress bar at top: `X of Y steps complete` with animated fill
-- [ ] Each step row:
-    - Checkbox (large, touch-friendly — min 44px tap target)
-    - Step number + title (strikethrough when complete)
-    - Description (collapsed, expand on tap)
-    - "Add note" button → inline textarea for completion note
-    - Photo camera button → triggers photo capture attached to this step
-    - Completed by + timestamp (shown when done, muted)
-- [ ] Add Step form at bottom: title field + optional description + Add button
-- [ ] Drag handle for reordering (desktop; long-press on mobile)
-- [ ] Steps auto-saved — no save button, immediate API call on check
-- [ ] If all steps complete → confetti animation + prompt to move status to Pending Review
-
-### 2.3 Resource Registry (Master Lists)
-**Backend:**
-- [ ] `GET /api/registry/people?search=&active=true` — paginated list
-- [ ] `POST /api/registry/people` — create person record
-- [ ] `PUT /api/registry/people/{id}` — update
-- [ ] `DELETE /api/registry/people/{id}` — soft delete (set `active = 0`)
-- [ ] Same CRUD for `/registry/vehicles`, `/registry/equipment`, `/registry/materials`
-
-**Frontend — People (`people-list.mjs`, `people-form.mjs`):**
-- [ ] List page: avatar + name + role + phone + email + active badge + edit/deactivate actions
-- [ ] Form fields: display name, role/title, email, phone, notes, active toggle
-- [ ] Avatar: show initials in colored circle (hash name to color), or upload photo
-
-**Frontend — Vehicles (`vehicle-list.mjs`, `vehicle-form.mjs`):**
-- [ ] List: unit number, description, type, license plate, active status
-- [ ] Form fields: unit number, description, vehicle type (bucket truck / van / trailer / other), license plate, notes, active toggle
-
-**Frontend — Equipment (`equipment-list.mjs`, `equipment-form.mjs`):**
-- [ ] List: name, asset tag, category, last assigned WO, active status
-- [ ] Form fields: name, asset tag, category (fusion splicer / OTDR / blower / reel / other), serial number, notes, active toggle
-
-**Frontend — Materials (`material-list.mjs`, `material-form.mjs`):**
-- [ ] List: name, part number, unit of measure, active status
-- [ ] Form fields: name, part number, unit (ft / ea / box / roll), notes, active toggle
-
-### 2.4 Resource Assignment Panel
-**Backend:**
-- [ ] `GET /api/work-orders/{id}/resources`
-- [ ] `POST /api/work-orders/{id}/resources` — `{ resource_type, resource_id, quantity?, notes? }`
-- [ ] `DELETE /api/work-orders/{id}/resources/{rid}`
-- [ ] `GET /api/registry/people?search=` — for typeahead pickers
-
-**Frontend `wo-resource-panel.mjs`:**
-- [ ] Four sections: People · Vehicles · Equipment · Materials
-- [ ] Each section:
-    - Assigned list: avatar/icon + name + remove (×) button
-    - "Add" button → opens `<ui-dialog>` with searchable picker
-    - Picker: search input + scrollable list with checkboxes → "Add Selected" button
-    - Materials: quantity field next to each assigned item
-- [ ] Empty section shows `<ui-empty>` inline: "No people assigned yet"
-- [ ] Changes reflect immediately, API call on each add/remove
-- [ ] Total counts shown in section header: "People (3)"
-
-### 2.5 Photo Panel
-**Backend:**
-- [ ] `POST /api/work-orders/{id}/attachments` — multipart, fields: `file`, `phase`, `caption`, `step_id?`
-- [ ] `GET /api/work-orders/{id}/attachments`
-- [ ] `PUT /api/work-orders/{id}/attachments/{aid}` — update caption/phase
-- [ ] `DELETE /api/work-orders/{id}/attachments/{aid}`
-- [ ] Extract EXIF GPS on server if present in JPEG
-- [ ] Generate thumbnail on upload (use `imaging` Go package, 400px wide JPEG)
-- [ ] Serve originals at `/uploads/{path}`, thumbs at `/uploads/thumbs/{path}`
-
-**Frontend `wo-photo-panel.mjs`:**
-- [ ] Phase tabs at top: **All · Before · During · After** — filter photos by phase
-- [ ] Photo grid: 3 columns desktop, 2 columns tablet, 2 columns mobile
-- [ ] Each photo tile: thumbnail, hover overlay with caption + phase badge
-- [ ] Click → lightbox modal with full-size image, prev/next arrows, swipe on mobile
-- [ ] Upload button:
-    - Desktop: file picker (multi-select, drag-and-drop zone)
-    - Mobile: `<input type="file" accept="image/*" capture="environment">` for camera
-- [ ] Upload flow: show thumbnail preview + phase selector + caption field before confirm
-- [ ] Upload progress: per-file progress bar, queue multiple uploads
-- [ ] Geo-tagged indicator: small pin icon if lat/lng present
-- [ ] Empty state per phase: "No 'before' photos yet — capture site condition before starting"
-
-### 2.6 Map & Location
-**Backend:**
-- [ ] `GET /api/work-orders/{id}/location` — return `{ lat, lng, address, site_name, access_notes }`
-- [ ] `PUT /api/work-orders/{id}/location` — update coordinates + address
-
-**Frontend `wo-map.mjs`:**
-- [ ] Leaflet map, 300px height (expandable to full-screen on mobile)
-- [ ] OpenStreetMap tile layer (no API key)
-- [ ] Custom pin: teal SVG marker with WO number label
-- [ ] "Get Directions" button → deeplink:
-    - iOS: `maps://maps.apple.com/?daddr={lat},{lng}`
-    - Android/other: `https://maps.google.com/maps?daddr={lat},{lng}`
-- [ ] "Set Location" mode: click map to drop pin → updates lat/lng fields in WO form
-- [ ] Geocode button in WO form: type address → calls OpenStreetMap Nominatim → fills lat/lng (free, no key)
-- [ ] Access notes shown below map in an info box with lock icon
-
-### 2.7 Mobile Responsiveness Audit
-- [ ] All tap targets ≥ 44×44px
-- [ ] No horizontal scroll on any page at 375px width
-- [ ] Forms: single column, full-width inputs
-- [ ] Tables: horizontal scroll container or card-based list on mobile
-- [ ] Sidebar: hidden, accessible via hamburger → slides in as drawer with backdrop
-- [ ] Bottom nav `app-mobile-nav.mjs` visible on ≤ 768px, hidden on desktop
-- [ ] Photo capture uses `capture="environment"` on mobile
-- [ ] Map "Get Directions" opens native maps app
-- [ ] Dialogs: full-screen on mobile (`position: fixed; inset: 0`)
-- [ ] Test breakpoints: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1024px, 1440px
-
----
-
-## Phase 3 — Integrations & Admin
-
-### 3.1 Accounting Codes
-**Backend:**
-- [ ] `004_accounting.sql` — `wo_accounting` table (wo_id, code_type, code_value, description)
-- [ ] `GET /api/work-orders/{id}/accounting`
-- [ ] `PUT /api/work-orders/{id}/accounting` — upsert all codes in one request `[{ code_type, code_value, description }]`
-
-**Frontend `wo-accounting.mjs`:**
-- [ ] Four fields in a clean two-column grid:
-    - GL Account Code (text + description)
-    - Cost Center / Department (text + description)
-    - Project WBS / Phase (text + description)
-    - Billing Reference (text + description)
-- [ ] Each field: code input + description input on same row
-- [ ] Auto-save on blur (no save button)
-- [ ] Show "auto-populated from parent" chip if code came from parent record
-- [ ] Future: lookup/typeahead from your chart of accounts
-
-### 3.2 Polymorphic Parent Linking
-- [ ] WO form: parent type select (None / Project / Trouble Ticket / Service Order)
-- [ ] When type selected: show search/ID input for the parent record
-- [ ] In WO detail header: linked parent shown as a chip with icon
-  ```
-  📋 Project: Elm Street FTTH Build  →
-  ```
-- [ ] Clicking the chip opens a drawer with parent record summary (Phase 4: deep link)
-- [ ] Backend: `GET /api/work-orders?parent_type=project&parent_id=42` — list WOs for a given parent
-
-### 3.3 Audit Log / Activity Timeline
-**Backend:**
-- [ ] `006_audit_log.sql` — `wo_audit_log` (id, wo_id, action, old_value, new_value, performed_by, performed_at)
-- [ ] Log every status change, resource assignment, step completion, photo upload, accounting change
-- [ ] `GET /api/work-orders/{id}/activity` — paginated, newest first
-
-**Frontend `wo-timeline.mjs`:**
-- [ ] Vertical timeline feed: dot + connector line
-- [ ] Each entry: user avatar + action description + timestamp (relative + absolute on hover)
-- [ ] Status changes: colored badge showing old → new
-- [ ] Photo uploads: thumbnail preview inline
-- [ ] Step completions: step title + optional note
-- [ ] Load more button at bottom (pagination)
-- [ ] Auto-refresh every 30s if WO is `in_progress`
-
-### 3.4 User Management (Admin Only)
-**Backend:**
-- [ ] `GET /api/users` — list all users (admin only)
-- [ ] `POST /api/users` — create user, auto-send invite email
-- [ ] `PUT /api/users/{id}` — update name, role, active status
-- [ ] `PUT /api/users/{id}/password` — admin reset
-- [ ] `DELETE /api/users/{id}` — deactivate (soft delete)
-- [ ] `GET /api/users/me` — current user profile
-- [ ] `PUT /api/users/me` — update own display name, avatar
-- [ ] `PUT /api/users/me/password` — change own password (requires current password)
-
-**Frontend:**
-- [ ] **`user-list.mjs`** — table: avatar, name, email, role badge, last login, active toggle, edit button
-- [ ] **`user-form.mjs`** — dialog: display name, email, role select, active toggle, force password reset checkbox
-- [ ] **`user-profile.mjs`** — own profile: avatar upload, display name, current password + new password fields
-- [ ] Role badges with colors: Admin=danger, Dispatcher=teal, Field Tech=warning, Viewer=muted
-
-### 3.5 Notifications
-**Backend:**
-- [ ] `wo_notifications` table: (id, user_id, wo_id, type, message, read, created_at)
-- [ ] Create notifications when:
-    - WO assigned to you
-    - WO status changes (for creator and assignees)
-    - All steps completed (for dispatcher/admin)
-    - WO approaching scheduled time (30 min warning, cron job)
-- [ ] `GET /api/notifications?unread=true` — list notifications
-- [ ] `PUT /api/notifications/{id}/read` — mark read
-- [ ] `PUT /api/notifications/read-all` — mark all read
-- [ ] Email notification: Go `net/smtp` with HTML template, send on assignment
-
-**Frontend:**
-- [ ] Bell icon in topbar: unread count badge (red dot with number)
-- [ ] Click bell → dropdown panel with notification list
-- [ ] Each notification: icon, message, WO link, relative time, unread dot
-- [ ] "Mark all read" button at top
-- [ ] Click notification → navigate to WO detail + mark read
-- [ ] Poll `/api/notifications?unread=true` every 60s for new count
-
-### 3.6 Print / Field Packet
-**Frontend `wo-print.mjs`:**
-- [ ] Triggered by "Print" button in WO detail header
-- [ ] Opens print-preview page (new tab or print dialog)
-- [ ] Printed layout includes:
-    - WO number, title, site info, scheduled date
-    - All resource assignments (people, vehicles, equipment, materials)
-    - Full instructions + access notes
-    - Map static image (use Leaflet's `map.printPlugin` or OpenStreetMap static tiles)
-    - Numbered step checklist (checkbox squares for pen check-off)
-    - Accounting codes
-    - Photo thumbnails (before photos only, 2×3 grid)
-    - Signature / completion line
-- [ ] `print.css`: hide sidebar, topbar, action buttons; show print-only elements; break pages sensibly
-
-### 3.7 Reports
-**Backend:**
-- [ ] `GET /api/reports/summary` — total WOs by status, by priority, by date range
-- [ ] `GET /api/reports/by-cost-center` — WO count and open/closed by cost center
-- [ ] `GET /api/reports/by-resource` — WOs per person/vehicle over date range
-- [ ] `GET /api/reports/overdue` — WOs past scheduled end still not closed
-- [ ] `GET /api/reports/export?format=csv&status=closed&from=&to=` — CSV download
-
-**Frontend:**
-- [ ] **`report-root.mjs`** — filter bar: date range, status, cost center, parent type
-- [ ] **`report-by-status.mjs`** — doughnut chart (Chart.js) + summary table
-- [ ] **`report-by-cost.mjs`** — bar chart by cost center + table with WO list
-- [ ] **`report-export.mjs`** — "Export to CSV" button + date range picker + format select
-
----
-
-## Phase 4 — Polish & Optimization
-
-### 4.1 Dashboard
-**Backend:**
-- [ ] `GET /api/dashboard` — single endpoint returns all KPIs:
-  ```json
-  {
-    "open_count": 42,
-    "in_progress_count": 12,
-    "overdue_count": 5,
-    "closed_today": 8,
-    "by_status": [...],
-    "by_priority": [...],
-    "recent_activity": [...],
-    "upcoming": [...]
-  }
-  ```
-
-**Frontend `dash-root.mjs`:**
-- [ ] **KPI row** — four `<dash-kpi-card>` components:
-    - Open Work Orders (blue, clipboard icon)
-    - In Progress (orange, activity icon)
-    - Overdue (red, alert-circle icon)
-    - Closed Today (green, check-circle icon)
-    - Each card: large number, trend indicator (↑↓ vs yesterday), icon, click → filtered WO list
-
-- [ ] **Charts row** (2 columns):
-    - Doughnut: WOs by Status (Chart.js, use status colors from design system)
-    - Bar: WOs by Priority (horizontal bars)
-
-- [ ] **Bottom row** (2 columns):
-    - Recent Activity feed (`<dash-recent-feed>`)
-    - Upcoming WOs this week (compact list, sorted by scheduled_start)
-
-- [ ] Dashboard auto-refreshes every 2 minutes
-- [ ] Skeleton loading state while data loads
-
-### 4.2 Offline / PWA Basics
-- [ ] `manifest.json` — app name, icons, `display: standalone`, theme color `#0D2137`
-- [ ] `sw.js` — Service Worker:
-    - Cache shell (index.html, CSS, .mjs files) on install
-    - Cache API GET responses in IndexedDB for offline read
-    - Queue photo uploads when offline, sync on reconnect (Background Sync API)
-- [ ] Offline indicator banner: "You're offline — viewing cached data"
-- [ ] "Add to Home Screen" prompt on mobile
-
-### 4.3 Rich Text Instructions
-- [ ] Swap `<textarea>` for [Trix editor](https://trix-editor.org/) (no build needed, CDN available)
-- [ ] Store as HTML in `instructions` column (`NVARCHAR(MAX)`)
-- [ ] Display with sanitized `innerHTML` (strip `<script>` tags server-side)
-
-### 4.4 Full-Text Search
-- [ ] SQL Server `CONTAINS` or `FREETEXT` on `work_orders.title`, `description`, `instructions`, `site_name`
-- [ ] Global search bar in topbar — results show WOs, people, equipment matching query
-- [ ] Keyboard shortcut: `Ctrl+K` / `Cmd+K` opens search spotlight dialog
-
-### 4.5 Scheduling Calendar
-- [ ] **`wo-calendar.mjs`** — monthly/weekly view
-- [ ] Each WO block: title, priority color stripe, assignee avatars
-- [ ] Click WO block → detail drawer slides in without leaving calendar
-- [ ] Drag WO block to reschedule (updates `scheduled_start`, `scheduled_end`)
-
-### 4.6 Crew Scheduling View
-- [ ] Gantt-style view: rows = people, columns = days
-- [ ] Each WO shown as a bar on the assigned person's row
-- [ ] Spot conflicts: overlapping WOs on same person highlighted in red
-
-### 4.7 Additional Polish
-- [ ] Dark mode: add `[data-theme="dark"]` overrides for all CSS vars, toggle stored in localStorage
-- [ ] Keyboard navigation: all interactive elements focusable, visible focus rings, tab order logical
-- [ ] Error boundaries: if a component throws, show error card instead of crashing whole page
-- [ ] Rate limiting on API (chi middleware: 100 req/min per IP)
-- [ ] API response compression (`gzip` middleware)
-- [ ] Input sanitization: strip HTML from all text fields server-side before saving
-- [ ] `ETag` / `Last-Modified` headers on GET responses for browser caching
-
----
-
-## Component Inventory
-
-| Component | File | Status | Phase |
-|-----------|------|--------|-------|
-| App shell | `app-root.mjs` | ⬜ | 1 |
-| Sidebar | `app-sidebar.mjs` | ⬜ | 1 |
-| Topbar | `app-topbar.mjs` | ⬜ | 1 |
-| Mobile nav | `app-mobile-nav.mjs` | ⬜ | 1 |
-| WO List | `wo-list.mjs` | ⬜ | 1 |
-| WO Kanban | `wo-kanban.mjs` | ⬜ | 1 |
-| WO Form | `wo-form.mjs` | ⬜ | 1 |
-| WO Detail | `wo-detail.mjs` | ⬜ | 1 |
-| Status Badge | `ui-badge.mjs` | ⬜ | 1 |
-| Button | `ui-button.mjs` | ⬜ | 1 |
-| Dialog | `ui-dialog.mjs` | ⬜ | 1 |
-| Toast | `ui-toast.mjs` | ⬜ | 1 |
-| Spinner | `ui-spinner.mjs` | ⬜ | 1 |
-| Empty state | `ui-empty.mjs` | ⬜ | 1 |
-| Checklist | `wo-checklist.mjs` | ⬜ | 2 |
-| Resource panel | `wo-resource-panel.mjs` | ⬜ | 2 |
-| Photo panel | `wo-photo-panel.mjs` | ⬜ | 2 |
-| Map | `wo-map.mjs` | ⬜ | 2 |
-| People list/form | `people-list.mjs` | ⬜ | 2 |
-| Vehicle list/form | `vehicle-list.mjs` | ⬜ | 2 |
-| Equipment list/form | `equipment-list.mjs` | ⬜ | 2 |
-| Material list/form | `material-list.mjs` | ⬜ | 2 |
-| Accounting | `wo-accounting.mjs` | ⬜ | 3 |
-| Timeline | `wo-timeline.mjs` | ⬜ | 3 |
-| Print packet | `wo-print.mjs` | ⬜ | 3 |
-| User list/form | `user-list.mjs` | ⬜ | 3 |
-| User profile | `user-profile.mjs` | ⬜ | 3 |
-| Reports | `report-root.mjs` | ⬜ | 3 |
-| Dashboard | `dash-root.mjs` | ⬜ | 4 |
-| KPI card | `dash-kpi-card.mjs` | ⬜ | 4 |
-| Calendar | `wo-calendar.mjs` | ⬜ | 4 |
-| Search spotlight | (in `app-topbar.mjs`) | ⬜ | 4 |
-
----
-
-## API Endpoints
-
-### Auth
-| Method | Path | Auth | Description |
-|--------|------|------|-------------|
-| POST | `/api/auth/login` | ✗ | Login, returns JWT + user |
-| POST | `/api/auth/refresh` | ✓ | Refresh token |
-| GET | `/api/auth/me` | ✓ | Current user |
-
-### Work Orders
-| Method | Path | Role | Description |
-|--------|------|------|-------------|
-| GET | `/api/work-orders` | viewer+ | List (filter: status, priority, search, parent, date) |
-| POST | `/api/work-orders` | dispatcher+ | Create |
-| GET | `/api/work-orders/{id}` | viewer+ | Full detail |
-| PUT | `/api/work-orders/{id}` | dispatcher+ | Update |
-| DELETE | `/api/work-orders/{id}` | admin | Soft delete |
-| PUT | `/api/work-orders/{id}/status` | field_tech+ | Status transition |
-| GET | `/api/work-orders/{id}/steps` | viewer+ | List steps |
-| POST | `/api/work-orders/{id}/steps` | dispatcher+ | Add step |
-| PUT | `/api/work-orders/{id}/steps/{sid}` | dispatcher+ | Edit step |
-| PUT | `/api/work-orders/{id}/steps/reorder` | dispatcher+ | Bulk reorder |
-| POST | `/api/work-orders/{id}/steps/{sid}/complete` | field_tech+ | Check off |
-| POST | `/api/work-orders/{id}/steps/{sid}/uncomplete` | dispatcher+ | Undo check |
-| DELETE | `/api/work-orders/{id}/steps/{sid}` | dispatcher+ | Delete step |
-| GET | `/api/work-orders/{id}/resources` | viewer+ | List assignments |
-| POST | `/api/work-orders/{id}/resources` | dispatcher+ | Assign resource |
-| DELETE | `/api/work-orders/{id}/resources/{rid}` | dispatcher+ | Remove assignment |
-| GET | `/api/work-orders/{id}/attachments` | viewer+ | List photos/files |
-| POST | `/api/work-orders/{id}/attachments` | field_tech+ | Upload photo/file |
-| PUT | `/api/work-orders/{id}/attachments/{aid}` | field_tech+ | Update caption/phase |
-| DELETE | `/api/work-orders/{id}/attachments/{aid}` | dispatcher+ | Delete attachment |
-| GET | `/api/work-orders/{id}/accounting` | viewer+ | Get accounting codes |
-| PUT | `/api/work-orders/{id}/accounting` | dispatcher+ | Upsert accounting codes |
-| GET | `/api/work-orders/{id}/activity` | viewer+ | Audit log feed |
-| GET | `/api/work-orders/{id}/location` | viewer+ | Location data |
-| PUT | `/api/work-orders/{id}/location` | dispatcher+ | Update location |
-
-### Registries (Master Lists)
-| Method | Path | Description |
-|--------|------|-------------|
-| GET | `/api/registry/people` | List people (search, active filter) |
-| POST | `/api/registry/people` | Create person |
-| PUT | `/api/registry/people/{id}` | Update person |
-| DELETE | `/api/registry/people/{id}` | Deactivate person |
-| GET/POST/PUT/DELETE | `/api/registry/vehicles` | Same CRUD for vehicles |
-| GET/POST/PUT/DELETE | `/api/registry/equipment` | Same CRUD for equipment |
-| GET/POST/PUT/DELETE | `/api/registry/materials` | Same CRUD for materials |
-
-### Users & Notifications
-| Method | Path | Role | Description |
-|--------|------|------|-------------|
-| GET | `/api/users` | admin | List all users |
-| POST | `/api/users` | admin | Create user |
-| PUT | `/api/users/{id}` | admin | Update user |
-| DELETE | `/api/users/{id}` | admin | Deactivate |
-| GET | `/api/users/me` | any | Own profile |
-| PUT | `/api/users/me` | any | Update own profile |
-| PUT | `/api/users/me/password` | any | Change password |
-| GET | `/api/notifications` | any | List notifications |
-| PUT | `/api/notifications/{id}/read` | any | Mark read |
-| PUT | `/api/notifications/read-all` | any | Mark all read |
-
-### Reports & Dashboard
-| Method | Path | Role | Description |
-|--------|------|------|-------------|
-| GET | `/api/dashboard` | viewer+ | All KPIs in one call |
-| GET | `/api/reports/summary` | viewer+ | WOs by status/priority |
-| GET | `/api/reports/by-cost-center` | dispatcher+ | Cost center breakdown |
-| GET | `/api/reports/by-resource` | dispatcher+ | Resource utilization |
-| GET | `/api/reports/overdue` | dispatcher+ | Overdue WOs |
-| GET | `/api/reports/export` | dispatcher+ | CSV download |
-
----
-
-## Database Schema
-
-### Full Table List
-| Table | Purpose |
-|-------|---------|
-| `work_orders` | Core WO records |
-| `wo_steps` | Ordered checklist steps |
-| `wo_resources` | Resource assignments (polymorphic) |
-| `wo_attachments` | Photos and file uploads |
-| `wo_accounting` | GL/cost center/WBS codes |
-| `wo_audit_log` | All change events |
-| `wo_notifications` | User notification records |
-| `resource_people` | People master list |
-| `resource_vehicles` | Vehicle master list |
-| `resource_equipment` | Equipment master list |
-| `resource_materials` | Material/inventory master list |
-| `users` | App users with roles |
-
-### Key Patterns
-- Soft deletes: `deleted_at DATETIME2 NULL` — never hard delete, always filter `WHERE deleted_at IS NULL`
-- Audit timestamps: every table has `created_at`, `updated_at` (auto via `DEFAULT GETUTCDATE()`)
-- Polymorphic parent: `parent_type NVARCHAR(50)`, `parent_id INT` — handles any parent record type
-- Named params only: never string-concatenate SQL — always use `@param_name` or `@p1`
-
----
-
-## Conventions
-
-### CLAUDE.md Content (create this file in project root)
-
-```markdown
-# Work Order System — Claude Code Conventions
-
-## Frontend
-- ALL frontend JavaScript module files use `.mjs` extension — no exceptions
-- No build step, no npm for frontend — pure ES modules via <script type="module">
-- CDN dependencies: Lucide (icons), Leaflet (maps), Chart.js (charts), Google Fonts
-- Always use CSS custom property vars — never hardcode hex colors
-- Component pattern: Shadow DOM, #private class fields, custom events with namespaces
-- Custom event naming: colon-namespaced — 'wo:select', 'steps:updated', 'auth:expired'
-- Imports always include .mjs extension: import { api } from '../lib/api.mjs'
-
-## Go Backend
-- Package names: lowercase single word (handlers, repository, model, service)
-- Errors: always wrap with context — fmt.Errorf("repo.Create: %w", err)
-- DB queries: named params only — @param_name, never string concat
-- HTTP errors: always JSON — {"error": "message"} with correct status code
-- Logging: use log/slog with structured key-value pairs
-- Response envelope: { data: ..., meta: {...}, error: null }
-
-## Database
-- Soft deletes only — deleted_at column, filter WHERE deleted_at IS NULL
-- Every table: created_at, updated_at with DEFAULT GETUTCDATE()
-- Polymorphic refs: parent_type + parent_id columns
-- All SQL in repository layer — no raw SQL in handlers or service
-
-## Git
-- Branches: feature/*, fix/*, chore/*
-- Commit messages: conventional commits (feat:, fix:, chore:, docs:)
-```
-
-### Go Dependencies
-```go
-// go.mod
-require (
-    github.com/go-chi/chi/v5         v5.1.0
-    github.com/jmoiron/sqlx          v1.3.5
-    github.com/microsoft/go-mssqldb  v1.7.1
-    github.com/golang-jwt/jwt/v5     v5.2.1
-    github.com/google/uuid           v1.6.0
-    github.com/joho/godotenv         v1.5.1
-    golang.org/x/crypto              latest    // bcrypt
-    github.com/disintegration/imaging latest   // thumbnail generation
-)
-```
-
-### Frontend CDN Deps (loaded in `index.html`)
-```html
-<!-- Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-
-<!-- Icons — Lucide (tree-shakeable, no API key) -->
-<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
-
-<!-- Maps — Leaflet (no API key) -->
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
-<script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
-
-<!-- Charts — Chart.js -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
-```
-
----
-
-*Start with Phase 1 in order. Each checkbox is one commit. Don't skip CLAUDE.md — it must exist before any code is written.*
-
----
-
 ## Work Order Profiles
 
 ### Overview
@@ -3343,33 +2322,102 @@ A **Work Order Profile** is a reusable template that defines the default structu
 
 > **Key idea:** Profile = preset + flexibility. The profile defines the standard; each WO can deviate from it.
 
+---
+
+### Profile Step Types
+
+Profile steps have a **type** that controls how they are displayed and completed in the field. Types are a fixed code-level constant — not a database table. Each type has optional **type_config** (stored as JSON) that gets set when the step is added to a profile.
+
+#### Built-in Step Types
+
+| Type | Value | Field behavior |
+|------|-------|----------------|
+| Work Step | `work_step` | Standard checkbox — mark done, optional note |
+| Photo | `photo` | Camera capture required; config defines phase and prompt |
+| Inspection | `inspection` | Pass / Fail / N/A buttons; config defines criteria text |
+| Note | `note` | Free-text entry field; config defines the prompt label |
+
+#### type_config JSON by Type
+
+```json
+// work_step — no config needed
+{}
+
+// photo
+{
+  "phase": "before",          // "before" | "during" | "after"
+  "caption_prompt": "Photo of existing equipment before any work begins"
+}
+
+// inspection
+{
+  "criteria": "All cable slack coiled and secured per spec"
+}
+
+// note
+{
+  "prompt": "Record any site hazards or access issues observed"
+}
+```
+
+#### Example profile: Fiber Splice Job
+
+```
+1. [photo]       Before — site overview             { phase: "before", caption_prompt: "Wide shot of work area" }
+2. [work_step]   Power down splice enclosure
+3. [work_step]   Prep and strip fiber ends
+4. [inspection]  Check splice loss < 0.1 dB         { criteria: "OTDR reading below 0.1 dB loss" }
+5. [photo]       Splice tray loaded and sealed       { phase: "during", caption_prompt: "Tray with labeled splices" }
+6. [work_step]   Seal enclosure and torque to spec
+7. [note]        Record any deviations or notes      { prompt: "Deviations from standard procedure?" }
+8. [photo]       After — completed enclosure         { phase: "after", caption_prompt: "Sealed enclosure, final install" }
+```
+
+---
+
 ### Database
 
 ```sql
--- Profiles
-CREATE TABLE wo_profiles (
-    id                     INT IDENTITY PRIMARY KEY,
-    name                   NVARCHAR(200) NOT NULL,
-    description            NVARCHAR(MAX),
-    category               NVARCHAR(100),
-    default_priority       NVARCHAR(10) NOT NULL DEFAULT 'normal',
-    default_duration_hours INT,
-    default_instructions   NVARCHAR(MAX),
-    active                 BIT NOT NULL DEFAULT 1,
-    created_at             DATETIME2 NOT NULL DEFAULT GETUTCDATE(),
-    updated_at             DATETIME2 NOT NULL DEFAULT GETUTCDATE()
-);
+-- Profiles table
+IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'wo_profiles')
+BEGIN
+    CREATE TABLE wo_profiles (
+        id                     INT IDENTITY PRIMARY KEY,
+        name                   NVARCHAR(200) NOT NULL,
+        description            NVARCHAR(MAX),
+        category               NVARCHAR(100),
+        default_priority       NVARCHAR(10) NOT NULL DEFAULT 'normal',
+        default_duration_hours INT,
+        default_instructions   NVARCHAR(MAX),
+        active                 BIT NOT NULL DEFAULT 1,
+        created_at             DATETIME2 NOT NULL DEFAULT GETUTCDATE(),
+        updated_at             DATETIME2 NOT NULL DEFAULT GETUTCDATE()
+    );
+END
 
-CREATE TABLE wo_profile_steps (
-    id          INT IDENTITY PRIMARY KEY,
-    profile_id  INT NOT NULL REFERENCES wo_profiles(id) ON DELETE CASCADE,
-    step_order  INT NOT NULL,
-    title       NVARCHAR(200) NOT NULL,
-    description NVARCHAR(MAX),
-    required    BIT NOT NULL DEFAULT 1
-);
+-- Profile steps table (with step_type and type_config)
+IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'wo_profile_steps')
+BEGIN
+    CREATE TABLE wo_profile_steps (
+        id          INT IDENTITY PRIMARY KEY,
+        profile_id  INT NOT NULL REFERENCES wo_profiles(id) ON DELETE CASCADE,
+        step_order  INT NOT NULL,
+        title       NVARCHAR(200) NOT NULL,
+        description NVARCHAR(MAX),
+        required    BIT NOT NULL DEFAULT 1,
+        step_type   NVARCHAR(30) NOT NULL DEFAULT 'work_step',
+                    -- 'work_step' | 'photo' | 'inspection' | 'note'
+        type_config NVARCHAR(MAX)   -- JSON; shape depends on step_type
+    );
+    CREATE INDEX ix_profile_steps ON wo_profile_steps (profile_id, step_order);
+END
 
-CREATE INDEX ix_profile_steps ON wo_profile_steps (profile_id, step_order);
+-- WO steps also carry step_type and type_config (copied from profile on apply)
+-- Migration: add columns if they do not exist
+IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'step_type')
+    ALTER TABLE wo_steps ADD step_type NVARCHAR(30) NOT NULL DEFAULT 'work_step';
+IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'type_config')
+    ALTER TABLE wo_steps ADD type_config NVARCHAR(MAX) NULL;
 ```
 
 ### API Endpoints
@@ -3393,39 +2441,9 @@ Request body: `{ "mode": "append" | "replace" }`
 
 - **append** — inserts profile steps after existing steps (step_order continues from current max)
 - **replace** — deletes all existing steps, then inserts profile steps starting at order 1
+- Both modes copy `step_type` and `type_config` from the profile step into `wo_steps`
 - Both modes update `instructions` if currently blank and `priority` if WO is still `draft`
 
-### Frontend Components
-
-**`web/components/registry/profile-list.mjs`**
-- List page at `/registry/profiles`
-- Cards: name, category badge, step count, active status
-- Search + category filter, edit/deactivate actions, "New Profile" button
-
-**`web/components/registry/profile-form.mjs`**
-- Modal dialog for create/edit
-- Fields: name (required), description, category, default priority, default duration hours, default instructions
-- Inline step editor: ordered step list with add / edit / reorder / delete
-- Active toggle in edit mode
-
-**WO Form integration (`wo-form.mjs`)**
-- "Load Profile" ghost button at top of form (shown only on new WOs or draft status)
-- Searchable profile picker dialog — on confirm pre-fills priority and instructions (if blank)
-- Steps applied server-side via apply-profile after the WO saves; checklist tab then refreshes
-
-**WO Detail integration (`wo-detail.mjs`)**
-- "Apply Profile" button in header actions alongside Edit / Change Status
-- Two-step dialog: (1) pick profile, (2) if WO has existing steps — prompt append vs replace
-- Calls `POST /api/work-orders/{id}/apply-profile/{profileId}` then refreshes Checklist tab
-
-### Sidebar Nav
-
-Add under Resources section:
-
-```
-Profiles    /registry/profiles    (layout-template icon)
-```
-
 ### Go Models
 
 ```go
@@ -3438,6 +2456,9 @@ type Profile struct {
     DefaultDurationHours *int          `db:"default_duration_hours" json:"default_duration_hours"`
     DefaultInstructions  string        `db:"default_instructions"   json:"default_instructions"`
     Active               bool          `db:"active"                 json:"active"`
+    StepCount            int           `db:"step_count"             json:"step_count"`
+    CreatedAt            time.Time     `db:"created_at"             json:"created_at"`
+    UpdatedAt            time.Time     `db:"updated_at"             json:"updated_at"`
     Steps                []ProfileStep `db:"-"                      json:"steps,omitempty"`
 }
 
@@ -3448,7 +2469,58 @@ type ProfileStep struct {
     Title       string `db:"title"       json:"title"`
     Description string `db:"description" json:"description"`
     Required    bool   `db:"required"    json:"required"`
+    StepType    string `db:"step_type"   json:"step_type"`   // "work_step"|"photo"|"inspection"|"note"
+    TypeConfig  string `db:"type_config" json:"type_config"` // JSON string
 }
+
+// Step also gains these two fields (in model/models.go)
+// StepType   string `db:"step_type"   json:"step_type"`
+// TypeConfig string `db:"type_config" json:"type_config"`
+```
+
+### Frontend Components
+
+**`web/components/registry/profile-list.mjs`**
+- List page at `/registry/profiles`
+- Cards: name, category badge, step count, active status
+- Search + category filter, edit/deactivate actions, "New Profile" button
+
+**`web/components/registry/profile-form.mjs`**
+- Modal dialog for create/edit
+- Fields: name (required), description, category, default priority, default duration hours, default instructions
+- Inline step editor: ordered step list with add / edit / reorder / delete
+- When adding a step: type picker first (work_step / photo / inspection / note icon buttons)
+- After type selected: type-specific config fields appear inline:
+  - `photo` → phase select (before/during/after) + caption prompt input
+  - `inspection` → criteria text input
+  - `note` → prompt label input
+  - `work_step` → no extra fields
+- Active toggle in edit mode
+
+**`web/components/work-orders/wo-checklist.mjs`**
+- Each step renders differently based on `step_type`:
+  - `work_step` — large checkbox + title + optional note textarea
+  - `photo` — camera icon button labeled with `type_config.caption_prompt`; tapping opens photo panel pre-set to the configured phase; completed when a photo is attached to this step
+  - `inspection` — Pass / Fail / N/A button group; completed when any selection is made; result stored in completion notes
+  - `note` — text input labeled with `type_config.prompt`; completed when non-empty text is saved
+- Progress bar counts all step types equally
+
+**WO Form integration (`wo-form.mjs`)**
+- "Load Profile" ghost button at top of form (shown only on new WOs or draft status)
+- Searchable profile picker dialog — on confirm pre-fills priority and instructions (if blank)
+- Steps applied server-side via apply-profile after the WO saves; checklist tab then refreshes
+
+**WO Detail integration (`wo-detail.mjs`)**
+- "Apply Profile" button in header actions alongside Edit / Change Status
+- Two-step dialog: (1) pick profile, (2) if WO has existing steps — prompt append vs replace
+- Calls `POST /api/work-orders/{id}/apply-profile/{profileId}` then refreshes Checklist tab
+
+### Sidebar Nav
+
+Under Resources section:
+
+```
+Profiles    /registry/profiles    (layout-template icon)
 ```
 
 ### apply-profile Handler (pseudocode)
@@ -3459,7 +2531,7 @@ func (h *ProfileHandler) Apply(w http.ResponseWriter, r *http.Request) {
     var body struct { Mode string `json:"mode"` }
     json.NewDecoder(r.Body).Decode(&body)
 
-    profile := // load profile + steps
+    profile, steps := // load profile + steps
 
     if body.Mode == "replace" {
         db.Exec(`DELETE FROM wo_steps WHERE wo_id = @p1`, woID)
@@ -3468,10 +2540,10 @@ func (h *ProfileHandler) Apply(w http.ResponseWriter, r *http.Request) {
     var maxOrder int
     db.Get(&maxOrder, `SELECT ISNULL(MAX(step_order), 0) FROM wo_steps WHERE wo_id = @p1`, woID)
 
-    for _, s := range profile.Steps {
-        db.Exec(`INSERT INTO wo_steps (wo_id, step_order, title, description, required)
-                 VALUES (@p1, @p2, @p3, @p4, @p5)`,
-            woID, maxOrder+s.StepOrder, s.Title, s.Description, s.Required)
+    for _, s := range steps {
+        db.Exec(`INSERT INTO wo_steps (wo_id, step_order, title, description, required, step_type, type_config)
+                 VALUES (@p1, @p2, @p3, @p4, @p5, @p6, @p7)`,
+            woID, maxOrder+s.StepOrder, s.Title, s.Description, s.Required, s.StepType, s.TypeConfig)
     }
 
     db.Exec(`
diff --git a/web/app.mjs b/web/app.mjs
index d45df5d..662fe99 100644
--- a/web/app.mjs
+++ b/web/app.mjs
@@ -92,7 +92,7 @@ function showLoginPage() {
       </div>
     </div>`;
 
-  if (window.lucide) lucide.createIcons({ nodes: [root] });
+  if (window.lucide) lucide.createIcons({ root: root });
 
   root.querySelector('#login-form').addEventListener('submit', async e => {
     e.preventDefault();
diff --git a/web/components/layout/app-mobile-nav.mjs b/web/components/layout/app-mobile-nav.mjs
index 24d6334..d66b069 100644
--- a/web/components/layout/app-mobile-nav.mjs
+++ b/web/components/layout/app-mobile-nav.mjs
@@ -35,7 +35,7 @@ class AppMobileNav extends HTMLElement {
           <span>${t.label}</span>
         </a>`;
       }).join('')}`;
-    if (window.lucide) lucide.createIcons({ nodes: [this] });
+    if (window.lucide) lucide.createIcons({ root: this });
   }
 }
 customElements.define('app-mobile-nav', AppMobileNav);
diff --git a/web/components/layout/app-root.mjs b/web/components/layout/app-root.mjs
index 85fecec..01ea566 100644
--- a/web/components/layout/app-root.mjs
+++ b/web/components/layout/app-root.mjs
@@ -19,7 +19,7 @@ class AppRoot extends HTMLElement {
     if (main) {
       main.innerHTML = html;
       main.scrollTop = 0;
-      if (window.lucide) lucide.createIcons({ nodes: [main] });
+      if (window.lucide) lucide.createIcons({ root: main });
     }
   }
 }
diff --git a/web/components/layout/app-sidebar.mjs b/web/components/layout/app-sidebar.mjs
index 50435ba..d3f436a 100644
--- a/web/components/layout/app-sidebar.mjs
+++ b/web/components/layout/app-sidebar.mjs
@@ -131,7 +131,7 @@ class AppSidebar extends HTMLElement {
         </button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [this] });
+    if (window.lucide) lucide.createIcons({ root: this });
     this.querySelector('#toggle-btn')?.addEventListener('click', () => this.#toggle());
     this.querySelector('#logout-btn')?.addEventListener('click', () => {
       clearToken();
diff --git a/web/components/layout/app-topbar.mjs b/web/components/layout/app-topbar.mjs
index 014968f..88b5a88 100644
--- a/web/components/layout/app-topbar.mjs
+++ b/web/components/layout/app-topbar.mjs
@@ -85,7 +85,7 @@ class AppTopbar extends HTMLElement {
           </button>
         </div>` : ''}`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [this] });
+    if (window.lucide) lucide.createIcons({ root: this });
 
     this.querySelector('#user-menu-btn')?.addEventListener('click', e => {
       e.stopPropagation();
diff --git a/web/components/registry/equipment-form.mjs b/web/components/registry/equipment-form.mjs
index b019bf1..3ca0ecd 100644
--- a/web/components/registry/equipment-form.mjs
+++ b/web/components/registry/equipment-form.mjs
@@ -71,7 +71,7 @@ class EquipmentForm extends HTMLElement {
         <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Equipment'}</button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [d] });
+    if (window.lucide) lucide.createIcons({ root: d });
     d.querySelector('#dlg-close').addEventListener('click',  () => d.close());
     d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());
 
diff --git a/web/components/registry/equipment-list.mjs b/web/components/registry/equipment-list.mjs
index 6d703c8..916d6be 100644
--- a/web/components/registry/equipment-list.mjs
+++ b/web/components/registry/equipment-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import './equipment-form.mjs';
 
 class EquipmentList extends HTMLElement {
@@ -64,7 +64,7 @@ class EquipmentList extends HTMLElement {
       <div class="page-header">
         <h1>Equipment</h1>
         <div class="toolbar">
-          <input class="search-input" id="search" placeholder="Search equipment…" value="${this.#esc(this.#search)}">
+          <input class="search-input" id="search" placeholder="Search equipment…" value="${this.#esc(this.#search)}">
           <button class="btn-primary" id="new-btn">
             <i data-lucide="plus" style="width:14px;height:14px"></i> Add Equipment
           </button>
@@ -102,7 +102,7 @@ class EquipmentList extends HTMLElement {
 
       <equipment-form id="equipment-form"></equipment-form>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     const searchEl = s.querySelector('#search');
     let debounce;
diff --git a/web/components/registry/material-form.mjs b/web/components/registry/material-form.mjs
index 32461ea..aebe3fd 100644
--- a/web/components/registry/material-form.mjs
+++ b/web/components/registry/material-form.mjs
@@ -71,7 +71,7 @@ class MaterialForm extends HTMLElement {
         <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Material'}</button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [d] });
+    if (window.lucide) lucide.createIcons({ root: d });
     d.querySelector('#dlg-close').addEventListener('click',  () => d.close());
     d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());
 
diff --git a/web/components/registry/material-list.mjs b/web/components/registry/material-list.mjs
index 9ad8a2d..74e2658 100644
--- a/web/components/registry/material-list.mjs
+++ b/web/components/registry/material-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import './material-form.mjs';
 
 class MaterialList extends HTMLElement {
@@ -65,7 +65,7 @@ class MaterialList extends HTMLElement {
       <div class="page-header">
         <h1>Materials</h1>
         <div class="toolbar">
-          <input class="search-input" id="search" placeholder="Search materials…" value="${this.#esc(this.#search)}">
+          <input class="search-input" id="search" placeholder="Search materials…" value="${this.#esc(this.#search)}">
           <button class="btn-primary" id="new-btn">
             <i data-lucide="plus" style="width:14px;height:14px"></i> Add Material
           </button>
@@ -103,7 +103,7 @@ class MaterialList extends HTMLElement {
 
       <material-form id="material-form"></material-form>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     const searchEl = s.querySelector('#search');
     let debounce;
diff --git a/web/components/registry/people-form.mjs b/web/components/registry/people-form.mjs
index a2fabe3..e6ddc2f 100644
--- a/web/components/registry/people-form.mjs
+++ b/web/components/registry/people-form.mjs
@@ -70,7 +70,7 @@ class PeopleForm extends HTMLElement {
         <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Person'}</button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [d] });
+    if (window.lucide) lucide.createIcons({ root: d });
 
     d.querySelector('#dlg-close').addEventListener('click',  () => d.close());
     d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());
diff --git a/web/components/registry/people-list.mjs b/web/components/registry/people-list.mjs
index 224dfa9..239fdd5 100644
--- a/web/components/registry/people-list.mjs
+++ b/web/components/registry/people-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import './people-form.mjs';
 
 class PeopleList extends HTMLElement {
@@ -76,7 +76,7 @@ class PeopleList extends HTMLElement {
       <div class="page-header">
         <h1>People</h1>
         <div class="toolbar">
-          <input class="search-input" id="search" placeholder="Search people…" value="${this.#esc(this.#search)}">
+          <input class="search-input" id="search" placeholder="Search people…" value="${this.#esc(this.#search)}">
           <button class="btn-primary" id="new-btn">
             <i data-lucide="user-plus" style="width:14px;height:14px"></i> Add Person
           </button>
@@ -115,7 +115,7 @@ class PeopleList extends HTMLElement {
 
       <people-form id="people-form"></people-form>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     const searchEl = s.querySelector('#search');
     let debounce;
diff --git a/web/components/registry/profile-form.mjs b/web/components/registry/profile-form.mjs
index 0b14448..2138a34 100644
--- a/web/components/registry/profile-form.mjs
+++ b/web/components/registry/profile-form.mjs
@@ -110,7 +110,7 @@ class ProfileForm extends HTMLElement {
         <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Create Profile'}</button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [d] });
+    if (window.lucide) lucide.createIcons({ root: d });
 
     // Local step state (not saved until the profile save)
     const profileId = profile?.id || null;
diff --git a/web/components/registry/profile-list.mjs b/web/components/registry/profile-list.mjs
index 35fbf3f..87eb023 100644
--- a/web/components/registry/profile-list.mjs
+++ b/web/components/registry/profile-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import './profile-form.mjs';
 
 const PRIORITY_COLORS = { low: '#64748B', normal: '#0A7EA4', high: '#E07B39', urgent: '#C0392B' };
@@ -68,7 +68,7 @@ class ProfileList extends HTMLElement {
       <div class="page-header">
         <h1>Work Order Profiles</h1>
         <div class="toolbar">
-          <input class="search-input" id="search" placeholder="Search profiles…" value="${this.#esc(this.#search)}">
+          <input class="search-input" id="search" placeholder="Search profiles…" value="${this.#esc(this.#search)}">
           <button class="btn-primary" id="new-btn">
             <i data-lucide="plus" style="width:14px;height:14px"></i> New Profile
           </button>
@@ -92,7 +92,7 @@ class ProfileList extends HTMLElement {
                       <span class="pri-dot" style="background:${PRIORITY_COLORS[p.default_priority] || PRIORITY_COLORS.normal}"></span>
                       <span>${p.default_priority}</span>
                       <span class="step-count"><i data-lucide="list-checks" style="width:11px;height:11px;vertical-align:middle"></i> ${p.step_count} step${p.step_count !== 1 ? 's' : ''}</span>
-                      ${p.default_duration_hours ? `<span>⏱ ${p.default_duration_hours}h</span>` : ''}
+                      ${p.default_duration_hours ? `<span>⏱ ${p.default_duration_hours}h</span>` : ''}
                     </div>
                   </div>
                   <span class="status-badge ${p.active ? 'status-active' : 'status-inactive'}">${p.active ? 'Active' : 'Inactive'}</span>
@@ -109,7 +109,7 @@ class ProfileList extends HTMLElement {
 
       <profile-form id="profile-form"></profile-form>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     const searchEl = s.querySelector('#search');
     let debounce;
diff --git a/web/components/registry/vehicle-form.mjs b/web/components/registry/vehicle-form.mjs
index ecd1d3b..deac8c9 100644
--- a/web/components/registry/vehicle-form.mjs
+++ b/web/components/registry/vehicle-form.mjs
@@ -68,7 +68,7 @@ class VehicleForm extends HTMLElement {
         <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Vehicle'}</button>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [d] });
+    if (window.lucide) lucide.createIcons({ root: d });
     d.querySelector('#dlg-close').addEventListener('click',  () => d.close());
     d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());
 
diff --git a/web/components/registry/vehicle-list.mjs b/web/components/registry/vehicle-list.mjs
index 79f3a3c..25d2849 100644
--- a/web/components/registry/vehicle-list.mjs
+++ b/web/components/registry/vehicle-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import './vehicle-form.mjs';
 
 class VehicleList extends HTMLElement {
@@ -63,7 +63,7 @@ class VehicleList extends HTMLElement {
       <div class="page-header">
         <h1>Vehicles</h1>
         <div class="toolbar">
-          <input class="search-input" id="search" placeholder="Search vehicles…" value="${this.#esc(this.#search)}">
+          <input class="search-input" id="search" placeholder="Search vehicles…" value="${this.#esc(this.#search)}">
           <button class="btn-primary" id="new-btn">
             <i data-lucide="plus" style="width:14px;height:14px"></i> Add Vehicle
           </button>
@@ -101,7 +101,7 @@ class VehicleList extends HTMLElement {
 
       <vehicle-form id="vehicle-form"></vehicle-form>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     const searchEl = s.querySelector('#search');
     let debounce;
diff --git a/web/components/shared/ui-dialog.mjs b/web/components/shared/ui-dialog.mjs
index 2ac8733..5fcbbb5 100644
--- a/web/components/shared/ui-dialog.mjs
+++ b/web/components/shared/ui-dialog.mjs
@@ -47,7 +47,7 @@ class UiDialog extends HTMLElement {
     this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
     dialog.addEventListener('click', e => { if (e.target === dialog) this.close(); });
     document.addEventListener('keydown', e => { if (e.key === 'Escape') this.close(); });
-    if (window.lucide) lucide.createIcons({ nodes: [this.shadowRoot] });
+    if (window.lucide) lucide.createIcons({ root: this.shadowRoot });
   }
 
   open()  { this.shadowRoot?.querySelector('dialog')?.showModal(); }
diff --git a/web/components/shared/ui-empty.mjs b/web/components/shared/ui-empty.mjs
index fe9ee52..05f0896 100644
--- a/web/components/shared/ui-empty.mjs
+++ b/web/components/shared/ui-empty.mjs
@@ -29,7 +29,7 @@ class UiEmpty extends HTMLElement {
         ${body ? `<p>${body}</p>` : ''}
         <slot></slot>
       </div>`;
-    if (window.lucide) lucide.createIcons({ nodes: [this.shadowRoot] });
+    if (window.lucide) lucide.createIcons({ root: this.shadowRoot });
   }
 }
 customElements.define('ui-empty', UiEmpty);
diff --git a/web/components/shared/ui-toast.mjs b/web/components/shared/ui-toast.mjs
index d0d3c86..2612883 100644
--- a/web/components/shared/ui-toast.mjs
+++ b/web/components/shared/ui-toast.mjs
@@ -22,7 +22,7 @@ class UiToastContainer extends HTMLElement {
     });
     toast.innerHTML = `<i data-lucide="${icons[type] || 'info'}" style="width:16px;height:16px;flex-shrink:0"></i><span>${message}</span>`;
     this.appendChild(toast);
-    if (window.lucide) lucide.createIcons({ nodes: [toast] });
+    if (window.lucide) lucide.createIcons({ root: toast });
 
     const style = document.createElement('style');
     style.textContent = `@keyframes toastIn{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:none}}`;
diff --git a/web/components/work-orders/wo-checklist.mjs b/web/components/work-orders/wo-checklist.mjs
index bfa6acc..9464dd3 100644
--- a/web/components/work-orders/wo-checklist.mjs
+++ b/web/components/work-orders/wo-checklist.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 
 class WoChecklist extends HTMLElement {
   #woId    = null;
@@ -120,7 +120,7 @@ class WoChecklist extends HTMLElement {
       ${allDone ? `
         <div class="all-done">
           <i data-lucide="check-circle-2" style="width:18px;height:18px;flex-shrink:0"></i>
-          All ${total} steps complete — ready for review!
+          All ${total} steps complete — ready for review!
         </div>` : ''}
 
       <div class="progress-wrap">
@@ -133,7 +133,7 @@ class WoChecklist extends HTMLElement {
 
       <div class="steps-list">
         ${total === 0
-          ? '<div class="empty-steps">No steps yet — add your first step below</div>'
+          ? '<div class="empty-steps">No steps yet — add your first step below</div>'
           : this.#steps.map(st => `
             <div class="step-row${st.completed ? ' done' : ''}">
               <div class="step-check-wrap">
@@ -150,7 +150,7 @@ class WoChecklist extends HTMLElement {
                   <div class="step-meta">
                     <i data-lucide="user-check" style="width:12px;height:12px"></i>
                     ${this.#esc(st.completed_by)}
-                    ${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''}
+                    ${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''}
                   </div>` : ''}
                 ${st.notes ? `<div class="step-note">"${this.#esc(st.notes)}"</div>` : ''}
               </div>
@@ -169,14 +169,14 @@ class WoChecklist extends HTMLElement {
       <div class="add-section">
         <div class="add-section-label">Add Step</div>
         <div class="add-row">
-          <input class="add-input" id="new-step-title" placeholder="Step title…" maxlength="200">
+          <input class="add-input" id="new-step-title" placeholder="Step title…" maxlength="200">
           <button class="add-btn" id="add-step-btn">
             <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle"></i> Add
           </button>
         </div>
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
 
     s.querySelectorAll('.step-check').forEach(cb => {
       cb.addEventListener('change', () => {
diff --git a/web/components/work-orders/wo-detail.mjs b/web/components/work-orders/wo-detail.mjs
index fbabf4f..bf22044 100644
--- a/web/components/work-orders/wo-detail.mjs
+++ b/web/components/work-orders/wo-detail.mjs
@@ -43,7 +43,7 @@ class WoDetail extends HTMLElement {
     const s = this.shadowRoot;
     s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
     this.#bind();
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
   }
 
   #css() { return `
@@ -297,7 +297,7 @@ class WoDetail extends HTMLElement {
         this.#tab = tab.dataset.tab;
         s.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === this.#tab));
         s.querySelector('#tab-content').innerHTML = this.#tabContent(this.#wo);
-        if (window.lucide) lucide.createIcons({ nodes: [s.querySelector('#tab-content')] });
+        if (window.lucide) lucide.createIcons({ root: s.querySelector('#tab-content') });
       }));
 
     // Status dropdown
diff --git a/web/components/work-orders/wo-form.mjs b/web/components/work-orders/wo-form.mjs
index dbfdbb5..505292b 100644
--- a/web/components/work-orders/wo-form.mjs
+++ b/web/components/work-orders/wo-form.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import { toLocalDatetime } from '../../lib/format.mjs';
 
 const STATUSES  = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
@@ -30,7 +30,7 @@ class WoForm extends HTMLElement {
     const s = this.shadowRoot;
     s.innerHTML = `<style>${this.#css()}</style>${this.#html(wo, isNew)}`;
     this.#bind();
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
   }
 
   #css() { return `
@@ -97,14 +97,14 @@ class WoForm extends HTMLElement {
                 </button>` : ''}
               </div>
               <label>Title *<input name="title" required value="${v('title')}" placeholder="Brief description of the work"></label>
-              <label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
-              <label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
+              <label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
+              <label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
             </div>
             <div class="card">
               <div class="card-title">Location</div>
               <label>Site Name<input name="site_name" value="${v('site_name')}" placeholder="e.g. Downtown Office"></label>
               <label>Address<input name="address" value="${v('address')}" placeholder="Street address"></label>
-              <label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
+              <label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
             </div>
           </div>
 
@@ -164,8 +164,8 @@ class WoForm extends HTMLElement {
           <button class="lp-close" id="lp-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
         </div>
         <div class="lp-body">
-          <input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
-          <div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
+          <input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
+          <div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
         </div>
         <div class="lp-footer">
           <button class="btn btn-ghost" id="lp-cancel">Cancel</button>
@@ -262,7 +262,7 @@ class WoForm extends HTMLElement {
       listEl.innerHTML = items.map(p => `
         <div class="lp-item${selectedProfile?.id === p.id ? ' selected' : ''}" data-id="${p.id}">
           <div class="lp-item-name">${this.#esc(p.name)}</div>
-          <div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
+          <div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
         </div>`).join('');
       listEl.querySelectorAll('.lp-item').forEach(item => {
         item.addEventListener('click', () => {
@@ -277,7 +277,7 @@ class WoForm extends HTMLElement {
       selectedProfile = null;
       confirmBtn.disabled = true;
       searchEl.value = '';
-      listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
+      listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
       dialog.showModal();
       try {
         allProfiles = await api.get('/profiles') || [];
diff --git a/web/components/work-orders/wo-list.mjs b/web/components/work-orders/wo-list.mjs
index 1eccee8..bf8d77f 100644
--- a/web/components/work-orders/wo-list.mjs
+++ b/web/components/work-orders/wo-list.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 import { formatDateTime } from '../../lib/format.mjs';
 
 const STATUSES  = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
@@ -38,7 +38,7 @@ class WoList extends HTMLElement {
     const s = this.shadowRoot;
     s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
     this.#bind();
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
   }
 
   #css() { return `
@@ -139,7 +139,7 @@ class WoList extends HTMLElement {
     return `<div class="filter-bar">
       <div class="search-wrap">
         <i data-lucide="search"></i>
-        <input class="search-input" id="search" type="search" placeholder="Search work orders…" value="${this.#filters.search}">
+        <input class="search-input" id="search" type="search" placeholder="Search work orders…" value="${this.#filters.search}">
       </div>
       <select class="filter" id="filter-status">
         <option value="">All statuses</option>
@@ -167,7 +167,7 @@ class WoList extends HTMLElement {
           <tr class="wo-row" data-id="${wo.id}">
             <td class="wo-num">${wo.wo_number}</td>
             <td class="wo-title">${this.#esc(wo.title)}</td>
-            <td>${this.#esc(wo.site_name) || '<span style="color:var(--text-muted)">—</span>'}</td>
+            <td>${this.#esc(wo.site_name) || '<span style="color:var(--text-muted)">—</span>'}</td>
             <td><ui-badge type="status" value="${wo.status}"></ui-badge></td>
             <td>
               <span class="priority-dot" style="background:${PRI_COLOR[wo.priority]}"></span>
@@ -200,7 +200,7 @@ class WoList extends HTMLElement {
             </div>
             <ui-badge type="status" value="${wo.status}"></ui-badge>
           </div>
-          <div class="card-meta">${this.#esc(wo.site_name) || '—'}  ·  ${wo.steps_done}/${wo.step_count} steps</div>
+          <div class="card-meta">${this.#esc(wo.site_name) || '—'}  ·  ${wo.steps_done}/${wo.step_count} steps</div>
         </div>`).join('')}
     </div>`;
   }
diff --git a/web/components/work-orders/wo-map.mjs b/web/components/work-orders/wo-map.mjs
index cd534f3..30bc7ba 100644
--- a/web/components/work-orders/wo-map.mjs
+++ b/web/components/work-orders/wo-map.mjs
@@ -54,7 +54,7 @@ class WoMap extends HTMLElement {
           </div>` : ''}
       </div>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [this] });
+    if (window.lucide) lucide.createIcons({ root: this });
 
     if (lat && lng) {
       this.#initMap(lat, lng, siteName, woNumber);
diff --git a/web/components/work-orders/wo-photo-panel.mjs b/web/components/work-orders/wo-photo-panel.mjs
index d92c757..3d07003 100644
--- a/web/components/work-orders/wo-photo-panel.mjs
+++ b/web/components/work-orders/wo-photo-panel.mjs
@@ -202,7 +202,7 @@ class WoPhotoPanel extends HTMLElement {
         </div>
       </dialog>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
     this.#bindEvents(filtered);
   }
 
@@ -261,7 +261,7 @@ class WoPhotoPanel extends HTMLElement {
     preview.innerHTML = Array.from(files).map(f =>
       `<div class="preview-item"><i data-lucide="image" style="width:13px;height:13px"></i> ${this.#esc(f.name)}</div>`
     ).join('');
-    if (window.lucide) lucide.createIcons({ nodes: [preview] });
+    if (window.lucide) lucide.createIcons({ root: preview });
     btn.disabled = files.length === 0;
   }
 
@@ -282,7 +282,7 @@ class WoPhotoPanel extends HTMLElement {
           <button class="lightbox-next"><i data-lucide="chevron-right" style="width:20px;height:20px"></i></button>` : ''}
         ${p.caption ? `<div class="lightbox-caption">${this.#esc(p.caption)}</div>` : ''}`;
       s.appendChild(lb);
-      if (window.lucide) lucide.createIcons({ nodes: [lb] });
+      if (window.lucide) lucide.createIcons({ root: lb });
       lb.querySelector('.lightbox-close').addEventListener('click', () => lb.remove());
       lb.addEventListener('click', e => { if (e.target === lb) lb.remove(); });
       lb.querySelector('.lightbox-prev')?.addEventListener('click', e => { e.stopPropagation(); show(i - 1); });
diff --git a/web/components/work-orders/wo-resource-panel.mjs b/web/components/work-orders/wo-resource-panel.mjs
index f621d44..6e62ec9 100644
--- a/web/components/work-orders/wo-resource-panel.mjs
+++ b/web/components/work-orders/wo-resource-panel.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 
 const SECTIONS = [
   { type: 'person',    label: 'People',    icon: 'users',       endpoint: 'people'    },
@@ -67,8 +67,8 @@ class WoResourcePanel extends HTMLElement {
   }
 
   #resourceName(item, type) {
-    if (type === 'vehicle') return `${item.unit_number}${item.description ? ' – ' + item.description : ''}`;
-    return item.name || item.unit_number || '—';
+    if (type === 'vehicle') return `${item.unit_number}${item.description ? ' – ' + item.description : ''}`;
+    return item.name || item.unit_number || '—';
   }
 
   #sectionHTML(section) {
@@ -166,7 +166,7 @@ class WoResourcePanel extends HTMLElement {
           <button class="dialog-close" id="picker-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
         </div>
         <div class="dialog-body">
-          <input class="picker-search" id="picker-search" placeholder="Search…" autocomplete="off">
+          <input class="picker-search" id="picker-search" placeholder="Search…" autocomplete="off">
           <div class="picker-list" id="picker-list"></div>
           <div class="qty-row" id="qty-row" style="display:none">
             <label class="qty-label" for="qty-input">Quantity:</label>
@@ -179,7 +179,7 @@ class WoResourcePanel extends HTMLElement {
         </div>
       </dialog>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
     this.#bindEvents();
   }
 
@@ -250,7 +250,7 @@ class WoResourcePanel extends HTMLElement {
 
     container.innerHTML = available.map(item => {
       const name = type === 'vehicle'
-        ? `${item.unit_number}${item.description ? ' – ' + item.description : ''}`
+        ? `${item.unit_number}${item.description ? ' – ' + item.description : ''}`
         : item.name;
       const sub = item.role || item.vehicle_type || item.category || (item.part_number ? `#${item.part_number}` : '') || '';
       return `
diff --git a/web/components/work-orders/wo-timeline.mjs b/web/components/work-orders/wo-timeline.mjs
index 5eb68e3..a00fe72 100644
--- a/web/components/work-orders/wo-timeline.mjs
+++ b/web/components/work-orders/wo-timeline.mjs
@@ -1,4 +1,4 @@
-import { api } from '../../lib/api.mjs';
+import { api } from '../../lib/api.mjs';
 
 const ACTION_ICONS = {
   status_change:     'refresh-cw',
@@ -122,7 +122,7 @@ class WoTimeline extends HTMLElement {
                   ${this.#detailHTML(e)}
                   <div class="entry-meta">
                     <span class="entry-user">${this.#esc(e.performed_by)}</span>
-                    <span>·</span>
+                    <span>·</span>
                     <span title="${new Date(e.performed_at).toLocaleString()}">${this.#relativeTime(e.performed_at)}</span>
                   </div>
                 </div>
@@ -134,7 +134,7 @@ class WoTimeline extends HTMLElement {
         <i data-lucide="rotate-cw" style="width:13px;height:13px"></i> Refresh
       </button>`;
 
-    if (window.lucide) lucide.createIcons({ nodes: [s] });
+    if (window.lucide) lucide.createIcons({ root: s });
     s.querySelector('#refresh-btn').addEventListener('click', () => this.#load());
   }
 
@@ -143,7 +143,7 @@ class WoTimeline extends HTMLElement {
       return `<div class="entry-detail">
         <span class="status-change">
           <span class="status-badge">${this.#esc(e.old_value.replace('_',' '))}</span>
-          <span class="status-arrow">→</span>
+          <span class="status-arrow">→</span>
           <span class="status-badge" style="background:var(--surface-2)">${this.#esc(e.new_value.replace('_',' '))}</span>
         </span>
       </div>`;