Skip to contentVibraUI
Dashboards

Hotel vocabulary

The Hotel dashboard's words: what a stay's status, a room type and a booking channel are called, the tone each status wears, and how a night is written.

One module every Hotel page prints its words from, so "In house" is retuned in one place. Plain constants: the entity types it reads are erased, so a client island and a server file can both import it without the store coming along. DESK_STATUS_LABELS is the front desk's variant of the stay labels — on a list of today a confirmed stay is a guest due in, and says so.

Install

npx shadcn@latest add @vibra/vocabulary-hotel

Needs the @vibra registry in your components.json — set it up once.

Props

PropTypeDefaultDescription
STAY_STATUS_LABELS / DESK_STATUS_LABELSRecord<Booking["status"], string>—A stay's status as the book prints it, and as the desk's lists of today print it.
STAY_STATUS_ORDER / STAY_STATUS_MAPBooking["status"][] / Record<…, StatusVariant>—The order statuses are offered in, and the tone each wears on a StatusBadge.
ROOM_TYPE_LABELS / ROOM_TYPE_ORDERRecord<Room["type"], string> / Room["type"][]—Standard, Deluxe and Suite, in that order.
SOURCE_LABELS / SOURCE_ORDERRecord<Booking["source"], string> / Booking["source"][]—The booking channels, the house's own first.
STAY_DAYIntl.DateTimeFormat—A night of a stay, "Fri, Sep 4", pinned to UTC.

Dependencies

Source

lib/dashboards/hotel/vocabulary.ts
import { type Booking, type Room } from "@/lib/sample-data"
import { type StatusVariant } from "@/components/ui/status-badge"

/**
 * The Hotel dashboard's words: what a stay's status, a room type and a
 * booking channel are called on every page, the tone each status wears, and
 * how a night is written. One module the pages share, so "In house" is
 * retuned in one place. Plain constants with no rows behind them — the types
 * above are erased — so a client island and a server file can both import it
 * without the store coming along.
 */

/** A stay's status as the book prints it. */
export const STAY_STATUS_LABELS: Record<Booking["status"], string> = {
  confirmed: "Confirmed",
  checked_in: "In house",
  checked_out: "Checked out",
  cancelled: "Cancelled",
  no_show: "No-show",
}

/**
 * The same, on the desk's own lists of today: a confirmed stay there is a
 * guest due in, so it says so.
 */
export const DESK_STATUS_LABELS: Record<Booking["status"], string> = { ...STAY_STATUS_LABELS, confirmed: "Due in" }

/** The order statuses are offered in: the life of a stay, then the two ways it falls away. */
export const STAY_STATUS_ORDER: Booking["status"][] = ["confirmed", "checked_in", "checked_out", "cancelled", "no_show"]

export const STAY_STATUS_MAP: Record<Booking["status"], StatusVariant> = {
  confirmed: "info",
  checked_in: "success",
  checked_out: "neutral",
  cancelled: "danger",
  no_show: "warning",
}

export const ROOM_TYPE_LABELS: Record<Room["type"], string> = {
  standard: "Standard",
  deluxe: "Deluxe",
  suite: "Suite",
}

export const ROOM_TYPE_ORDER: Room["type"][] = ["standard", "deluxe", "suite"]

export const SOURCE_LABELS: Record<Booking["source"], string> = {
  direct: "Direct",
  marketplace: "Travel marketplace",
  booking_site: "Booking site",
  corporate: "Corporate",
  walk_in: "Walk-in",
}

/** The channels, the house's own first and the walk-ins last. */
export const SOURCE_ORDER: Booking["source"][] = ["direct", "marketplace", "booking_site", "corporate", "walk_in"]

/** A night of a stay: "Fri, Sep 4". The book is a UTC calendar, so the day is read in UTC. */
export const STAY_DAY = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "numeric",
  timeZone: "UTC",
})