Shadcn UI Dashboard Block
Dashboard18 is a hospitality operations dashboard built with shadcn/ui components, featuring a collapsible inset sidebar and a single-column main content area. The sidebar has grouped navigation for front office, property, revenue, and administration sections. The main area includes a header with user greeting and date controls, followed by an operations strip with shift information and quick action buttons for common tasks like assign rooms, check in guests, housekeeping queue, and VIP arrivals. Below that is a booking sources chart using a custom square-cell grid visualization, an availability calendar panel showing a month grid with color-coded availability status, and a recent arrivals table with sortable columns showing guest details, room assignments, check-in times, and special requests.
Card containers have rounded corners on a muted background. The operations strip features a two-column layout with shift metadata on the left and action buttons styled as tall narrow cards on the right. The booking sources chart is distinctive, using a grid of small squares where filled squares represent bookings with different colors for direct versus OTA sources. The availability calendar uses background colors on date cells to indicate available, partial, or full occupancy status. The arrivals table has a horizontal scroll for all columns.
This is an operations-focused dashboard designed for front desk staff workflows rather than analytics. The quick action buttons and shift board header emphasize task management. The square-cell booking chart provides a unique visualization for booking volume patterns. The availability calendar with status coloring gives instant occupancy awareness. Highly complex with the custom grid chart visualization and status-colored calendar. Requires shift information, booking source data by period, room availability status by date, and detailed arrival records with guest information and special requests.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
| recharts | NPM |
avatar @shadcn | Registry |
badge @shadcn | Registry |
button @shadcn | Registry |
chart @shadcn | Registry |
collapsible @shadcn | Registry |
dropdown-menu @shadcn | Registry |
scroll-area @shadcn | Registry |
sidebar @shadcn | Registry |
table @shadcn | Registry |