# Dashboard

Dashboard is the homepage of the admin panel, displaying real-time system core data and operational status.

## Page Overview

Dashboard consists of three main areas:

1. **Key Metrics Cards** - 6 core business indicators
2. **Statistics Charts** - Revenue, user, and traffic statistics
3. **Sponsor Display** - Shows PPanel sponsors

## Key Metrics Cards

Top section displays 6 key business metric cards:

### Online Users
- **Display**: Current number of online users
- **Subtitle**: "Currently Online"
- **Click Action**: Jump to `/dashboard/user` user management page
- **Icon**: Blue user icon

### Today's Traffic
- **Display**: Today's total upload + download traffic
- **Subtitle**: Shows upload/download traffic breakdown
  - ↑ Upload traffic
  - ↓ Download traffic
- **Icon**: Purple exchange icon
- **Format**: Auto-converts to appropriate units (KB/MB/GB/TB)

### Monthly Traffic
- **Display**: This month's total upload + download traffic
- **Subtitle**: Shows monthly upload/download traffic breakdown
- **Icon**: Orange cloud data icon
- **Format**: Auto-converts to appropriate units

### Total Servers
- **Display**: Online servers + Offline servers
- **Subtitle**: Shows online/offline server count breakdown
  - "Online X Offline Y"
- **Click Action**: Jump to `/dashboard/servers` server management page
- **Icon**: Green server icon

### Pending Tickets
- **Display**: Number of tickets awaiting admin reply
- **Subtitle**: "Pending"
- **Click Action**: Jump to `/dashboard/ticket` ticket management page
- **Icon**: Red ticket icon

### System Version Info
- **Display**:
  - Backend service version number
  - Web admin version number
  - Version update status
- **Operations**:
  - Check for updates
  - One-click update (if new version available)
  - Restart system
  - View update logs

::: tip Tip
Click cards with links to quickly jump to the corresponding management page.
:::

## Statistics Charts

### Revenue Statistics Chart

Displays system revenue data with three time dimensions:

**Time Dimensions**:
- **Today**: Today's revenue data
- **Month**: Daily revenue trend for this month
- **Total**: Historical cumulative revenue data

**Today's Data** - Pie Chart:
- **New Purchase**: Revenue from new user orders
- **Renewal**: Revenue from renewal orders
- **Center Number**: Today's total revenue

**Month Data** - Bar Chart:
- X-axis: Daily dates
- Y-axis: Revenue amount
- Shows daily revenue bars for the month
- Hover to view detailed data

**Total Data** - Area Chart:
- **New Purchase Orders**: Cumulative new purchase order count
- **Renewal Orders**: Cumulative renewal order count
- **Total Orders**: Total cumulative orders
- Area chart showing long-term trends

**Bottom Summary**:
- New purchase amount / order count
- Renewal amount / order count
- Total amount / total order count

### User Statistics Chart

Displays user-related data with three time dimensions:

**Time Dimensions**:
- **Today**: Today's user data
- **Month**: Daily user trend for this month
- **Total**: Historical cumulative user data

**Today's Data** - Pie Chart:
- **Register**: Today's new registered users
- **New Purchase**: Today's first-time buyers
- **Repurchase**: Today's renewal users
- **Center Number**: Today's total users (register + new purchase + repurchase)

**Month Data** - Bar Chart:
- X-axis: Daily dates
- Y-axis: User count
- Three colored bars:
  - Registered users (blue)
  - New purchase users (green)
  - Renewal users (orange)

**Total Data** - Area Chart:
- **Registered Users**: Cumulative registration trend
- **New Purchase Users**: Cumulative new purchase trend
- **Renewal Users**: Cumulative renewal trend
- Three area curves showing long-term changes

**Bottom Summary**:
- Total registered users
- Total new purchase users
- Total renewal users

### Traffic Ranking Chart

Displays node or user traffic usage ranking:

**Time Toggle** (top-right tabs):
- **Today**: Today's traffic ranking
- **Yesterday**: Yesterday's traffic ranking

**Type Selection** (dropdown):
- **Node Traffic (Nodes)**: Shows server node traffic consumption ranking
- **User Traffic (Users)**: Shows user traffic usage ranking

**Chart Display** - Horizontal Bar Chart:
- Y-axis: Ranking number (1, 2, 3...)
- X-axis: Traffic size (auto-converts units)
- Bars: Traffic size visualization
- Bar Labels: Shows node name or user ID

**Interactions**:
- Hover: Display detailed traffic data
- Node Mode: Shows node name and traffic
- User Mode: Shows user subscription details (ID, package, expiry, etc.)

**Empty State**:
- Shows empty state message when no data

::: tip Traffic Calculation
Traffic = Upload traffic + Download traffic, automatically converted to KB/MB/GB/TB units.
:::

## Sponsor Display

Bottom of page shows sponsors supporting the PPanel project:

**Display Content**:
- Sponsor logo
- Sponsor name
- Brief description

**Data Source**:
- Fetches latest sponsor list from GitHub repository
- CDN accelerated access
- Auto-filters expired sponsors

**Interaction**:
- Click card to visit sponsor website
- Opens in new window

::: tip Support PPanel
Sponsoring helps PPanel continue releasing updates! Click sponsor cards to visit their services.
:::

## Data Refresh

- **Auto Refresh**: Page data updates automatically based on query configuration
- **Manual Refresh**: Refresh browser to immediately update all data
- **Real-time**: Key metrics fetch latest data in real-time

## Usage Recommendations

1. **Daily Review**: Check Dashboard daily to understand operational status
2. **Monitor Metrics**: Focus on real-time indicators like online users and pending tickets
3. **Trend Analysis**: Regularly review chart trends to analyze business changes
4. **Handle Anomalies**: Click cards to jump and handle issues when detecting data anomalies
5. **Version Updates**: Update system promptly when new version is available

## Troubleshooting

### Inaccurate Data?

1. Refresh browser page to re-fetch data
2. Check if server time is correct
3. Review system logs for errors

### Chart Showing Empty?

Possible causes:
- No data in the time period
- Data statistics service issue
- Try refreshing the page

### Sponsors Not Showing?

Possible causes:
- Network connection issue, cannot access CDN
- No valid sponsors in current period
- Browser blocking external resources

## Next Steps

- [User Management](/admin/users-support/users) - View user details and traffic usage
- [Ticket Management](/admin/users-support/tickets) - Handle pending tickets
- [Server Management](/admin/maintenance/servers) - Manage server nodes
- [Order Management](/admin/commerce/orders) - View revenue and order details