Dashboard

The Cockpit Dashboard at /cockpit/dashboard provides a unified view of your business metrics — revenue, traffic, ads, social, email, support, and agent activity — all in one place.

Hero KPIs

The top row shows your most important metrics at a glance:

Revenue: $12,450 (+18% ↑)  |  Traffic: 24.5K (+7% ↑)  |  Ad Spend: $3,200  |  New Customers: 142

KPIs pull from your connected data sources. Percentages compare to the previous period.

Data Sources

The dashboard aggregates from up to 7 sources:

Each source is a panel that loads independently — if one source is slow or disconnected, the others still render.

Panel Types

Metric Cards

Compact cards showing a single metric with trend:

┌─────────────────────┐
│ Monthly Revenue      │
│ $12,450              │
│ ↑ +18% vs last month│
│ ▁▂▃▅▆█▇▅▆▇█▇       │
└─────────────────────┘

Charts

Interactive charts with time range selectors (7d, 30d, 90d):

• Line charts for trends (revenue over time, traffic)
• Bar charts for comparisons (ad spend by platform)
• Donut charts for breakdowns (traffic sources, revenue by product)

Alert Ribbon

A top-of-page notification bar for important alerts:

⚠️ Ad spend is 40% over budget this week  |  🎉 Revenue milestone: $10K MRR reached

Alerts are generated by checking connected data against configurable thresholds.

Per-Panel Loading

Each panel fetches data independently using React Suspense:

Dashboard loads → Skeleton panels shown → Each panel resolves independently
                    │                         │
                    ├── Revenue ✓ (200ms)      ├── Shows data
                    ├── Traffic ✓ (350ms)      ├── Shows data
                    ├── Ads ⏳ (loading)       ├── Shows skeleton
                    └── Social ✗ (error)       └── Shows error state

This means the dashboard is usable immediately — you don't wait for the slowest data source.

Customization

Dashboard Config

The dashboard layout is configurable per user:

POST /api/work/dashboard/config
{
  "panels": ["revenue", "traffic", "ads", "social"],
  "layout": "grid",
  "defaultPeriod": "30d"
}

Time Ranges

All panels support consistent time range filtering:

• 7d — Last 7 days
• 30d — Last 30 days (default)
• 90d — Last 90 days
• Custom — Date picker for custom ranges