Action center
A React block (a whole screen) in Beamline's Construction app.
Everything waiting on a person across projects: a strip of every open item on the days ahead, one lane per kind of owing (You submit, You answer, Tasks and forms) with an Overdue slot before today and Later and No date after the axis; its grip is the horizon, and the list below is what lies inside it with everything overdue and everything with no date, counted in one sentence that always equals the rows. Each due date says what it is for; a capped type and a failed refresh are said in words; an opened item's row stays current.
Use it for
- One queue of what a person owes across several projects or sites, where due dates mean different work (a submission owed, an answer owed, a task or an inspection).
- Coordinators, project engineers and multi-site operators triaging their week.
Not for
- One project's register with its own clocks (submittal-register).
- A team's board of tasks by status (project-board).
- Notifications as they arrive (notification-center).
Anatomy
- head: title, the scope in words (projects active since a date), when the list was loaded, Refresh
- filters: kinds of item as chips with counts (over the chosen projects), projects as chips
- coverage: a type the app capped says how many were loaded of how many
- strip: lanes named where they start (You submit, You answer, Tasks and forms); an Overdue slot (danger, with the word), Today, days to four weeks with dates, Later, No date; each item a dot at its day (a count when several share it); the horizon line and its grip
- sentence: the horizon in words with how many are due, overdue and with no date, always equal to the rows; presets Today, 7, 14 and 28 days
- list: item (number, kind, title; pinned), due (when, and what for: Submission due, Response due, Inspection due), status, with (You, a name, or an outside address), project; overdue first, then by date, then no date
States
- mixed due kinds (submission, response, other) side by side
- horizon held: dots inside are ink, outside faint, the sentence and the rows follow each day; Escape puts back the horizon and the rows
- a dot pressed past the horizon pulls the horizon out to it and makes its row current
- opened: the app opens the item; its row stays current and the list keeps its place
- partial coverage: the capped type said, and the sentence says it counts what is loaded
- refreshing: the rows stay, Refreshing… in the scope line
- refresh failed: the rows stay, with when it failed and how old they are, and Try again
- loading: the lanes and rows stand as shapes
- no accessible projects; no open items; no filter matches (with Clear the filters)
Keyboard
- the horizon grip is a slider: arrows a day, Page Up/Down or Shift a week, Home today, End four weeks; the presets are buttons
- dots are buttons named with their count, lane and day
- the list is the data grid: arrows between cells, Enter opens
Motion
Dragging the horizon moves its line, the grip and the dots' ink with the hand (no glide while held); the rows enter and leave the list as the grid places them. A preset or a key glides the line with the considered duration. Nothing moves at rest; reduced motion places everything at once.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items (required) | ActionItem[] | — | |
projects (required) | ActionProject[] | — | |
me (required) | string | — | The signed-in person's user id (their own items say You). |
today | string | — | "2026-11-01": the day the list counts from. Default: today in the browser. |
coverage | ActionCoverage | — | |
loadedAt | string | Date | null | — | When the list was loaded. |
loading | boolean | — | The first load, with nothing to show yet: shaped skeleton rows. |
refreshing | boolean | — | A refresh is running; the rows stay. |
refreshFailedAt | string | Date | null | — | The last refresh failed: when, so the rows can say how old they are. |
onRefresh | (() => void) | — | |
horizon | number | — | How many days ahead the list looks (0: today only), dragged on the strip. Default 7. |
defaultHorizon | number | — | |
onHorizonChange | ((days: number) => void) | — | |
types | ItemType[] | — | Kinds of item and projects in scope (none chosen: all). |
defaultTypes | ItemType[] | — | |
onTypesChange | ((types: ItemType[]) => void) | — | |
projectFilter | string[] | — | |
defaultProjectFilter | string[] | — | |
onProjectFilterChange | ((ids: string[]) => void) | — | |
current | string | null | — | The item opened last: its row stays current. |
defaultCurrent | string | null | — | |
onCurrentChange | ((id: string | null) => void) | — | |
onOpen | ((item: ActionItem) => void) | — | Open an item (usually a new tab in its project). |
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
Dependencies
lucide-react
Import
import { ActionCenter } from "@beamline/action-center";Get it
Action center 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 Construction
- Submittal register: The documents a trade owes a project before its material is bought, on the clocks that matter: a log whose rows each draw their way to site on one shared…
- Change orders: Change orders against a contract, with the money drawn where it stands: one bar of the original contract, each approved change, a line at the current…
- Inspection review: A unit's inspection, reviewed in three views. Findings: rooms and features with their condition, answers, notes and photos, and each feature's…
- Work orders: A maintenance work order that coordinates subtasks: the children's progress drawn by status with cancelled ones counted apart, the parent completed on…
- Company access: A project's companies as one board: No company first (office access waits for a company, and says so), then each company with its code and its people…
- Condition checklist: An inspection by area. Each item marked good (success), soon (warning) or needs work now (danger), or not checked yet and kept apart below; what was…
- Corrective actions: A corrective action raised from a failed inspection answer, for food safety, facilities or quality teams. The answer, its photo and note are pinned above…
- Quality checks: Quality checks by picture and the control points that make them. A check asks for one photo: an upload that fails keeps its file with Try again, and…
- Maintenance plan: Maintenance of shared equipment. The instruments, most urgent first, each with its most pressing kind and how due it is (overdue, due soon, fine, never…
- Maintenance plans: An operations team's maintenance plans. The queue lists every asset-plan pair (one machine can appear under two plans) with its last service, next due…
- Equipment register: A business's machines and vehicles: a register filtered by status (in use, in repair, sold, each counted) with each machine's photo or type icon…
- Asset workspace: One physical asset: a machine, vehicle or piece of plant. Its header keeps the system id apart from the name and serial, with type, site, status and the…
- Asset packs: Packs of assets (sounds, presets, fonts), the providers they come from and the storage they take. Download and install are two phases with their own…
- Instrument use: Shared instruments. The slot search reads as one sentence (how long, which instrument type, the dates and the working hours with the lab's time zone)…
- Job booking: A customer books a home or field-service job on the company's own site, phone first. Services with how many units, each unit adding its time and price…
- Job booking setup: Online booking for a field-service company, set up from three sides that feed one booking form. Services: each priced and timed per unit with whether it…
- Rental availability: A rental shop's availability: a product's month for the quantity a customer wants (each day available, some left with the count, booked out or not known…
- Rooms & equipment: A salon's or clinic's rooms and equipment and what its services need of them: resources by group at each location, how many appointments each holds at…
- System pages: The four pages a product shows when the normal one cannot: page not found (search and the likely places), something broke (try again, an error id to…