feat: Add Phase 5 revenue dashboard UI
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Revenue analytics dashboard for webstore owners: - Summary cards: Total Revenue, Transactions, Pending Deliveries, Refunds - Revenue chart: ECharts line graph showing daily revenue (last 30 days) - Transaction table: Date, Player, Item, Amount, Status, Delivered - Status filter dropdown (all/delivered/paid/pending/failed/refunded) - CSV export with full transaction details - Color-coded status badges for quick scanning - Manual refresh button (no auto-polling) - Route: /admin/webstore/revenue - API: GET /api/webstore/transactions - TypeScript: StoreTransaction interface Phase 5 Progress: 3/4 frontend components complete (75%) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
57
hardpush.log
57
hardpush.log
@@ -421,3 +421,60 @@ Status: OPERATIONAL - Customers can browse items, enter Steam ID, and complete P
|
||||
Phase 5 Progress: 2/4 frontend components complete (50%)
|
||||
Remaining: Item Management UI, Revenue Dashboard
|
||||
|
||||
|
||||
[2026-02-15T21:30 UTC]
|
||||
Agent Lima (Revenue Dashboard UI): COMPLETE
|
||||
|
||||
Component: StoreRevenueView.vue (365 lines)
|
||||
Route: /admin/webstore/revenue (auth required)
|
||||
Features:
|
||||
- Summary Cards (4 metrics):
|
||||
* Total Revenue (sum of paid/delivered transactions) - formatted as $10.00
|
||||
* Total Transactions (count)
|
||||
* Pending Deliveries (paid but not delivered)
|
||||
* Refunds (count of refunded transactions)
|
||||
- Revenue Chart (ECharts):
|
||||
* Line chart showing daily revenue over last 30 days
|
||||
* Green gradient fill, smooth curves
|
||||
* Tooltip with formatted currency values
|
||||
* Auto-grouped by date with zero-fill for missing days
|
||||
* Consistent styling with AnalyticsView patterns
|
||||
- Transaction History Table:
|
||||
* Columns: Date, Player, Item, Amount, Status, Delivered
|
||||
* Color-coded status badges:
|
||||
- Green (delivered)
|
||||
- Yellow (paid/pending)
|
||||
- Red (failed)
|
||||
- Neutral (refunded)
|
||||
* Date formatting with time (MMM DD, YYYY HH:MM)
|
||||
* Steam ID displayed under player name
|
||||
* Delivered badge with delivery timestamp
|
||||
* Hover effects on table rows
|
||||
- Status Filter Dropdown:
|
||||
* Options: All, Delivered, Paid, Pending, Failed, Refunded
|
||||
* Real-time filtering via computed property
|
||||
- Export CSV Button:
|
||||
* Full transaction data export
|
||||
* Filename: webstore_transactions_YYYY-MM-DD.csv
|
||||
* Includes: date, player, steam_id, item_id, amount, currency, status, delivered, paypal_order_id
|
||||
- Manual Refresh Button:
|
||||
* Spinning icon animation during loading
|
||||
* No auto-polling (avoids API spam)
|
||||
- Empty States:
|
||||
* No transactions yet (filtered or unfiltered)
|
||||
* Disabled export when no data
|
||||
- Loading State:
|
||||
* Centered spinner with neutral text
|
||||
- TypeScript interface: StoreTransaction (id, item_id, steam_id, player_name, paypal_order_id, amount, currency, status, delivered, delivered_at, payer_email, created_at)
|
||||
- API integration: GET /api/webstore/transactions (limit 100 from backend)
|
||||
- Responsive design: 2/4 column grid on mobile/desktop
|
||||
- Currency formatting: formatCurrency() helper with $ symbol prefix
|
||||
- Date parsing with timezone handling
|
||||
Security: Auth required, license_id scoped via backend JWT claims
|
||||
Files: frontend/src/views/admin/StoreRevenueView.vue, frontend/src/types/index.ts (StoreTransaction interface), frontend/src/router/index.ts (route wired)
|
||||
Commit: Pending
|
||||
Status: OPERATIONAL - Store owners can view sales metrics, transaction history, filter by status, and export financial data.
|
||||
|
||||
Phase 5 Progress: 3/4 frontend components complete (75%)
|
||||
Remaining: Item Management UI (Agent Juliet)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user