Client journal
A React block (a whole screen) in Beamline's Clinic app.
A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done for today alone (a mark that is saving says so, and one the practice refuses goes back with the reason); today so far, the meals logged today (from the same days the practitioner reviews) and the client's entries in time order with the practice's comments under their meal, and the kinds they may log (only those the practice allows) above it; a new entry is a draft until it is saved. Beside it: the next appointment and how far off it is (or Book a session when none is booked), the week's goals day by day (the days ahead open, a day with no record hatched) and what they were asked to do. The practitioner's side reviews a logged day: meals in time order with their foods and amounts, a photo-only meal listed but never counted, and the day's totals (energy, protein, carbohydrate, fat) each saying how many of the day's meals it covers, with a dot per meal; comments on a meal keep their draft when sending fails. A meal can carry the client's photo (shown in their day and large in the practitioner's review), and the next appointment the practitioner's picture.
Use it for
- A client's own portal home in a care, coaching or dietetics practice: what to log, today's goals, tasks and the next appointment.
- A practitioner reviewing a client's logged day, where totals must say what they cover.
Not for
- The plan the goals come from (care-plan).
- Booking itself (client-booking).
Anatomy
- client: Hello, <name> and today's date; Today's goals with done of total, one bar and a done mark each (Saving, or the refusal); Today so far with one button per allowed kind, a new entry (what to note, a strength for mood and symptoms, the draft said, Discard and Save), then the day's meals (time, name, foods, energy when every food has it, Photo for a photo-only meal, the practice's comments) and the client's entries in time order; beside: the next appointment (time, in N days, service with whom, video or place) or No appointment booked with Book a session; This week, Monday to Sunday, each day's share of goals done; To do with due dates
- practitioner: <client>'s day with previous and next day; meals in time order (time, name, foods with amounts and energy, or Photo only: not counted), their comments and Comment (the box opens on demand and stays while it holds a draft or a failure); Day totals: each nutrient with its total, from N of M meals and a dot per meal, and how many photo-only meals are not counted; Days logged: every logged day with its energy as a bar, how many meals it covers, the open day marked; a press opens it
States
- a kind not allowed is not offered
- entry draft, saving, refused (kept), saved
- goal done today, saving, refused (back, with the reason)
- next appointment, none (Book a session)
- task done
- meal with foods, foods with unknown nutrients, photo only
- totals from all meals, from some
- comment sending, refused (draft kept), sent
- no meals logged
- narrow room: one column
Keyboard
- Tab through the log buttons, the goals, the appointment and the tasks
- a goal's done mark is a toggle button
- previous and next day are buttons; a comment sends with its button
Motion
Done marks fill in the fast duration; nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
side (required) | "client" | "practitioner" | — | Whose side: the client's home, or the practitioner reviewing a day. |
client (required) | string | — | The client's first name (their side) or full name (the practitioner's). |
practice (required) | string | — | The practice, as the client knows it. |
allowed | EntryKind[] | — | What the client may log. |
goals | TodayGoal[] | — | |
defaultGoals | TodayGoal[] | — | |
onGoalsChange | ((goals: TodayGoal[]) => void) | — | |
onGoalDone | ((goal: TodayGoal) => Promise<unknown>) | — | Saves today's occurrence of a goal as done or not; reject with the reason (the mark goes back and says so). |
tasks | ClientTask[] | — | |
next | NextAppointment | null | — | |
onBook | (() => void) | — | |
entries | JournalEntry[] | — | |
defaultEntries | JournalEntry[] | — | |
onEntriesChange | ((entries: JournalEntry[]) => void) | — | |
onEntrySave | ((entry: JournalEntry) => Promise<unknown>) | — | Saves a new entry; reject with the reason to keep it as a draft. |
days | JournalDay[] | — | Logged days: the practitioner reviews them, and the client sees today's meals (with the practice's comments) in their own day. |
week | GoalDay[] | — | The client's side: goals done on the earlier days of this week, drawn day by day beside today's. |
defaultDay | string | — | The day reviewed first, ISO. Default: the latest. |
onComment | ((meal: Meal, text: string) => Promise<MealComment>) | — | Sends a comment on a meal; resolve with the stored comment, reject with the reason to keep the draft. |
today | string | — | Today, ISO date. Default: today. |
timezone | string | — | |
locale | string | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- button
- number-field
- textarea
Dependencies
lucide-react
Import
import { ClientJournal } from "@beamline/client-journal";Get it
Client journal 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
More in Clinic
- Appointment book: The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is…
- Book an appointment: A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with…
- Services and hours: A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand…
- Patient overview: 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…
- Patient chart: 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…
- Health questionnaire: A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a…
- Case workspace: A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts…
- Care plan: A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the…
- Treatment plan: A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known…
- Plan templates: Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as…
- Plan acceptance: A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how…
- Plan follow-up: The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value…
- Session notes and tasks: A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the…
- Note templates: A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last…
- Probing chart: A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and…
- Procedure picker: Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each…
- Results notebook: A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their…
- Insurance claims: Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not…
- Account ledger: A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that…
- Dispensing: Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its…
- Record sharing: Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much…