feat: Add Phase 5 revenue dashboard UI
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:
Vantz Stockwell
2026-02-15 14:59:23 -05:00
parent 79f5071b77
commit 381d447dd8
3 changed files with 418 additions and 3 deletions

View File

@@ -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)