Dashboards
Overview pages: a leading stat band over a responsive widget grid and stacked sections. MonitoringDashboardPage is the full template; AnalyticsDashboardPage and CommandCenterPage are configured presets of the keystone DashboardPage.
All three compose the @phauna/ds DashboardLayout — a StatGrid summary atop an auto-fit grid of WidgetCards — and keep the chart islands in caller-passed slots so the recipe shell stays server-safe.
DashboardPage
The keystone overview shell rendered directly: a StatGrid summary band over an auto-fit WidgetCard grid with a trailing section. Monitoring / Analytics / CommandCenter below are configured presets of it.
Overview
- summary / widgets
- summary is the leading stat band (a StatGrid of StatTiles); widgets[] fill the responsive auto-fit grid (any live chart islands ride here).
- minWidth / children
- minWidth sets the widget column min (default 280px); children are free-form sections below the grid.
- first / footer
- first toggles the leading-page top spacing; footer is the page footer slot. Server-safe — every interactive piece is a caller-passed slot.
MonitoringDashboardPage
A live ops board: a stat band (uptime, queue depth, error rate, p95) over a grid of status/chart widgets, with free-form sections (alert feed / log tail) below.
System monitoring
Recent alerts
- 4m agoCron sync OK
- 12m agoWhatsApp pull OK
- 1h agoNVDA form sync OK · 18 new rescuers
- 3h agoNightly backup completed
- summary / widgets
- summary is the leading stat band (a StatGrid of StatTiles); widgets[] are the live cards in the responsive auto-fit grid (ds/charts live HERE).
- minWidth / children
- minWidth sets the widget column min (default 280px); children are free-form sections below the grid (alert feed / log tail). Omit summary+widgets+children → STUB placeholder.
- footer
- Footer slot. Server-safe — the chart islands are caller-passed.
AnalyticsDashboardPage
This is DashboardPage configured as an analytics dashboard — summary is a StatGrid of KPI StatTiles, widgets are recharts WidgetCards (Line / Bar / Donut).
import { DashboardPage } from "@/components/ds/recipes";
import { StatGrid, StatTile, WidgetCard } from "@savethemarshalldogs/design-system";
import { LineChart, BarChart, DonutChart } from "@/components/ds/charts";
<DashboardPage
title="Analytics"
summary={
<StatGrid>
<StatTile label="Rescuers" value="2,140" delta="+4.2%" deltaTone="up" spark={spark} />
{/* ... */}
</StatGrid>
}
widgets={[
<WidgetCard title="Signups / month"><LineChart data={signups} series={[{ key: "count" }]} x="month" /></WidgetCard>,
<WidgetCard title="By region"><BarChart data={byRegion} series={[{ key: "n" }]} x="region" /></WidgetCard>,
<WidgetCard title="Status mix"><DonutChart data={mix} nameKey="status" valueKey="n" /></WidgetCard>,
]}
/>CommandCenterPage
This is DashboardPage configured as a live ops command center — accented StatGrid of real-time counts, monitoring WidgetCards, and a CommandBar quick-action strip in the body.
import { DashboardPage } from "@/components/ds/recipes";
import { StatGrid, StatTile, WidgetCard, Badge } from "@savethemarshalldogs/design-system";
import { CommandBar } from "@/components/ds/surface";
<DashboardPage
title="Command center"
status={<Badge tone="good">All systems go</Badge>}
summary={<StatGrid>{liveTiles}</StatGrid>}
widgets={[
<WidgetCard title="Sync queue">{/* ... */}</WidgetCard>,
<WidgetCard title="Recent alerts">{/* ... */}</WidgetCard>,
]}
>
<CommandBar search={searchInput} controls={scopeSelects} actions={quickActions} />
</DashboardPage>