69 lines
3.7 KiB
Markdown
69 lines
3.7 KiB
Markdown
# Dashboard
|
|
|
|
Main application dashboard with key metrics and recent activity.
|
|
|
|
## Layout
|
|
|
|
```
|
|
╭──────────────────────────────────────────────────────────────────────────────╮
|
|
│ {{title}} {{userName}} ▼ │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ {{greeting}} │
|
|
│ │
|
|
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
|
|
│ │ {{metricCard1}} │ │ {{metricCard2}} │ │ {{metricCard3}} │ │
|
|
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
|
|
│ │
|
|
│ {{recentActivityTitle}} │
|
|
│ ╭────────────────────────────────────────────────────────────────────────╮ │
|
|
│ │ {{activityList}} │ │
|
|
│ ╰────────────────────────────────────────────────────────────────────────╯ │
|
|
│ │
|
|
╰──────────────────────────────────────────────────────────────────────────────╯
|
|
```
|
|
|
|
## Components Used
|
|
|
|
- **navigation**: Top navigation bar with user menu
|
|
- **card**: Metric cards for key statistics (3x)
|
|
- **badge**: Status indicators and trend arrows
|
|
- **list**: Recent activity feed
|
|
|
|
## States
|
|
|
|
### Loaded State
|
|
Dashboard fully loaded with all data displayed.
|
|
|
|
### Loading State
|
|
While fetching dashboard data - shows spinner.
|
|
|
|
### Error State
|
|
When data fetch fails - shows error message.
|
|
|
|
## Variables
|
|
|
|
- `title` (string): Dashboard title
|
|
- `userName` (string): Current user's name
|
|
- `greeting` (string): Personalized greeting
|
|
- `metricCard1` (component): First metric card (e.g., Revenue)
|
|
- `metricCard2` (component): Second metric card (e.g., Users)
|
|
- `metricCard3` (component): Third metric card (e.g., Growth)
|
|
- `recentActivityTitle` (string): Activity section header
|
|
- `activityList` (component): List of recent activities
|
|
|
|
## User Flows
|
|
|
|
1. User logs in and lands on dashboard
|
|
2. Dashboard loads metrics and activity data
|
|
3. User can click metric cards for detailed views
|
|
4. User can interact with activity items
|
|
5. User can access navigation menu via dropdown
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: main
|
|
- **ARIA Label**: "Dashboard main content"
|
|
- **Keyboard**: Tab navigation through interactive elements
|
|
- **Screen Reader**: All metrics and activities properly labeled
|