# Program modules A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Education](https://beamline.io/components/apps/education) app. Live demo: https://beamline.io/components/program-modules A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision, changed since); several ticked and published together, the confirmation listing each with its revision and when its content opens, each coming back with its own result (one can fail and stay a draft), and nothing claiming the content is open or a message went out. A module's items are each Required or optional in words with their due rule and reminder, said in a sentence before adding; one client's view beside them follows each item from locked to due to done (overdue in the danger tint), and their completed forms stay as records; removing an item leaves clients' assignments in place until cancelled, said with their count. How a module opens (on a date, days after each client enrols at a time in their own zone, or at once) is previewed on real clients in their zones; once published the kind is locked with the reason while the days can change; the welcome message is its own switch and status. A section is drafted with the app's help: the sample before any request is stamped as an example and can't be inserted, each answer is a numbered version with its request, and one chosen section goes in as one new draft section beside the untouched others. Adding an item opens from its button (the rule said before adding); an item's remove shows on the row pointed at. ## Use it for - A practitioner or coach building a program clients move through: what each module asks, when it opens for each client, and publishing it. - Content that opens per client (days after they join) where each client's own time zone matters. ## Not for - Training staff through ordered lesson sets with live sessions ([course-builder](https://beamline.io/components/course-builder)). - A client's care plan of goals and recommendations ([care-plan](https://beamline.io/components/care-plan)). - A training program generated from an intake ([program-setup](https://beamline.io/components/program-setup)). ## Anatomy - header: the product's mark and the program - modules: each with a box, its number, title, release in words and state; the results of the last publish; the count ticked and Publish n - editor: the module's title and revision, tabs Items, Release, Draft a section - items: each item's kind, title, rule sentence, Required or Optional, remove; the removal's note with Cancel n assignments; Add an item (kind, title, due, days or date, reminder, Required) with the rule sentence; a client's view (choose the client, when it opens for them, each item's state, their records) - release: how it opens (date, after enrolling, open), the date and time or days and time, the lock once published, each client's unlock in their zone, the welcome switch and its status, Save - draft: what it's about, tone, length, Draft it; the sections already in the module; the example (stamped) or the version with its request, earlier and later, the sections to choose, Insert ## States - modules: loading, none, draft, published, changed since published - publishing: confirming, sending, each published or left a draft with its reason - an item: required or optional; client: locked, due, overdue, done; removed with assignments kept, cancelled, cancel failed - release: kind locked once published; saving; saved; refused (kept); welcome not sent, scheduled, sent, failed - draft: the example (can't be inserted), drafting, failed (inputs kept), versions, inserting, inserted - phone: the modules, then one module with Back - right to left: mirrors ## Keyboard - Tab through the boxes and modules, Publish, the tabs, each item's remove, the add form, the client choice; the confirmation starts on Cancel ## Motion None of its own. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `program` (required) | `string` | — | The program's name. | | `modules` (required) | `ProgramModule[] \| null` | — | Modules in order; null while loading. | | `clients` | `ProgramClient[]` | — | | | `assignments` | `Record` | — | How many clients have each item assigned, by item id (removing an item leaves those in place). | | `timeZone` (required) | `string` | — | The practice's zone, for dates you set. | | `onPublish` | `((ids: string[]) => Promise)` | — | Publish modules at their current revision; each comes back on its own. | | `onSave` | `((module: ProgramModule) => Promise)` | — | Save a module's draft (items, release, welcome, sections); reject to keep the change (said). | | `onCancelAssignments` | `((itemId: string) => Promise)` | — | Cancel the assignments clients still hold for a removed item. | | `onDraft` | `((request: DraftRequest) => Promise<{ title: string; body: string; }[]>)` | — | Draft sections from a request; each answer becomes a numbered version. | | `now` | `string` | — | | | `defaultModule` | `string \| null` | — | | | `defaultTab` | `Tab` | — | | | `defaultSelected` | `string[]` | — | | | `defaultClient` | `string` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert Dialog](https://beamline.io/components/alert-dialog.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Radio cards](https://beamline.io/components/radio-cards.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Tabs](https://beamline.io/components/tabs.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Time picker](https://beamline.io/components/time-picker.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ProgramModules } from "@beamline/program-modules"; ``` ## Get it Program modules is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Education - [Course builder](https://beamline.io/components/course-builder): Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you… - [Question builder](https://beamline.io/components/question-builder): Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become… - [Grading desk](https://beamline.io/components/grading-desk): Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's… - [Course dashboard](https://beamline.io/components/course-dashboard): A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and… - [Course home](https://beamline.io/components/course-home): A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a… - [Volunteer rota](https://beamline.io/components/volunteer-rota): Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their… - [Gift desk](https://beamline.io/components/gift-desk): A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an… - [Gift batches](https://beamline.io/components/gift-batches): Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).