Production dashboard

Dashboard with a collapsible sidebar and area chart.

Usage

import { DashboardShell } from '@/components/blocks/dashboard-01'


<DashboardShell />


// Fill a parent that has a height instead of the viewport
<DashboardShell height="100%" />


// Your own workspace, navigation and data
<DashboardShell
  brand={{ name: 'Northwind', logo: <NorthwindLogo />, href: '/' }}
  user={{ name: 'Sam Lee', email: 'sam@northwind.dev', avatar: '/avatars/sam.jpg' }}
  title="Releases"
  metrics={metrics}
  traffic={traffic}
  sections={sections}
  casting={cast}
  credits={credits}
  assets={assets}
  activeId={pathname}
  onNavigate={(id) => navigate(id)}
  onSectionsChange={(rows) => save(rows)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/dashboard-01

npx shadcn@latest add @pastaui-pro/dashboard-01

yarn dlx shadcn@latest add @pastaui-pro/dashboard-01

bunx --bun shadcn@latest add @pastaui-pro/dashboard-01

Source

Props

Production dashboard props
Prop	Type	Default	Description
brand	DashboardBrand	= Murmurline	Workspace name, logo and optional href shown at the top of the sidebar.
user	DashboardUser	= Aurelio Wenzel	Signed-in user ({ name, email, avatar? }) for the sidebar user menu. Initials are shown without an avatar.
navMain	DashboardNavItem[]	= Overview, Productions, Analytics, Catalogue, Team	Main sidebar links, each with an id, label, icon and optional href.
documents	DashboardNavItem[]	= Three documents	Links in the Documents group, each with its own Open, Share and Delete menu.
navSecondary	DashboardNavItem[]	= Settings, Get help, Search	Links pinned to the bottom of the sidebar.
activeId	string	= —	Controlled id of the active sidebar item. Pair with onNavigate.
defaultActiveId	string	= 'overview'	Active sidebar item on first render when uncontrolled.
onNavigate	(id: string) => void	= —	Called when a sidebar link is chosen.
onQuickCreate	() => void	= —	Called when the Quick create button is pressed.
title	string	= 'Overview'	Page title in the header.
actions	ReactNode	= Production guide link	Replaces the actions on the right of the header.
metrics	DashboardMetric[]	= Four KPIs	KPI cards: label, value, format (currency, number or percent), decimals, delta, higherIsBetter, headline and detail.
chartTitle	string	= 'Listening hours'	Title of the area chart card.
chartSeries	{ app: string; web: string }	= { app: 'App', web: 'Web' }	Labels for the two stacked series in the chart, tooltip and legend.
traffic	DashboardTrafficPoint[]	= 91 days of data	Daily points ({ date: YYYY-MM-DD, app, web }). The ranges count back from the last date.
sections	DashboardSection[]	= 24 audiobook sections	Starting table rows: id, section, type, status (mastered, recording, review, queued or retake), target, runtime and editor. The table keeps its own copy.
editors	string[]	= Five editors	Names offered in the Assign editor selects.
casting	DashboardCastMember[]	= Three narrators	Voice cast for the Casting tab: id, name, role, voice, status (cast, callback, awaiting or passed) and sample length in seconds.
credits	DashboardCredit[]	= A director and an audio engineer	People in the Credits tab: id, name, role, credit line, royalty split in percent, contract status (signed, awaiting or draft) and an ISO date.
assets	DashboardAsset[]	= Six production files	Files in the Assets tab: id, name, kind (artwork, audio, document or video), format, size, version, updated (ISO date and time) and status (approved, processing, review or draft).
views	DashboardView[]	= Sections, Casting, Credits, Assets	Tabs above the table ({ value, label, count? }). The first tab shows the sections table; tabs with the values casting, credits and assets show those panels and count their own items, and any other tab shows an empty panel.
onSectionsChange	(sections: DashboardSection[]) => void	= —	Called with every row change: edits, reordering, copies, additions and deletions.
onSectionAction	(action: 'edit' \| 'duplicate' \| 'favorite' \| 'delete', section: DashboardSection) => void	= —	Called when a row action menu item is chosen.
defaultSidebarOpen	boolean	= true	Whether the desktop sidebar starts open.
height	number \| string	= '100dvh'	Height of the shell; the panes scroll inside it. Numbers are pixels and strings take any CSS length: '100%' fills a parent that has a height, such as the area under your own header, and 800 gives a fixed frame.
className	string	= —	Additional classes for the root. Use height rather than an h-* class.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.