8.2 KiB
8.2 KiB
Dashboard - Rendered Example
This shows the actual dashboard with realistic metrics and activity data.
Loaded State (Default)
╭──────────────────────────────────────────────────────────────────────────────╮
│ Dashboard Sarah Johnson ▼ │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Welcome back, Sarah! Here's what's happening today. │
│ │
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
│ │ Revenue │ │ Active Users │ │ Growth │ │
│ │ ───────────────── │ │ ───────────────── │ │ ─────────────────── │ │
│ │ $24,567 │ │ 1,234 │ │ +12.5% │ │
│ │ +8.3% ↗ │ │ +45 today │ │ MoM │ │
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
│ │
│ Recent Activity │
│ ╭────────────────────────────────────────────────────────────────────────╮ │
│ │ • John Doe signed up 2 minutes ago │ │
│ │ • New order #1234 received 5 minutes ago │ │
│ │ • Sarah Johnson updated profile 8 minutes ago │ │
│ │ • Mike Smith completed onboarding 15 minutes ago │ │
│ │ • System backup completed successfully 22 minutes ago │ │
│ ╰────────────────────────────────────────────────────────────────────────╯ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Loading State
╭──────────────────────────────────────────────────────────────────────────────╮
│ Dashboard Sarah Johnson ▼ │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ ⠋ Loading dashboard... │
│ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Data Context
This example demonstrates:
User Information
- User: Sarah Johnson (logged in)
- Time: October 11, 2024, 3:45 PM
- Greeting: Personalized with name and time-appropriate message
Metric Cards
Card 1: Revenue
- Value: $24,567 (monthly revenue)
- Trend: +8.3% ↗ (positive growth from last month)
- Visual: Green trend indicator
Card 2: Active Users
- Value: 1,234 (total active users)
- Change: +45 today (new users today)
- Visual: User count with daily change
Card 3: Growth
- Value: +12.5% (percentage growth)
- Period: MoM (month over month)
- Visual: Growth percentage
Recent Activity
Real activity entries with timestamps:
- John Doe signed up - 2 minutes ago
- New order #1234 received - 5 minutes ago
- Sarah Johnson updated profile - 8 minutes ago
- Mike Smith completed onboarding - 15 minutes ago
- System backup completed successfully - 22 minutes ago
User Flow Demonstration
Step 1: Login Complete
User successfully authenticates → Dashboard loads
Step 2: Data Fetch
System retrieves:
- Latest metrics
- Recent activity
- User preferences
Step 3: Display
Dashboard renders with:
- Personalized greeting
- Current metrics with trends
- Real-time activity feed
Step 4: Interaction
User can:
- Click metric cards for details
- Click activity items for context
- Access user menu via dropdown
- Navigate to other sections
Components Breakdown
This screen composition includes:
-
Top Bar
- Dashboard title (left)
- User dropdown menu (right): "Sarah Johnson ▼"
-
Greeting Section
- Personalized message: "Welcome back, Sarah!"
- Context: "Here's what's happening today."
-
Metric Cards (3x) (component: card)
-
Revenue Card
- Title: "Revenue"
- Value: "$24,567"
- Trend: "+8.3% ↗" (badge with arrow)
-
Users Card
- Title: "Active Users"
- Value: "1,234"
- Change: "+45 today"
-
Growth Card
- Title: "Growth"
- Value: "+12.5%"
- Period: "MoM"
-
-
Activity Section
- Header: "Recent Activity"
- List (component: list)
- 5 recent items
- Each with description and timestamp
- Bullet formatting for clarity
Design Notes
- Information Hierarchy: Most important metrics (revenue) comes first
- Visual Grouping: Cards use consistent styling and spacing
- Real-time Feel: Recent timestamps show system is live
- Scanability: Bullet points and clear labels make scanning easy
- Trend Indicators: Arrows (↗) and percentages show direction quickly
- Whitespace: Generous padding prevents cramped feeling
Trend Indicators Explained
- ↗ (up-right arrow): Positive trend, growth
- → (right arrow): Flat, no change
- ↘ (down-right arrow): Negative trend, decline
- +X%: Positive percentage change (green context)
- -X%: Negative percentage change (red context)
Time-based Data
All timestamps are relative:
- "2 minutes ago" - Very recent
- "5 minutes ago" - Recent
- "15 minutes ago" - Somewhat recent
- "22 minutes ago" - Less recent
This creates a sense of real-time activity.
Accessibility Features
- Clear heading hierarchy (Dashboard → sections)
- Metric values announced with context
- Activity items in semantic list
- Keyboard navigation: Tab through cards and items
- Screen reader: Trends and timestamps properly announced
- High contrast for trend indicators
State Transitions
- Initial Load → Loading spinner shown
- Data Fetched → Transition to loaded state
- Error Occurs → Show error message, retry button
- User Clicks Card → Navigate to detail view
- New Activity → Update activity list (real-time)
This rendered example shows exactly how a production dashboard appears with real data!