Seller Dashboard Overview

1. Purpose

The Seller Dashboard provides producers with a centralized interface to monitor sales, orders, and product performance.
Following automatic vendor creation via the Jumpseller API, the dashboard becomes the main workspace for ongoing seller activity.

---

2. Objectives

• Give sellers a real-time view of business performance.
• Offer interactive charts and visual summaries.
• Allow navigation to detailed product and order reports.
• Ensure data accuracy via Jumpseller API integration.
• Maintain usability across devices.

---

3. User Roles

Role	Responsibilities
Seller	Views and analyzes dashboard data
System	Aggregates and refreshes sales/order data periodically

---

4. User Flow Diagram

┌──────────────────────────────┐
│ Seller logs into dashboard   │
└──────────────┬───────────────┘
               ↓
System fetches metrics via API
               ↓
┌──────────────────────────────┐
│ Dashboard displays:          │
│  - Total Sales               │
│  - Orders                    │
│  - Top Products              │
│  - Sales Trends              │
└──────────────┬───────────────┘
               ↓
Seller interacts (date range filter, refresh, view details)
               ↓
Data refresh → Dashboard updates live

---

5. Dashboard Components

Component	Description
DashboardHeader.tsx	Displays summary metrics (Total Sales, Orders)
SalesChart.tsx	Visualizes sales over time
RecentOrders.tsx	Shows latest orders with quick actions
TopProducts.tsx	Lists top-selling items
QuickActions.tsx	Shortcuts to reports, products, and promotions
PerformanceFilters.tsx	Selects timeframes (daily, weekly, monthly)

---

6. Data Flow Diagram

[Frontend React Dashboard]
        │
        ▼
Fetch metrics → /api/dashboard
        │
        ▼
[FastAPI Backend Service]
        │
        ▼
Calls → Jumpseller API (orders, products, sales)
        │
        ▼
Aggregates + formats data
        │
        ▼
Returns JSON → Frontend
        │
        ▼
Charts & summaries update dynamically

---

7. Dashboard Metrics

Metric	Description	Example
Total Sales	Revenue for selected timeframe	$12,430
Orders	Number of completed orders	246
Top Products	Ranked by sales volume	“Fairtrade Coffee Beans”
Conversion Rate	% of site visits that became sales	3.4%
Average Order Value (AOV)	Average total per order	$50.52
Performance Trend	Time-based visualization of sales/orders	Graph

---

8. Design Principles

• Data clarity: Focus on key insights.
• Visual hierarchy: Metrics → Charts → Tables.
• Consistency: Same layout across all vendor tools.
• Transparency: Sellers can always trace metrics back to real data.