feature: Doctor Feedback Mode

2026-06-20 14:32:51 +08:00
parent ebd53f2df6
commit 584d1edd58
17 changed files with 1385 additions and 11 deletions
@@ -1,5 +1,100 @@
-# Vue 3 + Vite
+# VigilCare Dashboard

-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Vue 3 frontend for the VigilCare Clinical API — virtual ward overview, patient clinical review, alert triage, vital sign charts, NEWS2 history, alert reasoning, and **clinician feedback** for product research.

-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+**Full user guide:** [docs/dashboard-guide.md](../docs/dashboard-guide.md) — technical overview for developers and facilitators.
+
+**Clinician testing guide:** [docs/clinical-testing-guide.md](../docs/clinical-testing-guide.md) — for doctors and nurses evaluating alerts and submitting feedback.
+
+## Quick start
+
+```bash
+# API must be running on http://localhost:5270 (see repo root README)
+npm install
+npm run dev
+```
+
+Open http://localhost:5173
+
+Optional `.env`:
+
+```env
+VITE_API_URL=http://localhost:5270
+```
+
+## Scripts
+
+| Command | Description |
+|---|---|
+| `npm run dev` | Vite dev server (port 5173) |
+| `npm run build` | Production build |
+| `npm run preview` | Preview production build |
+| `npm test` | Vitest — 38 tests across 10 files |
+
+## Routes
+
+| Path | View |
+|---|---|
+| `/ward` | Virtual Ward — active patients by NEWS2 risk |
+| `/patients/:encounterId` | Patient detail — vitals, alerts, charts, replay, reasoning |
+| `/alerts` | Alert Center — global alert inbox with feedback buttons |
+| `/feedback` | Feedback Summary — aggregate ratings + JSON/CSV export |
+
+## Features
+
+| Area | Description |
+|---|---|
+| Virtual Ward | NEWS2-sorted patient table; department filter; 10 s polling |
+| Patient Detail | Vitals, scores, alerts, orders, sepsis bundle; 5 vital charts + NEWS2 history |
+| Alert Center | Global alert inbox; acknowledge / resolve; six feedback ratings per alert |
+| Alert Reasoning | Plain-language “why it fired” + optional medication context (90 min window) |
+| Replay Controls | Local pause/resume/speed scrub through fetched data (not live simulator control) |
+| Clinician Feedback | Six ratings + optional notes on every alert; persisted in `localStorage` |
+| Feedback Summary | Aggregate stats by alert type; export JSON/CSV for study analysis |
+
+Feedback is **client-side only** in this phase — ratings stay in the browser until exported. See Phase 19 plan: `docs/plans/phase-19-plan.md`.
+
+## Stack
+
+Vue 3 (`<script setup>`), Vue Router, Pinia, Tailwind CSS v4, Chart.js + vue-chartjs, Vitest.
+
+## Project layout
+
+```
+src/
+├── api/              # HTTP client, encounters, clinical, alerts, normalize
+├── components/
+│   ├── alerts/       # AlertCard, AlertReasoning, AlertFilters, AcknowledgeModal
+│   ├── charts/       # VitalChart, VitalTrendChart, TrendsGrid, News2History
+│   ├── feedback/     # FeedbackButtons (six ratings + notes)
+│   ├── layout/       # AppShell, AppSidebar, AppHeader, MobileNav
+│   ├── patient/      # VitalsPanel, ScoresPanel, AlertsList, OrdersPanel, SepsisBundlePanel
+│   ├── replay/       # ReplayControls
+│   ├── ui/           # Button, Badge, Card, Modal, EmptyState, Skeleton
+│   └── ward/         # WardTable, PatientRow, PatientCard
+├── composables/      # useChartData, useReplayControls, usePolling, useFeedback, chartFormat
+├── stores/           # ward, alerts, settings, feedback (localStorage persistence)
+├── views/            # WardDashboard, PatientDetail, AlertCenter, FeedbackSummary
+└── __tests__/        # Vitest — store, composables, components, views
+```
+
+## Tests
+
+```bash
+npm test
+```
+
+| File | Coverage |
+|---|---|
+| `useFeedbackStore.test.js` | Pinia store — CRUD, stats, grouping, export, localStorage |
+| `FeedbackButtons.test.js` | Six rating buttons, selection, notes, ARIA, keyboard |
+| `FeedbackSummary.test.js` | Aggregate stats, per-type breakdown, export buttons |
+| `AlertCard.test.js` | Severity display, acknowledge/resolve, feedback integration |
+| `AlertReasoning.test.js` | Reasoning text for sepsis, qSOFA, unknown types |
+| `useChartData.test.js` | Chart data transformation |
+| `useReplayControls.test.js` | Pause, speed, progress, jump |
+| `usePolling.test.js` | Polling interval composable |
+| `WardTable.test.js` | Ward table rendering |
+| `Badge.test.js` | Severity badge variants |
+
+Implementation plans: `docs/plans/phase-17-plan.md` (ward shell), `docs/plans/phase-18-plan.md` (charts, replay, reasoning), `docs/plans/phase-19-plan.md` (clinician feedback).