# 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).