Protocol builder
A React block (a whole screen) in Beamline's Salon & fitness app.
A practitioner's reusable protocol and the client copies made from it. Foods and habits each carry a written intent (Include, Reduce, Exclude) in its tone; products carry their regimen read as one sentence ("Magnesium glycinate: 1–2 capsules, with dinner and at bedtime, for 8 weeks."). A regimen is edited in a sheet: amount and unit always together (a range when wanted), a product measured in other units asking for its unit instead of keeping the old one, timing as named moments, how long or ongoing, and the sentence read back before it is used. The editor always says whether it's the template or a named client's copy, and that the template and other copies stay untouched; saving the template makes a new version that copies already made don't follow; publishing a copy is its own step and reports whether the client's app took it. Beside it, the protocol as the client reads it, grouped by intent.
Use it for
- A practitioner's reusable plan of foods, habits and products, copied to a client and published to their app.
- Writing how a product is taken (amount, unit, when, how long) so it reads back plainly.
Not for
- A client's care plan of goals and documents (care-plan).
- A program of modules opening over time (program-modules).
- Prescribing medicines in a clinical record.
Anatomy
- header: the product's mark, the protocol, what is open (the template or a client's copy)
- banner: the template with its version and copies, or the client's copy with where it came from and its publish state
- foods and habits: each with its intent mark, the intent control, remove; a new one with its intent and Add
- products: each regimen as a sentence with edit and remove; Add a product
- actions: make a copy for a client (template), Save as vn or Save the copy, Publish to the client (copy); the notice
- the client's reading: Include, Reduce, Exclude, Take
- regimen sheet: product, amount (or from and to) with its unit, a range, when (named moments), how long, a note, the sentence read back, Use this
States
- editing the template or a client's copy (always said)
- a copy: not published, published (delivered or not yet), changed since published
- saving, saved (with what stays untouched), refused (kept); copying; publishing, published, not delivered yet, refused
- regimen: a unit asked after a product change, a range the wrong way round, nothing chosen yet (Use this waits)
- phone: one column, the reading under the editor
- right to left: mirrors
Keyboard
- Tab through the editing choice, each recommendation's intent and remove, the add row, each product's edit and remove, Save and Publish; the sheet's controls in order
Motion
None of its own.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
template (required) | Protocol | — | |
copies | ClientCopy[] | — | |
products (required) | Product[] | — | |
clients | string[] | — | Clients a copy can be made for. |
onSaveTemplate | ((protocol: Protocol) => Promise<{ version: number; }>) | — | Save the template as a new version; copies already made keep theirs. |
onCopy | ((client: string) => Promise<ClientCopy>) | — | Make a client's copy of the template as it is now. |
onSaveCopy | ((copy: ClientCopy) => Promise<ClientCopy>) | — | Save a client's copy; the template and other copies are untouched. |
onPublish | ((copyId: string) => Promise<{ at: string; delivered: string | null; }>) | — | Publish a client's copy to their app; resolve with when, and when it was delivered (null: not yet). |
defaultEditing | string | — | What is open at the start: the template, or a copy by id. |
defaultRegimen | string | null | — | A regimen open at the start, by id. |
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
- Avatar
- Bottom sheet
- Button
- Checkbox
- Combobox
- Input
- Label
- Number field
- Segmented control
- Select
- Sheet
- Spinner
- Switch
- Text morph
- Textarea
- Tooltip
Dependencies
lucide-react
Import
import { ProtocolBuilder, MOMENTS } from "@beamline/protocol-builder";Get it
Protocol builder 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 Salon & fitness
- Workout planner: A training plan a person lives in: the program's next session with its estimate and Start, an exercise replaced for this session only or for every later…
- Workout logger: A live training session: every exercise's sets as target-table rows with a done column; marking a set done fills its shape and starts the rest by itself…
- Training progress: A person's training history: the headline counts (weeks in a row, days since the last workout, workouts this month), a month calendar that names each…
- Program setup: A training program's setup and living settings: the intake (one question per step, the week drawn as you answer, a failed generation keeping every…
- Nutrition library: A nutrition practice's library. Recipes: ingredients with grams and servings, nutrients per serving summed (energy, protein, carbohydrate, fat, fibre), a…
- Packages & memberships: Prepaid packages and series, built: the packages down the side (version and how many sold, or not on sale yet), the open one beside them. Its price is a…
- Client forms: A salon's or spa's client forms and who they ask: the forms down the side with where each stands (on, set up and off, not set up yet), the open one…
- Instructor finder: Finding a flight instructor. Search by name or airfield, filter by what you want to learn (each subject with how many teach it nearby), by distance, and…
- Flight logbook: A pilot's logbook. Total time (with hours brought forward from earlier logbooks), PIC, night, the last 90 days and how many entries are still incomplete…