Booking Workspace

Dashboard5: Booking Workspace

A full-height booking dashboard for appointment and room-scheduling apps, split into a working left panel and a right rail. The left side pairs a bento of revenue, occupancy, and metric tiles with toggleable booking cards and a room-availability schedule timeline; the right rail carries a real month calendar with booked-day dots and a time-slotted day agenda. It is a drop-in appointment scheduling UI for any Next.js / React scheduling dashboard, built on shadcn/ui.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard5?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard5?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard5.tsx, the two composed Beste components schedule-timeline and notifications-menu to components/beste/component/, and the shadcn/ui dependencies they need (button, badge, avatar, switch, calendar, dropdown-menu, command, dialog).

Quick start

The installed file exports dashboard5Demo alongside the block: the exact props behind the preview above. Spread it to get the full workspace in one line. The block is full-height (h-screen), so render it as the page's main surface rather than inside a constrained container.

import { Dashboard5, dashboard5Demo } from "@/components/beste/block/dashboard5";

export default function Page() {
  return <Dashboard5 {...dashboard5Demo} />;
}

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard5 /> renders a complete, populated booking workspace out of the box. Pass just the props you want to override.

The block-local data types:

type Booking = {
  id: string;
  title: string;
  time: string; // pre-formatted range, e.g. "12:30 — 15:45"
  room: string;
  tags: string[];
  avatars: string[]; // image URLs, rendered with plain <img>
  extra: number; // "+N" overflow count after the avatar stack
  enabled: boolean; // initial state of the card's Switch
};

type AgendaSlot = {
  time: string; // e.g. "09:00"
  event?: {
    title: string;
    range: string; // e.g. "09:00 — 10:00"
    tone: "emerald" | "amber" | "rose";
  };
};

type Metric = {
  label: string;
  value: string; // pre-formatted, e.g. "$2.1M"
  delta: string; // e.g. "+4.2%"
  icon: LucideIcon;
};

type DashboardManager = {
  name: string;
  role: string;
  avatar: string; // image URL, rendered with a plain <img>
};

// block-local
type CommandPaletteGroup = {
  heading: string;
  items: { id: string; label: string; icon?: LucideIcon }[];
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

// from schedule-timeline
type TimelineRow = {
  id: string;
  label: string;
  sublabel?: string;
  events: {
    id: string;
    label: string;
    start: number; // hour, e.g. 9 or 15.5
    end: number;
    tone?: "primary" | "emerald" | "amber" | "sky" | "rose" | "violet";
  }[];
};

Still internal

A few structural and cosmetic bits stay as constants in the installed file — edit them in place:

• tabs — the labels for the left-panel tab bar (Booking, Amenities, Rooms, Locations).
• agendaTone — the border/background classes mapping each agenda tone (emerald, amber, rose).
• The bento tile labels ("Today's revenue", "Occupancy") and the section headings are set inline in the JSX; the tile values come from the revenue, occupancy, and heroImage props above.

Components

This block composes two standalone Beste UI components, installed alongside it:

• schedule-timeline — the horizontal room-availability timeline (rows of rooms with placed event bars, day range, step ticks, and a "now" marker). See /component/schedule-timeline.
• notifications-menu — the bell dropdown in the right rail listing unread booking notifications. See /component/notifications-menu.

Behavior notes

• Pressing ⌘K (or Ctrl+K) anywhere toggles the command palette; the header search button opens it too, and selecting any item closes it. A global keydown listener is registered on mount and cleaned up on unmount.
• The left-panel tab bar (Booking, Amenities, Rooms, Locations) is stateful: clicking a tab moves the active underline. It switches the highlighted tab only; the panel content below stays the same.
• Each booking card has its own Switch with independent local state, seeded from the booking's enabled value.
• The month calendar is interactive: clicking a day selects it, and days listed in bookedDays render a small dot beneath the date.
• The room-availability timeline scrolls horizontally on narrow widths (wrapped in an overflow-x-auto, min-w-[560px] container).
• The right rail (calendar, agenda, notifications, manager) is hidden below the lg breakpoint; the left panel fills the width on smaller screens, and the header nav / search width collapse responsively.

Requirements

• Next.js App Router. The block is a client component ("use client") because it uses local state, a keyboard listener, and interactive shadcn/ui primitives, so it composes into any App Router page.
• Rendered full-height: the root <section> is h-screen with its own internal scroll regions. Give it the full viewport rather than nesting it inside a padded layout.
• Avatar and workspace images render with a plain <img>, so no next.config images.remotePatterns setup is needed for the remote (Unsplash) hosts.