Dashboard

A complete dashboard screen template featuring responsive layouts, data visualization, and common dashboard patterns.

Features

• Responsive grid layout
• Stats cards
• Chart widgets
• Recent activity feed
• Quick actions
• Mobile-optimized views

Usage

Web (React)

import {
  Dashboard,
  DashboardHeader,
  DashboardStats,
  DashboardGrid,
  Widget
} from '@cuppa/screens'

function DashboardPage() {
  return (
    <Dashboard>
      <DashboardHeader
        title="Dashboard"
        actions={<Button>Export</Button>}
      />

      <DashboardStats
        stats={[
          { label: 'Total Users', value: '12,345', change: '+12%' },
          { label: 'Revenue', value: '$45.2K', change: '+8%' },
          { label: 'Active Sessions', value: '892', change: '-2%' },
        ]}
      />

      <DashboardGrid>
        <Widget title="Traffic">
          <LineChart data={trafficData} />
        </Widget>

        <Widget title="Recent Activity">
          <ActivityFeed items={activities} />
        </Widget>

        <Widget title="Top Products">
          <ProductList items={products} />
        </Widget>
      </DashboardGrid>
    </Dashboard>
  )
}

iOS (SwiftUI)

import CuppaUI

struct DashboardView: View {
  var body: some View {
    CuppaDashboard {
      DashboardHeader(
        title: "Dashboard",
        actions: { Button("Export") { } }
      )

      DashboardStats(stats: [
        StatCard(label: "Total Users", value: "12,345", change: .up(12)),
        StatCard(label: "Revenue", value: "$45.2K", change: .up(8)),
        StatCard(label: "Active Sessions", value: "892", change: .down(2)),
      ])

      DashboardGrid {
        Widget("Traffic") {
          LineChartView(data: trafficData)
        }

        Widget("Recent Activity") {
          ActivityFeedView(items: activities)
        }
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.screens.Dashboard

@Composable
fun DashboardScreen() {
  Dashboard {
    DashboardHeader(
      title = "Dashboard",
      actions = { Button(onClick = {}) { Text("Export") } }
    )

    DashboardStats(
      stats = listOf(
        StatCard("Total Users", "12,345", changePercent = 12),
        StatCard("Revenue", "$45.2K", changePercent = 8),
        StatCard("Active Sessions", "892", changePercent = -2),
      )
    )

    DashboardGrid {
      Widget(title = "Traffic") {
        LineChart(data = trafficData)
      }

      Widget(title = "Recent Activity") {
        ActivityFeed(items = activities)
      }
    }
  }
}

Components

DashboardHeader

Top section with title and actions.

DashboardStats

Grid of stat cards showing key metrics with trend indicators.

DashboardGrid

Responsive grid container for widgets.

Widget

Container for dashboard widgets (charts, lists, etc.).

Props

Dashboard

| Prop | Type | Default | Description | |------|------|---------|-------------| | layout | string | 'grid' | Layout type (grid, stacked) | | columns | number | 3 | Grid columns (desktop) | | spacing | string | 'md' | Widget spacing |

DashboardStats

| Prop | Type | Default | Description | |------|------|---------|-------------| | stats | array | [] | Array of stat objects | | columns | number | 3 | Number of stat cards |

Widget

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Widget title | | span | number | 1 | Grid column span | | actions | element | - | Widget header actions |

Layout Patterns

Three-Column Layout

Default layout with three equal columns.

Sidebar Layout

Main content area with right sidebar.

Masonry Layout

Flexible height widgets in grid.

Examples

Stat Cards

<DashboardStats
  stats={[
    {
      label: 'Total Revenue',
      value: '$124.5K',
      change: '+12.5%',
      trend: 'up'
    },
    {
      label: 'New Customers',
      value: '342',
      change: '+8.2%',
      trend: 'up'
    },
    {
      label: 'Churn Rate',
      value: '2.4%',
      change: '-0.5%',
      trend: 'down'
    }
  ]}
/>

Custom Widget

<Widget title="Sales Overview" span={2}>
  <BarChart
    data={salesData}
    height={300}
  />
</Widget>

Activity Feed

<Widget title="Recent Activity">
  <ActivityFeed
    items={[
      { user: 'John', action: 'created order #1234', time: '2m ago' },
      { user: 'Sarah', action: 'updated profile', time: '5m ago' },
      { user: 'Mike', action: 'posted comment', time: '12m ago' }
    ]}
  />
</Widget>

Responsive Behavior

Desktop (> 1024px)

• 3-column grid layout
• Full-width widgets
• Horizontal stat cards

Tablet (768px - 1024px)

• 2-column grid layout
• Stacked widgets
• Compact stat cards

Mobile (< 768px)

• Single column layout
• Vertically stacked
• Condensed stats

Data Integration

Real-time Updates

function LiveDashboard() {
  const { data, isLoading } = useDashboardData({
    refreshInterval: 30000 // 30 seconds
  })

  if (isLoading) return <DashboardSkeleton />

  return <Dashboard data={data} />
}

Export Data

<DashboardHeader
  actions={
    <Button onClick={exportDashboard}>
      Export PDF
    </Button>
  }
/>

Best Practices

1. Show the most important metrics first
2. Use trend indicators for context
3. Keep widgets focused on single metrics
4. Update data in real-time when possible
5. Provide export/share functionality
6. Test responsive layouts thoroughly
7. Use skeleton loaders for async data

Customization

Override dashboard styling:

// cuppa.config.ts
export default {
  screens: {
    dashboard: {
      columns: 4,
      spacing: 'lg',
      showTrends: true
    }
  }
}