# Salon Front Desk block

> Salon front desk with KPI tiles, arrivals, stylist load and booking sheets

Salon front desk for one day: KPI tiles with plain split bars, an appointment grid with views and bulk reminders, arrivals to check in, stylist load, and floating booking and detail sheets. ReUI Frame, Data Grid, Sheet.

- Type: Pro block
- Category: [Bookings](https://reui.io/blocks/solutions/bookings.md)
- Page: https://reui.io/blocks/solutions/bookings/solution-bookings-1
- MCP: `get_block("solution-bookings-1")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Breadcrumb, Button, Cascader, Checkbox, Combobox, Data Grid, Dropdown Menu, Empty, Field, Frame, Icon Stack, Icon Tile, Input, Input Group, Popover, Progress, Select, Separator, Sheet, 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 same-day salon desk: KPI tiles, arrivals to check in, stylist load and an appointment grid with booking and detail sheets

## Agent notes

- Replace the Lumen Studio data in `data.ts`: `STAFF`, `SERVICES`, `CLIENTS`, `APPOINTMENTS`, `COMPARE_DAYS`; `DESK_NOW` freezes the desk clock
- Wire `BookingDashboardProps` to your API: `onAppointmentChange` (Undo sends `undo` or `remove`), `onClientCreate`, `onSendReminders`, `onRetry`
- `dayFigures` and `staffLoads` derive the tiles and stylist load from the appointment list; `LOAD_TARGET` sets the chair load goal tick

## When not to use

- Booking clients across several days on a calendar by stylist: use [Appointment Calendar](https://reui.io/blocks/solutions/bookings/solution-bookings-2.md) (`get_block("solution-bookings-2")`)
- Workforce staffing as supply against a forecast over a date range, with no appointments: use [Workforce Coverage](https://reui.io/blocks/application/dashboard/dashboard-6.md) (`get_block("dashboard-6")`)

## Third-party libraries

- 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)

## Install

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

## 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.