# Review page builder A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Research & design](https://beamline.io/components/apps/research-design) app. Live demo: https://beamline.io/components/review-page-builder Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as reviewers will see it, in a side sheet or a full page, switched live with the same fields and values; and an inspector whose title always names its target ("Editing: field Status, label and access on this page only", or "Editing: this page" with its shared layout, title field and fields left off). A label on this page is kept apart from the field itself; whether reviewers may edit a field here sits beside who actually can, since a page never raises anyone's access (read-only audiences, calculated fields said with why); removing a field from the page says the column stays. The draft and the published page are visibly separate, the changes not yet published counted; a refused publish keeps the draft. ## Use it for - Letting a team build a page for reviewing or approving records one at a time (claims, applications, content). - Any builder where an inspector must say exactly what it edits, and the page's editing can never exceed someone's real access. ## Not for - Setting up one record type's page layout and integrations ([record-setup](https://beamline.io/components/record-setup)). - Reviewing the records themselves ([claims-queue](https://beamline.io/components/claims-queue), [transaction-review](https://beamline.io/components/transaction-review)). ## Anatomy - header: the product's mark, the title, the page and table, unpublished changes, Publish - bar: Showing Draft or Published (with its time), Reviewers see it as Side sheet or Full page, what was said - queue: each record's title (or its id) and its first field - preview: the record in its frame, each field's label (an edit mark where reviewers can edit) and value; on the published page, read only and said - inspector: Editing … ; for a field: back to the page, label on this page with its note, the field itself, Reviewers can edit it here, who can actually edit it with why not, Remove from this page; for the page: layout (layout-picker), record title, fields not on the page with Add ## States - draft with unpublished changes (warning tone); no changes; never published - showing draft (editable) or published (read only, outlined) - presentation: side sheet or full page - field: chosen in the preview; label set or the field's name; editable here or not; calculated (never editable); removed (said, the column stays) - access per audience: can edit (success tone) or read only with why (warning tone) - record with no title: shown by its id - publish: publishing, published (said), refused (said, draft kept) - phone: the queue as a select, the preview, the inspector below - right to left: the layout mirrors - reduced motion: the frame doesn't animate ## Keyboard - Arrows within Showing and Reviewers see it as; Tab through the queue, the preview's fields (Enter chooses one), the inspector's settings, then Publish ## Motion The sheet widens to a full page over the standard duration. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `page` (required) | `string` | — | The page's name ("Expense claims review"). | | `table` (required) | `string` | — | The table it reviews ("Expense claims"). | | `fields` (required) | `ReviewField[]` | — | | | `records` (required) | `ReviewRecord[]` | — | | | `audiences` (required) | `ReviewAudience[]` | — | Who uses the page and their access to the table. | | `layouts` (required) | `SharedLayout[]` | — | | | `defaultDraft` (required) | `ReviewPage` | — | | | `published` (required) | `ReviewPage \| null` | — | What reviewers see now; null when never published. | | `publishedAt` | `string \| null` | — | ISO time it was published. | | `defaultField` | `string \| null` | — | | | `onPublish` | `((draft: ReviewPage) => Promise)` | — | Publish the draft; reject with the reason to keep it. | | `onDuplicateLayout` | `((id: string) => Promise)` | — | | | `onDeleteLayout` | `((id: string) => Promise)` | — | | | `product` | `string` | — | Your product's name, shown as its mark. | | `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) - [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) - [Layout picker](https://beamline.io/components/layout-picker.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) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ReviewPageBuilder } from "@beamline/review-page-builder"; ``` ## Get it Review page builder 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 Research & design - [Research synthesis](https://beamline.io/components/research-synthesis): A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)… - [Study setup](https://beamline.io/components/study-setup): Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it… - [Study flow](https://beamline.io/components/study-flow): A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has… - [Participant review](https://beamline.io/components/participant-review): One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)… - [Click heatmap](https://beamline.io/components/click-heatmap): One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over… - [Tree test](https://beamline.io/components/tree-test): A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved… - [Prototype task](https://beamline.io/components/prototype-task): A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a… - [Task results](https://beamline.io/components/task-results): A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and… - [Matrix question](https://beamline.io/components/matrix-question): A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several… - [Prototype review](https://beamline.io/components/prototype-review): Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back… - [Report builder](https://beamline.io/components/report-builder): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… - [Report library](https://beamline.io/components/report-library): A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why… - [Database builder](https://beamline.io/components/database-builder): What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing… - [Workflow builder](https://beamline.io/components/workflow-builder): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… - [Workflow library](https://beamline.io/components/workflow-library): The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this… - [Drawing board](https://beamline.io/components/drawing-board): A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector… - [Model workbench](https://beamline.io/components/model-workbench): A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis… - [Component properties](https://beamline.io/components/component-properties): A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a… - [Slot editor](https://beamline.io/components/slot-editor): Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot… 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).