UI Dashboards Catalog

Fifteen named ops dashboard patterns — KPI rows, Chart.js panels, activity feeds, booking tables, and two-column desks for Northstar Outfitters / Harbor Studio. See CATALOG.md for recipes. Charts use vendored Chart.js 4.4.x.

.dash-kpi-row

KPI Row

Four KPI cards with label, value, and up/down delta badges. No chart.

Bookings

128

↑ 12%

Occupancy

78%

↑ 4 pts

Revenue

$42.8k

↓ 3%

Open tickets

14

↓ 2
.dash-kpi-line

KPI Row + Line Chart

KPI strip above a Chart.js area/line panel for bookings over 30 days.

Bookings

128

↑ 12%

Avg stay

2.4 n

↑ 0.2

Guests

312

↑ 8%

Cancel rate

4.1%

↓ 0.6

Bookings · 30 days

.dash-kpi-spark

KPI Sparklines

Four KPI cards each with a tiny Chart.js sparkline (no axes or legend).

Bookings

128

↑ 12%

Occupancy

78%

↑ 4 pts

Revenue

$42.8k

↓ 3%

Tickets

14

↓ 2
.dash-chart-bar

Bar Chart Panel

Panel with title, range pills, and Chart.js bar chart — revenue by hut.

Revenue by hut

.dash-chart-donut

Donut + Legend

Donut chart with a legend list for booking sources / channel mix.

Booking sources

Channel mix
  • Direct 42%
  • Partner 28%
  • Walk-in 18%
  • Referral 12%
.dash-activity

Activity Feed

Activity feed panel with avatar/icon, action line, and relative time.

Desk activity

Last 24h

  • Mira Chen confirmed Ridge Hut for Sep 18–20

    Bookings · #BK-4821

  • Jonah Blake flagged a trail washout alert

    Field · Pacific Crest spur

  • System escalated support ticket #T-903

    Support · Harbor Studio

  • Leo Park closed stove repair at Pine Loft

    Maintenance · Done

.dash-table

Bookings Table

Compact data table: booking #, guest, hut, status badge, amount.

Recent bookings

Booking Guest Hut Status Amount
#BK-4821 Mira Chen Ridge Hut Confirmed $420
#BK-4818 Jonah Blake Harbor Studio Pending $310
#BK-4812 Asha Patel Pine Loft Confirmed $265
#BK-4809 Leo Park Cedar Base Cancelled $0
#BK-4801 Sam Ortiz Mist Camp Checked in $188
.dash-activity-table

Activity + Table

Two-pane layout: left activity feed, right recent bookings table.

Activity

  • Mira confirmed #BK-4821

    12m ago

  • Jonah opened trail alert

    2h ago

  • Asha updated Pine Loft notes

    5h ago

  • Payout batch sent

    Yesterday

Recent bookings

Booking Guest Status Amount
#BK-4821 Mira Chen Confirmed $420
#BK-4818 Jonah Blake Pending $310
#BK-4812 Asha Patel Confirmed $265
#BK-4801 Sam Ortiz Checked in $188
.dash-table-chart

Chart + Table

Chart.js line on top, table of the same period’s bookings below.

This week · bookings

Harbor Studio desk
Day Booking Guest Hut Amount
Mon #BK-4790 Mira Chen Ridge Hut $420
Wed #BK-4801 Sam Ortiz Mist Camp $188
Fri #BK-4812 Asha Patel Pine Loft $265
Sat #BK-4821 Jonah Blake Harbor Studio $310
.dash-inbox-ops

Inbox Ops

Ticket/inbox list with a selected-row detail preview — ops triage feel.

Stove spare for Ridge Hut

#T-903 · High · Assigned to Jonah Blake

High

Guest reports the spare stove is missing before Friday’s group arrival. Mira flagged inventory — confirm restock and reply with ETA.

.dash-ops-split

Ops Split

Left filter rail (date, hut checkboxes, status); right KPI strip + chart.

Filtered bookings

86

Occupancy

71%

Revenue

$28.4k

Occupancy trend

.dash-ops-monitor

Ops Monitor

Left alerts list; right live Chart.js line plus a needs-attention table.

Alerts

3 open

  • Ridge Hut stove spare missing

    High · 42m ago

  • Trail washout on spur approach

    Field · 2h ago

  • Partner payout variance $40

    Finance · 5h ago

Live desk load

Live

Needs attention

Item Owner Status
Restock Ridge Hut stove Jonah Blake Due today
Post trail advisory Mira Chen In progress
Reconcile BK-4790 Asha Patel Queued
.dash-ops-board

Ops Board

Two equal columns: occupancy chart | staff/tasks checklist + mini activity.

Occupancy by hut

Staff tasks

Shift B

Mini activity

  • Mira clocked in

    06:02

  • Jonah took trail ticket

    06:18

.dash-shell

Overview Shell

Full overview: top KPI row, mid chart + donut, bottom activity + table.

Bookings

128

↑ 12%

Occupancy

78%

↑ 4

Revenue

$42.8k

↓ 3%

Tickets

14

↓ 2

Weekly bookings

Status mix

  • Confirmed 68%
  • Pending 22%
  • Cancelled 10%

Activity

  • Mira confirmed Ridge Hut

    12m

  • Jonah raised trail alert

    2h

Bookings

# Guest Status Amt
4821 Mira Chen OK $420
4818 Jonah Blake Pend $310
4812 Asha Patel OK $265
.dash-command

Command Center

Dense command center: live clock/status header, 3-col grid (alerts | chart | queue).

Harbor Studio · Command

Systems nominal

Alerts

  • Ridge stove spare High · Jonah · 42m
  • Spur trail washout Field · Mira · 2h
  • Partner $40 variance Finance · Asha · 5h

Throughput

Queue

Ticket Owner Age
#T-903 Jonah 42m
#T-898 Mira 2h
#T-891 Sam 4h
#T-884 Asha 5h