Patient chart

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

A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when, unknown said) sits above their animals, archived ones folded apart; choosing an animal scopes the record, history and reminders to it, reminders and refills labelled with the animal. A visit's record moves from Draft through In progress to Locked, each step said with what it means and the current one on its tone; the auto-lock time is said (or that it isn't known); locked, it reads as a summary with who locked it and when, and unlocks only where allowed, as a new revision with a reason. Billing still due is shown apart from the lock; hospitalised is its own switch. The history searches by record type, range, order and keyword (weights only when asked): each entry its date, author, type and text with the match marked; a partial index is said, and no match is never offered as proof of absence. The record's status is one line of three steps with only the current one's meaning beside it; its sections read as a document, each edited in place (an empty one offers to add it).

Use it for

A record keeper's view of one customer with several subjects (a client's animals, a family's patients, an owner's vehicles) where everything below scopes to the one chosen.
A document that moves from draft to locked, unlocks only as a new revision, and keeps who locked it and when.
Searching one subject's history by type, range and keyword with the match marked and the index's limits said.

Not for

Writing a therapy or care note (session-notes, care-plan).
A list of many patients (a table or queue block).

Anatomy

header: the product's mark, the client's name, Record or History
side: phone and email, contact preferences as tinted chips, the balance on its tone with what it means and as of when; the animals (species, breed, age, an alert mark), archived ones folded with why and when; reminders and refills for the chosen animal, each labelled with it, overdue on a warning tint
animal head: colour dot and a rule in the animal's colour, name, species, breed, sex, weight; an alert on a danger tint
record: visits as small cards with their status; the reason, date and clinician, revision; Hospitalised; three steps (Draft, In progress, Locked) each with what it means; auto-lock or locked by whom and when; billing still due apart; sections editable, or read-only once locked; Start, Lock, or Unlock (as revision n, with a reason) or why it can't be unlocked
history: keyword, range, order, Include weights; record type; a partial index said; the count; entries with a type tag, date, author and text with the match marked; no match said with why it isn't proof

States

client: balance owed, credit, settled, unknown; preferences, no phone
animals: active, with an alert, archived, age or weight not known
record: draft, in progress, locked, auto-lock known or not, locking, lock refused, unlock allowed (revision with a reason) or not, billing due, billed, unknown, hospitalised
history: matches marked, filtered by type, range and order, weights included, partial index, no match
loading: shaped skeletons
phone: one column; steps stack
right to left: mirrored, the fold's chevron turns the other way
reduced motion: through the tokens

Keyboard

Tab through the animals, the view, the visits, the record's fields and actions, and the history's filters
Enter or Space chooses an animal or a visit

Motion

The current step's tint and border change in the fast duration; the archived fold's chevron turns. Nothing runs at rest.

Props

Prop	Type	Default	Description
`client` (required)	`ChartClient`	—
`animals` (required)	`ChartAnimal[]`	—
`records` (required)	`VisitRecord[]`	—
`history`	`HistoryEntry[]`	—
`reminders`	`ChartReminder[]`	—
`defaultAnimal`	`string`	—	The animal open at first; the first active one otherwise.
`defaultRecord`	`string`	—	The record open at first; the animal's latest otherwise.
`defaultView`	`"history" \| "record"`	—
`defaultQuery`	`string`	—
`canUnlock`	`boolean`	—	Whether this user may unlock a locked record (as a new revision).
`onRecordChange`	`((recordId: string, change: RecordChange) => Promise<void \| { lockedBy?: string \| undef…`	—
`indexedFrom`	`string \| null`	—	The history search covers entries from this date on; null: all of it.
`today`	`string`	—
`currency`	`string`	—
`loading`	`boolean`	—
`product`	`string`	—
`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

Dependencies

lucide-react

Import

import { PatientChart } from "@beamline/patient-chart";

Get it

Patient chart 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

Patient chartComplete system · $49

A clinic's chart for one client and their animals.

A visit's record

Biscuit's discharge record is in progress and locks by itself tomorrow at 18:00; $77.50 of the visit is still to bill, apart from the lock. Lock it to see the read-only summary with who locked it and when, then unlock it as revision 2 with a reason. Pick Pepper and only Pepper's record and reminders show. States: a draft whose auto-lock time isn't known; a locked record for someone who can't unlock; a lock Pawprint refuses; a client whose balance couldn't be read and an animal with no age or weight; loading.

0 × 0full

Searching the history

Biscuit's history searched for “vomit”: each entry with its date, author and type, the match marked. Weights join only when asked. The index starts in January 2024, said, so the 2023 scanned record isn't found; no match is never proof of absence.