# Construction app UI for React Building sites: submittals, change orders, inspections and work orders. 20 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Submittal register](https://beamline.io/components/submittal-register.md): 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… 2. [Change orders](https://beamline.io/components/change-orders.md): 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… 3. [Inspection review](https://beamline.io/components/inspection-review.md): A unit's inspection, reviewed in three views. Findings: rooms and features with their condition, answers, notes and photos, and each feature's… 4. [Work orders](https://beamline.io/components/work-orders.md): A maintenance work order that coordinates subtasks: the children's progress drawn by status with cancelled ones counted apart, the parent completed on… 5. [Action center](https://beamline.io/components/action-center.md): 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… 6. [Company access](https://beamline.io/components/company-access.md): 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… 7. [Condition checklist](https://beamline.io/components/condition-checklist.md): 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… 8. [Corrective actions](https://beamline.io/components/corrective-actions.md): 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… 9. [Quality checks](https://beamline.io/components/quality-checks.md): 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… 10. [Maintenance plan](https://beamline.io/components/maintenance-plan.md): 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… 11. [Maintenance plans](https://beamline.io/components/maintenance-plans.md): 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… 12. [Equipment register](https://beamline.io/components/equipment-register.md): 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… 13. [Asset workspace](https://beamline.io/components/asset-workspace.md): 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… 14. [Asset packs](https://beamline.io/components/asset-packs.md): 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… 15. [Instrument use](https://beamline.io/components/instrument-use.md): 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)… 16. [Job booking](https://beamline.io/components/job-booking.md): 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… 17. [Job booking setup](https://beamline.io/components/job-booking-setup.md): 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… 18. [Rental availability](https://beamline.io/components/rental-availability.md): 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… 19. [Rooms & equipment](https://beamline.io/components/resource-setup.md): 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… 20. [System pages](https://beamline.io/components/system-page.md): 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… ## The parts they're built from - [Button](https://beamline.io/components/button.md) (free): in 20 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 20 of these screens - [Label](https://beamline.io/components/label.md) (free): in 19 of these screens - [Select](https://beamline.io/components/select.md) (free): in 16 of these screens - [Avatar](https://beamline.io/components/avatar.md) (free): in 14 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 14 of these screens - [Input](https://beamline.io/components/input.md) (free): in 13 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 13 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 12 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 12 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 12 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 9 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 9 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 9 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 8 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 7 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 7 of these screens - [Calendar](https://beamline.io/components/calendar.md) (free): in 7 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 7 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 7 of these screens - [Date picker](https://beamline.io/components/date-picker.md) (free): in 6 of these screens - [Dialog](https://beamline.io/components/dialog.md) (free): in 5 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 5 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 5 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 5 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 5 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 5 of these screens - [Value grip](https://beamline.io/components/value-grip.md): in 5 of these screens - [Chip group](https://beamline.io/components/chip-group.md) (free): in 4 of these screens - [Lightbox](https://beamline.io/components/lightbox.md) (free): in 4 of these screens 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) Next: [Events & bookings](https://beamline.io/components/apps/events-bookings.md) · [All apps](https://beamline.io/components/apps.md) 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).