Patient overview

A React block (a whole screen) in Beamline's Clinic app.

One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth date and chart number; inactive ones only when asked, and marked), each with its shortcuts (one you can't open says so). The header keeps who it is and shows what the job needs: clinical (the recall, overdue said, last and next visit, the clinical summary) or billing (the balance large with a bar of its ages, current in ink shading to amber and red, unapplied credit, payment plans and open claims, each apart). Opening another patient shows their name while loading, never the last patient's numbers. The page lists what needs doing (forms, an old history, stale eligibility, no next visit, no provider), medical alerts with the answers they came from, insurance with when eligibility was checked, and the household's balances, credits and expected insurance in separate columns. The clinical summary opens beside it with prescriptions (not known apart from none), recalls, notes to sign, lab cases, the medical history by version (an older one keeps its date) and treatment counts that show their codes. Colour is kept for what can hurt or is late: an allergy edged red, a condition amber, a medication a plain line; what needs doing and what's overdue in amber words, never filled boxes.

Use it for

The page a front desk or clinician opens for one patient, client or member.
Any record page whose header must keep identity while what it shows changes by the job.

Not for

A sales contact (contact-profile).
The patient's account in detail (account-ledger).

Anatomy

top: the product's mark, patient search with recent patients, results with birth date, chart number, location, inactive mark and shortcuts
identity: initials, name, birth date and age, chart number, preferred name; clinical or billing
context: recall, last and next visit, clinical summary; or balance by age, unapplied credit, payment plans, open claims
needs doing, medical alerts, details, insurance with eligibility, household
clinical summary sheet: prescriptions, recalls, notes to sign, lab cases, treatment counts with codes, medical history by version

States

recall overdue, no next visit, old aging (warning); unapplied credit (info)
needs doing: each a warning with its action; none said
alerts: allergy and condition (danger), medication (info)
eligibility: checked (success), stale or never (warning), not eligible (danger)
loading: the next patient's name, nothing of the last patient's
search: recent, searching, results, none, failed; inactive marked; a shortcut you can't open said
summary: prescriptions not known apart from none; an older history version says its date
phone: one column
right to left: the layout mirrors
reduced motion: nothing animates

Keyboard

Tab to the search; typing searches; Tab through results and their shortcuts; Escape closes the results; the summary sheet traps focus and closes on Escape

Motion

The summary sheet slides in from its edge. Nothing runs at rest.

Props

Prop	Type	Default	Description
`defaultRecord` (required)	`PatientRecord`	—
`recent` (required)	`PatientHit[]`	—
`search` (required)	`(query: string, includeInactive: boolean) => Promise<PatientHit[]>`	—	The host's search: name, chart number or birth date; inactive patients only when asked.
`load` (required)	`(id: string) => Promise<PatientRecord>`	—	Load a patient's record.
`restricted`	`PatientLink[]`	—	Shortcuts this person may not open.
`onLink`	`((patientId: string, link: "history" \| "provider" \| PatientLink \| "eligibility" \| "form…`	—
`defaultContext`	`"billing" \| "clinical"`	—
`now`	`string`	—
`currency`	`string`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { PatientOverview } from "@beamline/patient-overview";

Get it

Patient overview is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent