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 — technical overview for developers and facilitators.
Clinician testing guide: docs/clinical-testing-guide.md — for doctors and nurses evaluating alerts and submitting feedback.
Quick start
# API must be running on http://localhost:5270 (see repo root README)
npm install
npm run dev
Optional .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
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).