feature: Design System, App Shell, and Login Redesign

docs/vigilcare-records-prd.md

@@ -4,6 +4,8 @@
 
 **Phases 1–13 are complete.** Post-phase hardening (health checks, user management, auth rate limiting, document access audit, batch cancellation, list sorting, unified promotion retry, normalized patient deduplication, assignment-time `IN_ENTRY` transitions, API-proxied document streaming, CORS) is also done. See the [gap analysis](vigilcare-records-gap-analysis.md) summary matrix for remaining open items.
 
+**Phases 14–18 (UI redesign)** are planned: restyle and re-layout `vigilcare-records-web` against [designs/design-doc.md](designs/design-doc.md) without new backend behavior. Implementation guides: [plans/](plans/).
+
 | Phase | Scope | Status |
 |---|---|---|
 | 1 | Schema, auth, roles, batch CRUD, MinIO upload, status machine | Done |
@@ -19,8 +21,13 @@
 | 11 | HL7 FHIR R4 read-only API and FHIR Explorer UI | Done |
 | 12 | Backend-driven batch-type field requirements (`fieldRequirements` metadata) | Done |
 | 13 | Optional OCR-assisted draft pre-fill (Azure or Tesseract; disabled by default) | Done |
+| 14 | UI redesign: design tokens, app shell (sidebar), login | Planned |
+| 15 | UI redesign: shared UX primitives (status, OCR badges, SoD, sticky actions) | Planned |
+| 16 | UI redesign: Entry / Verification / Clinical Approval workstation layouts | Planned |
+| 17 | UI redesign: Intake, Cover Sheets, Live Capture, History, Dashboard, FHIR Explorer | Planned |
+| 18 | UI redesign: surface unused APIs (batch events, work queues, Users admin) | Planned |
 
-**Verification scripts:** `./scripts/run-vigilcare-records-verification-p9.sh` (full workflow + metrics), `./scripts/run-vigilcare-records-phase-10-verification.sh`, `./scripts/run-vigilcare-records-phase-11-verification.sh`, `./scripts/run-vigilcare-records-phase-13-verification.sh`.
+**Verification scripts:** `./scripts/run-vigilcare-records-verification-p9.sh` (full workflow + metrics), `./scripts/run-vigilcare-records-phase-10-verification.sh`, `./scripts/run-vigilcare-records-phase-11-verification.sh`, `./scripts/run-vigilcare-records-phase-13-verification.sh`. Phases 14–18 verify via Vitest + manual checklists in each plan.
 
 See [README.md](../README.md) for API reference, quick start, and [digitization-workstation-guide.md](digitization-workstation-guide.md) for operator workflows.
 
@@ -568,7 +575,7 @@ SMART on FHIR authorization and FHIR write operations remain out of scope.
 
 ---
 
-## Digitization Workstation UI — *implemented (Phases 7, 10, 11, 12, 13)*
+## Digitization Workstation UI — *implemented (Phases 7, 10, 11, 12, 13); redesign Planned (Phases 14–18)*
 
 Vue 3 SPA at `vigilcare-records-web/` (dev server port **3028**, proxies `/api` and `/fhir` → API on **5217**). Role-based routing with JWT refresh.
 
@@ -586,6 +593,20 @@ Vue 3 SPA at `vigilcare-records-web/` (dev server port **3028**, proxies `/api`
 
 Scan viewer loads documents via authenticated `GET /digitization-batches/:id/document` blob URLs (avoids cross-origin MinIO iframe issues). Not a full EMR UI — clinical alerting views remain in VigilCareClinical's ward dashboard.
 
+### UI redesign roadmap (Phases 14–18)
+
+Constrained to **existing API capabilities**. Design source: [designs/design-doc.md](designs/design-doc.md) (section 36 corrections override mockups). Plans: [plans/README.md](plans/README.md).
+
+| Phase | Focus |
+|---|---|
+| 14 | Navy/blue design tokens, role-filtered sidebar shell, split login (no role picker); keep Public Sans |
+| 15 | Shared primitives: status badges, empty/loading/error, sticky action bar, OCR % badges, SoD banner, confirm dialogs |
+| 16 | Dense Entry / Verification / Clinical Approval workstation layouts |
+| 17 | Restyle Intake, Cover Sheets, Live Capture, Patient History, Queue Dashboard, FHIR Explorer |
+| 18 | Wire unused APIs: batch events panel, `work-queue/*` lists, administrator Users page |
+
+Deferred mockup items (global search, notifications, Reports/Master Data, SSO, OCR region highlight, infra health widgets) are listed in [plans/README.md](plans/README.md).
+
 See [digitization-workstation-guide.md](digitization-workstation-guide.md) for operator workflows and clinical scenarios.
 
 ---
@@ -666,12 +687,17 @@ If VigilCareClinical is unreachable in split deployment, batch remains `approved
 | 11 | HL7 FHIR R4 read-only API and FHIR Explorer UI | Done |
 | 12 | Backend-driven batch-type field requirements | Done |
 | 13 | Optional OCR-assisted draft pre-fill | Done |
+| 14 | UI redesign: tokens, app shell, login | Planned |
+| 15 | UI redesign: shared UX primitives | Planned |
+| 16 | UI redesign: Entry / Verification / Approval workstation | Planned |
+| 17 | UI redesign: supporting screens + dashboard | Planned |
+| 18 | UI redesign: surface unused existing APIs | Planned |
 
 ---
 
 ## Step-by-Step Guide
 
-Complete phases in order. Promotion (Phase 4) must not be built until the draft state machine and separation of duties are correct — debugging promotion bugs alongside workflow bugs is painful.
+Complete phases in order. Promotion (Phase 4) must not be built until the draft state machine and separation of duties are correct — debugging promotion bugs alongside workflow bugs is painful. For Phases 14–18, complete each UI plan before starting the next; do not invent backend features to match mockups.
 
 ---
 
@@ -796,6 +822,46 @@ This phase connects Records to Clinical. Run against a VigilCareClinical Phase 2
 
 ---
 
+### Phase 14 — UI Design System, Shell, Login
+
+**What to do:** Map design-doc color tokens into Tailwind (keep Public Sans); add role-filtered `AppShell` sidebar for existing routes; redesign login as split brand + form without a role selector.
+
+**Plan:** [plans/phase-14-plan.md](plans/phase-14-plan.md)
+
+---
+
+### Phase 15 — Shared UX Primitives
+
+**What to do:** Status badges, empty/loading/error patterns, sticky workstation action bar, OCR percentage badges, separation-of-duties banner, confirmation dialogs for irreversible actions.
+
+**Plan:** [plans/phase-15-plan.md](plans/phase-15-plan.md)
+
+---
+
+### Phase 16 — Workstation Layouts (Entry, Verification, Approval)
+
+**What to do:** Dense scan-first layouts with sticky CTAs and design-doc action labels; apply SoD and OCR primitives; no API contract changes.
+
+**Plan:** [plans/phase-16-plan.md](plans/phase-16-plan.md)
+
+---
+
+### Phase 17 — Supporting Screens
+
+**What to do:** Restyle Intake, Cover Sheets, Live Capture, Patient History, Queue Dashboard (overview metrics only — no infra health), and FHIR Explorer.
+
+**Plan:** [plans/phase-17-plan.md](plans/phase-17-plan.md)
+
+---
+
+### Phase 18 — Surface Unused APIs in the UI
+
+**What to do:** Batch events audit panel; prefer `work-queue/entry|verification|clinical-approval` for queues; administrator Users page via existing `UsersController`.
+
+**Plan:** [plans/phase-18-plan.md](plans/phase-18-plan.md)
+
+---
+
 ## Deployment Notes (Small Island Context)
 
 - **Single-site tenant:** One hospital or health district per deployment. No cross-island federation in v1.
@@ -838,7 +904,8 @@ This phase connects Records to Clinical. Run against a VigilCareClinical Phase 2
 
 - [README.md](../README.md) — API reference, quick start, verification scripts, data models
 - [digitization-workstation-guide.md](digitization-workstation-guide.md) — clinical scenarios (backfill, live capture, corrections)
-- [plans/](plans/) — phase-by-phase implementation guides (Phases 1–13)
+- [plans/](plans/) — phase implementation guides (Phases 14–18 UI redesign; Phase 1–13 plans not in repo)
+- [designs/design-doc.md](designs/design-doc.md) — UI/UX design specification for the workstation redesign
 - [vigilcare-records-gap-analysis.md](vigilcare-records-gap-analysis.md) — post-phase hardening tracker and remaining open items
 - [vigilcare-clinical-api-prd.md](vigilcare-clinical-api-prd.md) — downstream alerting and observation ingest
 - [Completed/VigilCareClinicalAPI/VigilCare-Partner-Brief.md](Completed/VigilCareClinicalAPI/VigilCare-Partner-Brief.md) — clinical positioning and scope boundaries