Room boardhospitality
Housekeeping room tiles with occupancy bar, cleaning chip and counters, grouped by building and floor with two multi-select filters.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/room-boardDefault
room-board-demo.tsx
import type { RoomInfo } from "@/components/ui/room-board-tile";import { RoomBoard } from "@/components/ui/room-board";
const at = Date.UTC(2026, 0, 5, 15, 0);
export const demoRooms: RoomInfo[] = [ { id: "101", name: "101", building: "Main", floor: "1", occupancy: "occupied", cleaning: "clean", checkOutAt: at + 20 * 3_600_000, openTasks: 2, conditions: [{ key: "dnd", label: "Do not disturb", tone: "warning" }], }, { id: "102", name: "102", building: "Main", floor: "1", occupancy: "vacant", cleaning: "dirty", checkInAt: at }, { id: "201", name: "201", building: "Main", floor: "2", occupancy: "ready", cleaning: "inspected" }, { id: "202", name: "202", building: "Main", floor: "2", occupancy: "blocked", cleaning: "cleaning", warnings: [{ key: "late", label: "Late check-out" }] }, { id: "A1", name: "A1", building: "Annex", floor: "1", occupancy: "inactive" },];
export default function RoomBoardDemo() { return <RoomBoard rooms={demoRooms} onSelectRoom={() => {}} />;}