Project home
A React block (a whole screen) in Beamline's SaaS admin app.
A project's home joining model activity, delivery through the stages, syncs with connected tools and the project's details. Each section says its own scope and as-of time and refreshes on its own; a refresh that fails keeps showing what was true at its time and says so. Delivery has lanes by discipline and stage with a plain chronological list as its twin. A failed sync names why and opens its job, with a way back to the home. Owners see where a detail drifts from published data (the stage says Design while a model reached Construction issue); reviewers see values only.
Use it for
- A project or workspace home that gathers several sources, each with its own freshness.
- Showing delivery through stages, with a list for those who'd rather read than scan a grid.
Not for
- A team's project portfolio by health (projects).
- Service health (status-dashboard).
Anatomy
- header: the product's mark, the project, Project home
- each section: title, scope and as-of time, Refresh; refresh failed
- model activity: each published version with its message, who and when
- syncs: each tool with state, when, why it failed, Open job
- delivery: lanes or list; each discipline's version per stage, or not yet
- details: each field, not set, drift (owners)
- job: Back to the project home, what failed, its log
States
- section: fresh, refreshing (only it), refresh failed (old time kept)
- sync: ok, failed, running; job open
- delivery: lanes, list
- owner (drift shown) or reviewer (values only)
- phone: one column; lanes scroll sideways
- right to left: mirrors
Keyboard
- Tab through each section's Refresh, Open job, the lanes or list switch; in a job, Back
Motion
The refresh icon turns while that section refreshes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
project (required) | string | — | |
role | "owner" | "reviewer" | — | Owners see details that drift from published data; reviewers see values only. |
stages (required) | string[] | — | The delivery stages, in order. |
models (required) | string[] | — | |
activity (required) | Section<ModelActivity[]> | — | |
delivery (required) | Section<DeliveryLane[]> | — | |
syncs (required) | Section<SyncJob[]> | — | |
details (required) | Section<ProjectField[]> | — | |
onRefresh | ((section: SectionId) => Promise<Section<unknown>>) | — | Refresh one section on its own; resolve with its new data. |
defaultDeliveryView | "lanes" | "list" | — | |
defaultJob | string | null | — | A sync job open at first. |
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
Dependencies
lucide-react
Import
import { ProjectHome } from "@beamline/project-home";Get it
Project home 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 SaaS admin
- Analytics dashboard: A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- Sales dashboard: A sales leader's week in one screen: closed won against quota and pace, pipeline coverage and win rate, the quarter's run toward target with the forecast…
- Product analytics: How people use the product: a funnel whose steps are the selector, where the people lost at a step went (saved as a cohort in one action), retention by…
- Retention analysis: Retention as a question with its terms in view: people who did one event came back to do another, on exactly day N or on or after it, with days as…
- Session replay: Session replay with its triage. Recordings are filtered by conditions (has errors, address contains, longer than) and saved filters shared with the team…
- Status dashboard: An operations view of service health: the overall state in one line, every service with its status, uptime, latency now and 90 days of history, latency…
- Telemetry explorer: Logs and the traces behind them. A stacked volume chart shows how many lines of each level arrived over the time in view, so a burst of errors reads at a…
- Dashboard panels: A dashboard of panels configured without code. Panels in a grid sized small, medium or large, each showing what it computes now: a number (coloured only…
- Dashboard controls: A dashboard's controls and the panels they drive. Variables, ad hoc filters (added from a key and a value, each removable), group by and the time range…
- Versioned dashboard: A dashboard over a data source that has versions (a design model, a dataset, a release). The pinned source and version are named once in the header; each…
- Saved views: Saved viewpoints of a model, grouped for review. Privacy (only you, or everyone on the project) and the group are words on every row; copying a link says…
- Query library: The team's saved queries, to reuse in the editor. The list is a rail: all or starred and a search at rest; author, source, tags (a query with any chosen…
- CRM pipeline: A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- Pipeline views: One dataset of deals seen through named views: a board by stage where each card's time in its stage is drawn against the stage's target and said past it…
- Pipeline record: One piece of work for a contact, through its stages. The contact's records sit as tabs, each with its own stage and history. The record leads: its title…
- Contact profile: One customer on one page: who they are and how to reach them (fields edit in place), their lifecycle stage and owner, the deals they are in with what is…
- Customer requests: What customers asked for, linked to the work that answers it. By work item: each item with its status, how many requests it carries and how many of them…
- Helpdesk inbox: A support team's inbox: views with counts, a virtualised ticket queue with search, priority filters and live SLA clocks, and the open ticket with its…
- Shared inbox: A team's inboxes where each status tab means the right thing for its place, and a rule that mirrors teammates' conversations into a shared inbox. Your…
- Intake triage: Incoming requests decided before work starts, and the rules that route them. Triage: the items waiting (key, title, reporter and source, label in its…
- Queue today: A walk-in queue's day so far. Every number says its window (since opening), what it's out of, and when it was last refreshed; served carries its share of…
- Queue settings: A walk-in queue's settings, one tab per job. Bookings: adding booked visits to the queue as one sentence with its consequence and an example, a conflict…
- AI support chat: The customer's side of AI support: an assistant that answers from your help centre with numbered citations, a thumbs up or down on every answer (a down…
- AI support console: The support team's side of AI support: a queue sorted by what is due first (who the assistant is still handling, who asked for a person, who waits), the…
- Team chat: A team's messages in one screen: channels and direct messages with unread counts and mentions, who is online, the conversation with reactions, receipts…
- Meeting and call review: Everything a recorded call left behind on one screen: the recording with its transcript by speaker, an AI summary that streams in, action items with…
- Email automation: An email automation seen three ways. Runs: each with how it ended (running, finished, failed, cancelled: four words, four marks) and filters with counts…
- Messaging journeys: One messaging automation from the inside: its steps in order on a spine with the team's notes travelling beside a step (never steps; orphaned and said…
- Notification preferences: What reaches a person and where: events grouped by area down the side, channels (email, push, Slack, in-app) across the top, a switch per pair that saves…
- Changelog feed: An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- Billing & invoices: The billing page of a subscription: the plan with its seats and renewal, cancel and resume in place, the card on file with a checked update form, metered…
- Invoices: Accounts receivable in one screen: what is outstanding, overdue and paid, the invoices by status in a virtualised grid with bulk reminders, and each…
- Billing desk: A front desk's billing for one client with several animals. A hospital stay's daily sales are gathered into one invoice: open sales on a rail (chosen…
- Accounting workbench: Card transactions on their way to the books: Prepare, Review and Exported as stages with exception views that keep missing coding apart from missing…
- Reconciliation: Balances compared and statements checked: each bank account's statement balance beside the books', both dated and drawn on one scale, the difference said…
- Transaction review: New transactions made sense of, and the rules that do it next time. Review takes one card at a time as the screen's focal object: the merchant, the…
- Budget month: A household's month budget, worked on. The month leads with what is left to budget, in large figures, beside income and spending as bars (spending read…
- Estimate share: Sending an estimate to the people who decide. Recipients from the customer's and the fleet's contacts, each by email and text (an address missing said on…
- Order closeout: Closing a repair order into an invoice. Its gates, each passed (success) or open (warning) with what to do: the balance paid (a payment recorded in…
- Purchase request: A purchase request, reviewed by the people who approve it. What is asked for: how often and for which dates, lines with quantity, rate and amount, each…
- Purchasing rules: A company's purchasing rules in one place. Approval exceptions (fallback review over an amount, over-budget routing, recurring documents approved once…
- Approval policy: A payment approval policy, edited as amount bands. Each band covers payments from one amount up to (not including) another, with its approvers in order…
- Projects: A team's projects: the portfolio by health (on track, at risk, off track) with progress, lead, team and due date, filtered and searched; a project opens…
- Project browser: Projects from this computer, a phone library and a paired device, with their tracks and dated backups. A phone library prints its direction ("from your…
- Project directory: A workspace's projects in a table: your role, who can open each one (its own column, with an icon and words), labels, status and when it changed. Labels…
- Project signals: Projects with their signals apart: the health each lead wrote and how fresh that update is, drawn as the time since it against when the next was expected…
- Issue workbench: One error issue under investigation: its all-time events and users labelled apart from what the environment and range filters scope, drawn per day with…
- Tracker desk: A product team's work tracker from one person's seat. The inbox: Priority and Other with unread counts, notifications moved through with J/K or arrows…
- Engineering changes: Engineering changes to a product: a draft revision edited beside the revision production uses, which doesn't change until the change is applied, with the…
- Workflow versions: A workflow's versions with three questions answered apart: which version you're viewing, which draft you're editing and which one is running, as three…
- External review: A document reviewed with someone outside the team. Who holds the pen is one line at the top. Comments are kept in two threads by audience, the audience…
- Event evidence: What surrounded one error event, beside the issue: the feature flags evaluated before it, error volume per hour with flag changes marked (a change after…
- Correlation editor: Building a link from a query's results to another source. In editor mode the results are outlined and every cell can start a link; the chosen row's…
- File manager: Files and folders in one screen: the views (My files, Shared, Recent, Starred, Trash) with storage at the foot, a folder tree beside the files…
- Slide presenter: A deck being presented, edited or watched. The slides in a numbered strip (a live slide marked by its kind, notes by a dot), the slide on stage with its…
- Signature fields: Preparing a document for signing: place signature, initials, date, text and checkbox fields on its pages for named signers. Choose a signer, then a field…
- Record catalogue: A catalogue of records kept by a small team. The list: search, a category multi-select and a status filter together, the count shown against the whole…
- Record editor: A record list and the editor for one record, guarding unsaved changes. Changed fields are marked and counted; Cancel, Escape or choosing another record…
- Record import: One file into two linked record types (people and their companies). Map: each column beside its example values imports into a field of either type or…
- Import runs: Imports you can leave and come back to. The runs listed with their state on a tinted chip; one opened shows its file, record type, job and who started…
- Record settings: How records are judged and signed. Flags show how many records carry each beside its switch: switching one off keeps past uses readable, delete is…
- Record setup: How one kind of record is set up: its page layout edited on a real record as people will see it (a field's eye hides or shows it, required ones locked…
- Event registration: An event's page with its registration and ticket. The event: artwork, host, title, the date and times in the event's own time zone (named beside them)…
- Ticket setup: A seated event's tickets, led by what each type sells against its seats: per type its capacity as a figure against the seats mapped to it, a bar of sold…
- Lease setup: A new lease, set up on a unit in four steps. The term is drawn on the unit's occupancy beside the leases already on it, and its start and end are grips…
- Rental policy: A rental shop's period policy: any dates (with or without pickup and return times), fixed lengths or time slots, each with its own settings (default…
- Planner setup: A planner's settings that are easy to get wrong. Calendar events: turning them on is a choice, not a connection, so the card says where it really is…
- Stop runs: Stopping an automation as two commands that say what they do. Stop new runs takes no new ones while the runs already going carry on, the count falling as…
- Map annotations: Notes drawn on a chart over the real ground (a map base: coast, water, relief, towns, roads), the chart as large as the window allows. Lines, areas and…
- Flight record: One recorded flight: its out, in, time and distance in the head, taken from the linked tracks; the tracks recorded around it drawn on the real ground (a…
- Flight route: A route in the air, drawn on the real ground (a map base) as straight legs between waypoints, the chart as large as the window allows: the flown legs…
- Pre-flight briefing: A pilot's briefing before departure. Notices filtered by place and by whether they matter to this flight, each with its code, place, period (active now…
- Sign in: The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- Sign up form: The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- Auth page: The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- Onboarding checklist: The first screen after sign-up: a welcome with how far set-up has come, a checklist of the few steps that make the product useful (each with why, how…
- Workspace switcher: Moving between workspaces and making a new one: a switcher for the top of your sidebar (the current workspace's mark, name and plan; a searchable list…
- Empty states: The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- Settings: Profile and workspace settings with one draft and a real save handler, on grouped panels: photo upload, time zone with the local time, appearance cards…
- Admin users: Your staff's view of every account: headline counts that follow the filters, a virtualised users table with search, status and plan filters and sorting…
- Roles & permissions: What each role may do, as one matrix: permissions grouped by area down the side, roles across the top with their head counts, a check per cell; a group's…
- Security: A person's account security on one page: how protected they are at a glance with the next step to take, password change with strength and rules, two-step…
- API keys & webhooks: The developer page of a SaaS: API keys with environment, scopes, last use and expiry, created through a form whose secret is shown once (copy it before…
- Integrations: A directory of the apps a product connects to: search and categories with counts, connected apps first with their state (Connected, Needs attention), a…
- Domain verification: Setting up a sending domain: the DNS records exactly as the provider gives them (type, name, value, priority, TTL), each with its own state and its name…
- Audit log: Who did what, to what, when and from where, for a whole workspace: newest first and grouped by day, people with avatars and keys or systems with toned…