Clinic vocabulary

The Clinic dashboard's words: what a visit's status is called and the tone it wears, the departments in order, and how a visit's day and time are written.

One module every Clinic page prints its words from, so "Booked" is retuned in one place and the departments are written once. 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.

Install

npx shadcn@latest add @vibra/vocabulary-clinic

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

Props

Prop	Type	Default	Description
VISIT_STATUS_LABELS / VISIT_STATUS_ORDER / VISIT_STATUS_MAP	Record<Appointment["status"], …>	—	A visit's status as the book prints it, the order it is offered in, and its StatusBadge tone.
DEPARTMENTS	Appointment["department"][]	—	Every department the schedule offers, in the order the pages list them.
VISIT_DATE / VISIT_DAY / VISIT_TIME	Intl.DateTimeFormat	—	"Sep 4, 2026", "Fri, Sep 4" and "3:45 PM", each pinned to UTC.

Dependencies

Registry

Source

lib/dashboards/clinic/vocabulary.ts

import { type Appointment } from "@/lib/sample-data"
import { type StatusVariant } from "@/components/ui/status-badge"

/**
 * The Clinic dashboard's words: what a visit's status is called on every page
 * and the tone it wears, the departments in the order the pages list them,
 * and how a visit's day and time are written. One module the pages share, so
 * "Booked" 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.
 */

export const VISIT_STATUS_LABELS: Record<Appointment["status"], string> = {
  scheduled: "Booked",
  checked_in: "Checked in",
  done: "Done",
  cancelled: "Cancelled",
}

/** The order statuses are offered in: the life of a visit, then the way it falls away. */
export const VISIT_STATUS_ORDER: Appointment["status"][] = ["scheduled", "checked_in", "done", "cancelled"]

export const VISIT_STATUS_MAP: Record<Appointment["status"], StatusVariant> = {
  scheduled: "info",
  checked_in: "success",
  done: "neutral",
  cancelled: "danger",
}

/** Every department the schedule offers, in the order the pages list them. */
export const DEPARTMENTS: Appointment["department"][] = ["Cardiology", "Neurology", "Oncology", "Pediatrics", "Orthopedics"]

/** A visit's date: "Sep 4, 2026". The clinic keeps UTC, so every format pins it. */
export const VISIT_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })

/** A visit's day in the week it falls in: "Fri, Sep 4". */
export const VISIT_DAY = new Intl.DateTimeFormat("en-US", { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" })

/** A visit's time: "3:45 PM". */
export const VISIT_TIME = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", timeZone: "UTC" })