# Service Visit Planner block

> Kitchen service visit planner with a three week day matrix and unbooked due markers

Facilities planner for 18 restaurant kitchens: contractor visits by status on a 3 week day matrix, unbooked markers where a cycle runs out, vendor contact, sign-off with report numbers, CSV history. ReUI DataGrid, Frame; shadcn Popover, Calendar.

- Type: Pro block
- Category: [Advanced](https://reui.io/blocks/data-grid/advanced.md)
- Page: https://reui.io/blocks/data-grid/advanced/data-grid-advanced-9
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- MCP: `get_block("data-grid-advanced-9")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Calendar, Checkbox, Data Grid, Dropdown Menu, Empty, Field, Frame, Icon Tile, Input, Input Group, Item, Popover, Progress, Select, Separator, Sheet, Switch, Table, Tabs, Textarea, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Recurring contractor visits across many sites, each service on its own cycle, with missed, awaiting and unbooked days in a day matrix

## Agent notes

- Replace the `KITCHENS`, `VENDORS` and `VISITS` demo in data.ts with your sites and addresses, vendor phones and emails, and visit log with report numbers
- `TODAY` pins the demo date for every status, due date and window, and `BOOKING_HORIZON_DAYS` sets how far ahead an unbooked due day counts as a gap
- `usePlanStore` changes only React state; send `writeVisits`, `createKitchen`, `updateKitchen` and `removeKitchens` to your API and on to your vendors

## When not to use

- Staff shifts by day and week, with headcount coverage per shift: use [Shift Roster](https://reui.io/blocks/application/event-calendar/event-calendar-4.md) (`get_block("event-calendar-4")`)
- Hours each person logged per day against a weekly target: use [Weekly Timesheet](https://reui.io/blocks/data-grid/base/data-grid-base-4.md) (`get_block("data-grid-base-4")`)

## 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)
- 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/data-grid-advanced-9
```

## About Advanced blocks

### When to use

- Reporting tables whose rows carry in-cell bars, sparklines or heat cells beside the figures
- Performance reviews that weigh each record against a target, a plan or a prior period
- Review queues and record lists with create, edit, delete and undo, each row opening a tabbed sheet

### When not to use

- A rule builder on its own, to narrow a list or table you already have: use [Filters](https://reui.io/components/filters.md) (`get_component("filters")`)
- A plain sortable table of text cells, assembled from parts in your own layout: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Values typed into the cells themselves, with validation and a save or discard bar: use the [Editing blocks](https://reui.io/blocks/data-grid/editing.md)

### Agent notes

- Rows live in a client store hook whose `create`, `update` and `remove` change only browser state; back them with your API
- Search, filters and sort run in the browser over every row before `useTable` sees them; move that query to your API at scale
- Each page.tsx wraps the block in a `min-h-svh` main with padding, a `max-w-7xl` width and an sr-only `h1`; drop that wrapper 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.