Dashboard Overview

Finance dashboard overview with balances, activity, and primary actions.

Preview

Open the exact pattern in the real BeeUI Web Showcase. This is a Web runtime preview, not native-device evidence.

Each named state is directly addressable:

The same source is available at apps/showcase/patterns/dashboard-finance/screens/dashboard-overview-screen.tsx.

Composition

Principal public BeeUI exports used by this screen: Button, Card, EmptyState, HStack, Skeleton, Text, VStack.

The pattern is a composition recipe rather than a new framework layer. Follow the linked component contracts for state, provider, platform and accessibility details.

State and callback contract

The screen is controlled through DashboardOverviewScreenProps. User intent crosses the application boundary through onCreateInvoice, onPrimaryAction, onTransactionPress, onViewActivity; fetching, routing, persistence and side effects remain application-owned.

// from apps/showcase/patterns/dashboard-finance/screens/dashboard-overview-screen.tsx
export type DashboardOverviewData = {
  accountLabel: string;
  activity: readonly TransactionRowData[];
  balance: string;
  balanceTrend: { direction: TrendDirection; label: string };
  greeting: string;
  metrics: readonly DashboardMetric[];
  trend: readonly MiniBarDatum[];
};

// from apps/showcase/patterns/dashboard-finance/components/transaction-row.tsx
export type TransactionRowData = {
  amount: string;
  direction: TransactionDirection;
  id: string;
  merchant: string;
  meta: string;
  status: TransactionStatus;
};

// from apps/showcase/patterns/dashboard-finance/components/trend-indicator.tsx
export type TrendDirection = 'up' | 'down' | 'flat';

// from apps/showcase/patterns/dashboard-finance/screens/dashboard-overview-screen.tsx
export type DashboardMetric = {
  label: string;
  trend: { direction: TrendDirection; label: string };
  value: string;
};

// from apps/showcase/patterns/dashboard-finance/components/mini-bar-chart.tsx
export type MiniBarDatum = {
  label: string;
  value: number;
};

// from apps/showcase/patterns/dashboard-finance/components/transaction-row.tsx
export type TransactionDirection = 'income' | 'expense';

// from apps/showcase/patterns/dashboard-finance/components/transaction-row.tsx
export type TransactionStatus = 'completed' | 'pending' | 'failed';

export type DashboardOverviewScreenProps = {
  data?: DashboardOverviewData;
  onCreateInvoice?: () => void;
  onPrimaryAction?: () => void;
  onTransactionPress?: (transaction: TransactionRowData) => void;
  onViewActivity?: () => void;
  state?: 'ready' | 'loading' | 'empty';
};

Common product states such as loading, success, empty, error, permission-like recovery, filtering/search/selection or pagination are represented only where the actual screen source exposes them. The pattern docs do not invent backend states that the fixture does not render.

Responsive contract

Read from the screen file and the 7 pattern-local files in its runtime import closure, direct and transitive: dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx. Every fact below is scoped to those files and to nothing else.

BeeUI layout primitives rendered: Box (dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/transaction-row.tsx), HStack (dashboard-finance/components/balance-card.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/screens/dashboard-overview-screen.tsx), VStack (dashboard-finance/components/balance-card.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/screens/dashboard-overview-screen.tsx).
Scroll ownership: ScrollView (dashboard-finance/components/screen-shell.tsx).
Horizontal scrolling: no horizontal scroll container in dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx.
Width constraint: max-w-6xl (dashboard-finance/components/screen-shell.tsx).
Breakpoint-prefixed utility classes: none in dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx.
Platform-prefixed utility classes: none in dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx.
Platform branching: no Platform.OS or Platform.select call in dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx.
Viewport measurement: no useWindowDimensions, Dimensions.get or breakpoint hook in dashboard-finance/screens/dashboard-overview-screen.tsx, dashboard-finance/components/balance-card.tsx, dashboard-finance/components/metric-card.tsx, dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/screen-shell.tsx, dashboard-finance/components/section-header.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx.

BeeUI’s mobile-first responsive contract is the framework-level document; the list above states only what this screen’s own files declare, and says nothing about how the composed components behave internally.

Accessibility

Roles this screen sets itself: button (dashboard-finance/components/transaction-row.tsx), image (dashboard-finance/components/mini-bar-chart.tsx).
Accessibility states and properties it sets itself: accessibilityLabel (dashboard-finance/components/mini-bar-chart.tsx, dashboard-finance/components/transaction-row.tsx, dashboard-finance/components/trend-indicator.tsx).
Semantics inherited from composed BeeUI families: AppHeader, Badge, Box, Button, Card, EmptyState, HStack, Skeleton, Stat, StatHelpText, StatLabel, StatValue, Text, VStack — each family’s own page derives the roles and states it sets; they are not restated here.

Touch-target size, focus order, announcements, RTL, large-text and reduced-motion behavior are not derived from this source — see the Accessibility guide for what is and is not covered by evidence. A Web preview does not substitute for VoiceOver/TalkBack runtime evidence.

Application ownership boundary

Intentionally excluded: Data fetching, invoice creation, and navigation.

BeeUI does not take ownership of app routing, authentication/business rules, APIs/data fetching, persistence, form/state frameworks, chart frameworks or backend logic merely because a pattern visually composes those product concepts.

Source ownership

DashboardOverviewScreen is Showcase source you copy, not a package export: it is not shipped from any @beemvp/beeui-* package, and the Registry CLI (pnpm beeui list / pnpm beeui add) does not carry pattern screens. Copy apps/showcase/patterns/dashboard-finance/screens/dashboard-overview-screen.tsx into your app and adapt it directly. Only the individual BeeUI components it composes (linked above) are available for source ownership through the repository-local Registry workflow; see CLI & source ownership for both the published npx @beemvp/beeui-cli@next path and the repository-local checkout path.