Dashboard Overview

Dashboard Overview

The MICHAMP dashboard is your central hub for managing wallets, API keys, subscriptions, and accessing analytics.

Dashboard Layout

Main Components

┌─────────────────────────────────────────────┐
│  Navbar (Top)                               │
├──────────┬──────────────────────────────────┤
│          │                                  │
│ Sidebar  │  Main Content Area               │
│ (Left)   │  (Current Screen)                │
│          │                                  │
│          │                                  │
└──────────┴──────────────────────────────────┘

1. Top Navbar

Located at the very top, always visible:

Left Side:

• 🏠 MICHAMP logo (click to return to dashboard)

Right Side:

• 🔔 Notifications bell (with alert indicator)
• 📅 Time range selector
• 👤 User menu (username → logout)

2. Sidebar Navigation

Your main navigation menu (left side):

Sections:

• 📊 Dashboard - Overview and quick stats
• 💼 Wallets - Manage monitored wallets
• 👤 Profile - Account settings
• 📋 Service Plans - View and upgrade plans
• 🔑 API Keys - Manage API access
• 💳 Payments - Billing and payment history
• 🎫 Support - Submit and track tickets
• 💰 Subscription - Current plan details

Mobile:

• Tap hamburger menu (☰) to open/close sidebar
• Sidebar overlays content on small screens
• Auto-closes after selecting a screen

3. Main Content Area

Displays the current screen content:

• Changes based on sidebar selection
• Scrollable for long content
• Responsive design adapts to screen size

Dashboard Home Screen

The default view when you first log in.

Quick Stats Cards

Four key metrics at the top:

1. Current Plan Card

• Shows your service plan (Free/Pro/Enterprise)
• Visual tier indicator
• Quick link to upgrade (if on Free)

2. Active Wallets Card

• Number of wallets monitored
• Wallet limit for your plan
• Usage indicator

3. Subscription Days / API Keys Card

• Pro/Enterprise: Days remaining in subscription
• Free: Number of active API keys
• Status indicator (active/expiring soon)

4. API Usage / Transactions Card

• Enterprise: API calls used this month
• Free/Pro: Transaction count today
• Percentage used and trends

Dashboard Widgets

Solana Network Health (Large, left)

• Live network status indicator
• Current TPS (transactions per second)
• Average fee in SOL
• Network uptime percentage
• Historical chart visualization

Recent Alerts (Right panel)

• Latest system notifications
• Subscription warnings
• Large transaction detections
• Compliance check results
• System status updates

Monitored Wallets (Bottom left)

• List of your tracked wallets
• Shows first 3 wallets
• Balance and status for each
• “Add Wallet” button
• “View all” link if more than 3

Plan Features & Limits (Bottom right)

• Current usage vs limits
• Progress bars for:
  • Wallet slots used
  • API calls (if applicable)
  • Transaction analysis limit
• Feature list for your plan
• Upgrade CTA (if on Free plan)

Interactive Elements

Notification Bell:

🔔  ← Click to view notifications
●   ← Red dot = unread notifications

Time Range Selector:

[Last 24 Hours ▼]
- Last 24 Hours
- Last 7 Days
- Last 30 Days
- Last 90 Days

Quick Actions Section:

• ➕ Add Wallet - Jump to wallet creation
• 🔑 API Keys - Manage your keys
• 🎫 Support - Open support ticket
• ⬆️ Upgrade - View plans (if Free)

Screen-Specific Features

Dashboard Screen

For Free Plan Users:

• “Getting Started Guide” section
• “Unlock Premium Features” showcase
• Comparison of plan benefits
• Prominent upgrade CTAs

For Pro/Enterprise Users:

• Subscription renewal section
• Days remaining indicator
• Auto-renewal status
• Payment history link
• API usage analytics (Enterprise)

Visual Indicators

Status Colors:

• 🟢 Green - Active, healthy, good
• 🟡 Yellow - Warning, attention needed
• 🔴 Red - Critical, error, expired
• 🔵 Blue - Info, neutral, secondary

Progress Bars:

Wallet Slots:  [████████░░] 80%
API Calls:     [██████░░░░] 60%
Storage:       [███░░░░░░░] 30%

Badges:

[Active]        - Green background
[Expiring Soon] - Yellow background
[Expired]       - Red background
[Pro]           - Blue background

Responsive Design

Desktop (1024px+)

• Full sidebar visible
• Two-column layouts
• All widgets shown
• Expanded cards

Tablet (768px - 1023px)

• Collapsible sidebar
• Single-column layouts
• Priority widgets shown
• Condensed cards

Mobile (< 768px)

• Hidden sidebar (hamburger menu)
• Single-column stacked layout
• Essential widgets only
• Simplified cards
• Touch-optimized buttons

Keyboard Navigation

Global Shortcuts:

• Ctrl+/ or Cmd+/ - Search (coming soon)
• Esc - Close modal/menu
• Tab - Navigate between elements
• Enter - Activate focused button/link

Sidebar Navigation:

• Alt+1 - Dashboard
• Alt+2 - Wallets
• Alt+3 - Profile
• Alt+4 - Service Plans
• Alt+5 - API Keys

Performance Optimization

Auto-Refresh

Dashboard data refreshes automatically:

• Network stats: Every 10 seconds
• Wallet balances: Every 30 seconds
• Usage stats: Every 5 minutes
• Alerts: Every 2 minutes

Loading States

While data loads:

[Loading spinner]
Fetching wallet data...

• Skeleton screens for cards
• Progressive loading
• Error boundaries for failures

Session Activity

Your interactions keep the session alive:

• Clicking navigation
• Scrolling content
• Hovering over elements
• Typing in search (future)

Customization

Current Options

• Theme: Dark mode (default, light mode coming)
• Language: English (more languages planned)
• Time format: 12-hour or 24-hour
• Currency: USD (more currencies planned)

Future Features

• ⚙️ Customizable dashboard widgets
• 🎨 Color scheme preferences
• 📊 Widget arrangement (drag-and-drop)
• 🔔 Notification preferences
• 📧 Email alert settings

Accessibility

MICHAMP dashboard is designed for accessibility:

• ♿ WCAG 2.1 Level AA compliant
• ⌨️ Full keyboard navigation
• 🔊 Screen reader support
• 🎨 High contrast mode compatible
• 📱 Touch-friendly on mobile
• 🔤 Readable font sizes (minimum 14px)

Common Actions

Quick Reference

Action	Location
Add Wallet	Dashboard → “Add Wallet” button
View Usage	Dashboard → Usage stats card
Upgrade Plan	Dashboard → Service Plans
Generate API Key	Sidebar → API Keys
Check Balance	Dashboard → Wallet cards
Submit Ticket	Sidebar → Support
Update Profile	Sidebar → Profile
View Payments	Sidebar → Payments
Logout	Top right → Username → Logout

Troubleshooting

Dashboard not loading

1. Check internet connection
2. Hard refresh: Ctrl+Shift+R or Cmd+Shift+R
3. Clear browser cache
4. Try different browser
5. Check Status Page

Widgets showing errors

• “Failed to load” - Temporary API issue, retry
• “Unauthorized” - Session expired, log in again
• “Rate limited” - Too many requests, wait 1 minute

Layout issues

• Sidebar stuck open - Click outside sidebar or reload
• Content overlapping - Clear cache and reload
• Mobile menu not working - Update browser

Next Steps

Now that you understand the dashboard layout:

→ Managing Wallets - Add and monitor wallets
→ API Keys - Generate API access
→ Service Plans - Explore plans
→ Profile Settings - Customize your account