102 lines
4.5 KiB
Markdown
102 lines
4.5 KiB
Markdown
# VigilCare Dashboard
|
|
|
|
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.
|
|
|
|
**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 — you will be redirected to `/login`. Demo credentials are seeded by the API (see repo root README / Phase 31 plan).
|
|
|
|
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 — 41 tests across 10 files |
|
|
|
|
## Routes
|
|
|
|
| Path | View |
|
|
|---|---|
|
|
| `/login` | Sign in — JWT auth against the clinical API |
|
|
| `/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; charts/vitals filter by replay clock; **Next Alert →** jumps to each open alert |
|
|
| 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, auth, settings, feedback (localStorage persistence)
|
|
├── views/ # LoginView, 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` | Scenario bounds, progress, jumpToOffset/Timestamp, isAtOrBefore, instant speed |
|
|
| `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).
|