# Resource rules A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Events & bookings](https://beamline.io/components/apps/events-bookings) app. Live demo: https://beamline.io/components/resource-rules Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job left on it red), may overlap, each a chip that says it and flips when pressed, and a policy not known hatched and said as not known (never as not allowed); read only locks every rule while it stays readable. A job is moved by dragging it onto someone's day, or by picking it and choosing who: where it would land is outlined on every other day, and your app checks it: accepted (the job moves, green), refused with its reason (nothing changes), or waiting for a confirmation when moves must be confirmed. ## Use it for - Beside a schedule of people or machines whose rules decide where work can go: a workshop's crew, a field team, a studio's rooms, a fleet. - Where a move must say why it is refused, or wait for someone to confirm it. ## Not for - Dragging work across resources and time (the time-axis signature). - Permissions by role ([roles-permissions](https://beamline.io/components/roles-permissions)). - Weekly bookable hours ([availability-rule-editor](https://beamline.io/components/availability-rule-editor)). ## Anatomy - header: the product's mark, the title and day, Ask before a move lands (switch), Read only (switch) - the day board: the hours across; each person (name, role, their rules as chips: Available / Off today, May overlap / One job at a time, Not known hatched) beside their day (jobs as tinted bars; an unavailable day filled red with its words) - a chosen job outlined, and where it would land outlined on every other day (firmer on the picked person's) - the move: Move from to (a person), Try the move, cancel; at rest one line on how to move; the answer in its tone (accepted success, refused danger with the reason, waiting warning with Confirm and Keep it where it is) - read only said under the board ## States - available, unavailable - overlap allowed, overlap forbidden - unknown policy - read only - reasoned rejection, pending confirmation, accepted - a rule's save refused: put back and said - no people - phone: each person over their day, the day as wide as the screen - right to left: the day and the bars mirror ## Keyboard - Tab through the switches, each person's two rule chips (Space flips), each job (Enter picks it), the person select, Try the move, Confirm ## Motion None of its own. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `date` (required) | `string` | — | The day shown, an ISO date. | | `people` (required) | `CrewMember[]` | — | | | `jobs` (required) | `CrewJob[]` | — | | | `onRuleChange` | `((personId: string, rule: "allowOverlap" \| "available", value: boolean) => Promise Promise)` | — | Check a move of a job to a person. Nothing changes until it is accepted (or, when pending, confirmed). | | `hours` | `[number, number]` | — | The day's hours drawn. Default 7–19. | | `defaultReadOnly` | `boolean` | — | | | `defaultConfirm` | `boolean` | — | | | `defaultMove` | `{ jobId: string; toId: string; }` | — | The move chosen when it opens, ready to try. | | `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 - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Label](https://beamline.io/components/label.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) ## Dependencies `lucide-react` ## Import ```tsx import { ResourceRules } from "@beamline/resource-rules"; ``` ## Get it Resource rules 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 Events & bookings - [Team calendar](https://beamline.io/components/team-calendar): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of… - [Day agenda](https://beamline.io/components/day-agenda): One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are… - [Crew booking](https://beamline.io/components/crew-booking): Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available… - [Resource booking](https://beamline.io/components/resource-booking): Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken… - [Desk booking](https://beamline.io/components/desk-booking): Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book… - [Linked appointments](https://beamline.io/components/linked-appointments): A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn… - [Waitlist desk](https://beamline.io/components/waitlist-desk): A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the… - [Visitor desk](https://beamline.io/components/visitor-desk): An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said… - [Issued ticket](https://beamline.io/components/issued-ticket): One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its… - [Itinerary](https://beamline.io/components/itinerary): A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own… - [Trip budget](https://beamline.io/components/trip-budget): A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and… - [Proposal payments](https://beamline.io/components/proposal-payments): A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the… - [Project periods](https://beamline.io/components/project-periods): A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear… 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).