# Room Board block

> Hotel room board with reservations, drag to move stays and a guest worklist

Front desk page for a hotel: occupancy, ADR, arrival and departure tiles with charts, a room gantt to reserve, block, drag and resize stays, and an arrivals grid. Built on ReUI Gantt, Data Grid, Frame. Tape chart, reservation calendar.

- Type: Pro block
- Category: [Bookings](https://reui.io/blocks/solutions/bookings.md)
- Page: https://reui.io/blocks/solutions/bookings/solution-bookings-4
- MCP: `get_block("solution-bookings-4")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Calendar, Cascader, Chart, Combobox, Context Menu, Data Grid, Date Selector, Dialog, Dropdown Menu, Empty, Field, Filters, Frame, Gantt, Icon Stack, Icon Tile, Input, Input Group, Number Field, Popover, Progress, Select, Separator, Sheet, Signature Pad, Skeleton, Switch, Tabs, Textarea, Timeline, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A front desk that reserves, blocks, drags and resizes stays on a room gantt by floor, between tiles and a day's guest worklist

## Agent notes

- Replace the Harbour House sample data in `STAYS`, `ROOMS`, `GUESTS` and `MAINTENANCE_BLOCKS`; `REFERENCE_DATE` is the frozen board date every figure reads
- `useStayStore` keeps every write in browser state; wire `onStayChange`, `onBlockChange` and `onRetry` from `ReservationBoardProps` to your API
- `nightFigures` derives occupancy, ADR and the tile charts from the stay and block lists, so an edited stay moves the tiles

## When not to use

- Bookings checked against each assignee's own capacity, with no rooms: use [Resource Capacity](https://reui.io/blocks/application/gantt/gantt-4.md) (`get_block("gantt-4")`)
- Appointments against staff and chairs through a salon day: use [Salon Front Desk](https://reui.io/blocks/solutions/bookings/solution-bookings-1.md) (`get_block("solution-bookings-1")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), through ReUI Gantt
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/solution-bookings-4
```

## About Bookings blocks

### When to use

- An appointment front desk: booking KPIs, chair capacity and the day's queue, or one appointment's detail
- An appointment calendar by day or week, filtered by staff and service, with a double booking alert
- A hotel front desk: occupancy and ADR tiles, a room board to reserve, move and resize stays, and arrivals

### When not to use

- An activity feed or change history on its own, with no appointments or clients: use the [Timeline blocks](https://reui.io/blocks/application/timeline.md)
- A team overview of KPI tiles and a work queue for a business that takes no bookings: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)
- A client facing card where someone picks a day and a time slot to book one session: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)

### Agent notes

- Appointment blocks declare an `AppointmentStatus` union and the room board a `StayStatus` one; they differ in values and casing, so map them before combining
- Nothing reaches a server: each write lands in local state or a sonner `toast`; wire the room board's `onStayChange` and `onBlockChange` to your API
- The root or page.tsx caps the width at `max-w-7xl`, `max-w-6xl` or `max-w-md`, and page.tsx or the root adds padding; drop both inside an app shell

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.