Dashboard

A configurable dashboard template for building AI-assisted operational views. The dashboard is composed of named card regions with defined interaction patterns, designed to be data-driven and adaptable across verticals.

Previews

Sidebar Shell

Minimal Header Shell

Anatomy

The dashboard is built from four semantic regions, each with a distinct role:

Card Types

Every insight card has a type that determines what it displays:

Chart Types

Cards with type: "chart" use a chartType to select the visualization:

Card Sizes

Each card has a size that controls its column weight in the grid:

Interaction Patterns

Cards support three interaction modes:

Static

No interactive behavior. The card displays its content without any hover or click affordance. Used for simple KPIs that don’t need drill-down.

Navigate

On hover, an arrow-up-right icon appears in the card header. Clicking the card navigates to a detail page. Used for KPIs or summaries that link to a deeper view.

Expand

On hover, a maximize icon appears in the card header. Clicking expands the card to fill the grid with a multi-phase animation:

1. Width phase — Card expands horizontally, sibling card collapses
2. Height phase — Card expands vertically, other rows collapse
3. Full phase — Expanded content fades in (drilldown tabs, autopilot prompts)

Clicking the minimize icon or another card collapses back to the grid.

For horizontal-bars cards, the expanded state includes drilldown tabs below the title for switching between data views.

Prompt Bar

The prompt bar supports three ways to expand into the inline chat view:

When expanded, the overview card collapses and the prompt bar grows to fill the left column. A minimize icon in the header collapses back to the default layout.

Autopilot Panel

Each expandable card includes an autopilot icon alongside the expand icon. Clicking it slides in a panel from the right that provides AI-generated context for that card. The dashboard content shifts left to make room. Clicking the autopilot icon again or the close button dismisses the panel.

Data Configuration

The dashboard is driven by a DashboardDataset object that defines all text and card content:

interface DashboardDataset {
  name: string;              // Dataset identifier
  brandName: string;         // Company name in header
  brandLine: string;         // Tagline in header
  dashboardTitle: string;    // Page title
  badgeText: string;         // Badge next to title
  greeting: string;          // Overview card greeting
  headline: string;          // Overview card headline
  subhead: string;           // Overview card description
  promptPlaceholder: string; // Prompt bar placeholder text
  promptSuggestions: string[]; // Recommendation chips
  insightCards: [             // Exactly 4 insight cards
    InsightCardData,
    InsightCardData,
    InsightCardData,
    InsightCardData,
  ];
}

Each InsightCardData specifies its title, type, chart type, size, interaction, and the data for its visualization (KPI values, bar data, stacked segments, etc.).

Layout Modes

The dashboard responds to container width:

Theming

Card backgrounds, glow effects, and gradients are configurable through CardConfig and GlowConfig objects. The dashboard supports light and dark modes with independent styling for each. Color tokens and theme values should be updated in registry.json, not directly in CSS files.