# Rental availability A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Construction](https://beamline.io/components/apps/construction) app. Live demo: https://beamline.io/components/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; a partly available day's free times; a period chosen by its first and last day, dropped and said when a new quantity no longer fits it) beside staff's check of a period across the stock (presets or a custom range, each product's free units against its stock, a shortage drawn below zero and said, unknown said, a slow answer for an older period ignored). ## Use it for - Renting out countable things by the day: outdoor gear, party equipment, tools, bikes, cameras, event furniture. - Wherever a quantity, not one resource, decides whether a period can be booked. ## Not for - One person's or one room's bookable times ([availability-layers](https://beamline.io/components/availability-layers)). - Bookings dragged across resources and days (the time-axis signature). - Picking a date with no stock behind it ([calendar](https://beamline.io/components/calendar)). ## Anatomy - header: the product's mark and the title - customer side: How many (number field), the month with previous and next, the states' key, the grid of days (available green tint, some left orange tint with the count, booked out struck, not known dashed; the chosen period ringed in the accent), the period or what to pick next, a partly available day's times - period check: the period (date range picker with This weekend and Next 7 days), checking or when checked, each product with its group's hue, free for the period against the stock on one scale (shortage in the danger tone below zero), the count or All free or N short, the stock ## States - fully available, partial day, unavailable, unknown day - quantity changed: the month asked again; a period that no longer fits dropped and said - loading days - period: no range, checking, available, shortage, unknown, stale answer ignored - phone: the two sides stack - right to left: the grid and bars mirror ## Keyboard - Tab to How many, the month arrows and the grid; arrows move by day and week across months; Enter or Space picks a first and a last day - The period field opens its calendar with presets ## Motion None of its own; the month and the table are redrawn when their answers arrive. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `customer` (required) | `CustomerAvailabilityProps & { product: string; }` | — | The customer's side: a product's month for a quantity. | | `period` (required) | `PeriodCheckProps` | — | The staff's side: the stock for a period. | | `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. | | `CustomerAvailability.month` (required) | `string` | — | On CustomerAvailability: The month shown first (any ISO date in it). | | `CustomerAvailability.loadDays` (required) | `(quantity: number, month: string) => Promise` | — | On CustomerAvailability: Days for a quantity; the block asks again whenever the quantity or the month changes. | | `CustomerAvailability.defaultQuantity` | `number` | — | | | `CustomerAvailability.defaultPeriod` | `{ from: string; to: string; } \| null` | — | On CustomerAvailability: A period already chosen (ISO dates, inclusive). | | `CustomerAvailability.onPeriodChange` | `((period: { from: string; to: string; } \| null) => void)` | — | | | `CustomerAvailability.showQuantities` | `boolean` | — | On CustomerAvailability: Show how many are left on partly available days. Default true. | | `PeriodCheck.check` (required) | `(range: { from: string; to: string; }) => Promise` | — | On PeriodCheck: Ask for a period (ISO dates, inclusive). Answers to an older question are ignored. | | `PeriodCheck.today` (required) | `string` | — | On PeriodCheck: Today, the shop's local date, for the presets. | | `PeriodCheck.defaultRange` | `{ from: string; to: string; } \| null` | — | | | `PeriodCheck.timeZone` | `string` | — | | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Date range picker](https://beamline.io/components/date-range-picker.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) ## Dependencies `lucide-react` ## Import ```tsx import { CustomerAvailability, PeriodCheck, RentalAvailability } from "@beamline/rental-availability"; ``` ## Get it Rental availability 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 Construction - [Submittal register](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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… - [Action center](https://beamline.io/components/action-center): 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… - [Company access](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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… - [Rooms & equipment](https://beamline.io/components/resource-setup): 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](https://beamline.io/components/system-page): 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… 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).