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:
Vantz Stockwell
353
frontend/src/views/admin/StoreRevenueView.vue
Normal file
353
frontend/src/views/admin/StoreRevenueView.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { DollarSign, TrendingUp, Clock, AlertCircle, Download, RefreshCw } from 'lucide-vue-next'
|
||||
import * as echarts from 'echarts'
|
||||
import type { ECharts } from 'echarts'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import type { StoreTransaction } from '@/types'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
const transactions = ref<StoreTransaction[]>([])
|
||||
const loading = ref(true)
|
||||
const statusFilter = ref<string>('all')
|
||||
|
||||
const revenueChart = ref<HTMLElement | null>(null)
|
||||
let revenueChartInstance: ECharts | null = null
|
||||
|
||||
// Summary metrics computed from transaction data
|
||||
const totalRevenue = computed(() => {
|
||||
return transactions.value
|
||||
.filter(t => t.status === 'paid' || t.status === 'delivered')
|
||||
.reduce((sum, t) => sum + t.amount, 0)
|
||||
})
|
||||
|
||||
const totalTransactions = computed(() => transactions.value.length)
|
||||
|
||||
const pendingDeliveries = computed(() => {
|
||||
return transactions.value.filter(t => t.status === 'paid' && !t.delivered).length
|
||||
})
|
||||
|
||||
const refunds = computed(() => {
|
||||
return transactions.value.filter(t => t.status === 'refunded').length
|
||||
})
|
||||
|
||||
// Filtered transactions based on status filter
|
||||
const filteredTransactions = computed(() => {
|
||||
if (statusFilter.value === 'all') return transactions.value
|
||||
return transactions.value.filter(t => t.status === statusFilter.value)
|
||||
})
|
||||
|
||||
// Format currency properly
|
||||
const formatCurrency = (amount: number, currency: string = 'USD'): string => {
|
||||
const symbol = currency === 'USD' ? '$' : currency
|
||||
return `${symbol}${amount.toFixed(2)}`
|
||||
}
|
||||
|
||||
// Status badge color classes
|
||||
const statusBadgeClass = (status: string): string => {
|
||||
switch (status) {
|
||||
case 'delivered': return 'bg-green-500/10 text-green-400'
|
||||
case 'paid': return 'bg-yellow-500/10 text-yellow-400'
|
||||
case 'pending': return 'bg-blue-500/10 text-blue-400'
|
||||
case 'failed': return 'bg-red-500/10 text-red-400'
|
||||
case 'refunded': return 'bg-neutral-500/10 text-neutral-400'
|
||||
default: return 'bg-neutral-700/50 text-neutral-400'
|
||||
}
|
||||
}
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateStr: string): string => {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// Load transactions
|
||||
const loadTransactions = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<StoreTransaction[]>('/api/webstore/transactions')
|
||||
transactions.value = data
|
||||
await nextTick()
|
||||
renderRevenueChart()
|
||||
} catch (error) {
|
||||
console.error('Failed to load transactions:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Render revenue chart (last 30 days, grouped by day)
|
||||
const renderRevenueChart = () => {
|
||||
if (!revenueChart.value || transactions.value.length === 0) return
|
||||
|
||||
if (revenueChartInstance) {
|
||||
revenueChartInstance.dispose()
|
||||
}
|
||||
revenueChartInstance = echarts.init(revenueChart.value)
|
||||
|
||||
// Group transactions by date and sum revenue
|
||||
const revenueByDate = new Map<string, number>()
|
||||
const last30Days = new Date()
|
||||
last30Days.setDate(last30Days.getDate() - 30)
|
||||
|
||||
transactions.value
|
||||
.filter(t => (t.status === 'paid' || t.status === 'delivered') && new Date(t.created_at) >= last30Days)
|
||||
.forEach(t => {
|
||||
const dateKey = new Date(t.created_at).toLocaleDateString('en-US')
|
||||
revenueByDate.set(dateKey, (revenueByDate.get(dateKey) || 0) + t.amount)
|
||||
})
|
||||
|
||||
// Generate array of last 30 days
|
||||
const dates: string[] = []
|
||||
const revenueData: number[] = []
|
||||
for (let i = 29; i >= 0; i--) {
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - i)
|
||||
const dateKey = d.toLocaleDateString('en-US')
|
||||
dates.push(d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }))
|
||||
revenueData.push(revenueByDate.get(dateKey) || 0)
|
||||
}
|
||||
|
||||
revenueChartInstance.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderColor: '#2a2a2a',
|
||||
textStyle: { color: '#e5e5e5' },
|
||||
formatter: (params: any) => {
|
||||
const value = params[0].data
|
||||
return `${params[0].axisValue}<br/>Revenue: $${value.toFixed(2)}`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates,
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
axisLabel: { color: '#808080', rotate: 45 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'Revenue ($)',
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
splitLine: { lineStyle: { color: '#2a2a2a' } },
|
||||
axisLabel: { color: '#808080', formatter: (value: number) => `$${value}` }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Revenue',
|
||||
type: 'line',
|
||||
data: revenueData,
|
||||
smooth: true,
|
||||
lineStyle: { color: '#10b981', width: 2 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(16, 185, 129, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: { color: '#10b981' }
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
// Export to CSV
|
||||
const exportCSV = () => {
|
||||
if (transactions.value.length === 0) return
|
||||
|
||||
let csv = 'Date,Player,Steam ID,Item ID,Amount,Currency,Status,Delivered,PayPal Order ID\n'
|
||||
transactions.value.forEach(t => {
|
||||
const date = new Date(t.created_at).toISOString()
|
||||
const playerName = (t.player_name || '').replace(/"/g, '""')
|
||||
csv += `"${date}","${playerName}","${t.steam_id}","${t.item_id || ''}",${t.amount},"${t.currency}","${t.status}",${t.delivered},"${t.paypal_order_id}"\n`
|
||||
})
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `webstore_transactions_${new Date().toISOString().split('T')[0]}.csv`
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTransactions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<DollarSign class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Revenue Dashboard</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="loadTransactions"
|
||||
:disabled="loading"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
|
||||
>
|
||||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': loading }" />
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
@click="exportCSV"
|
||||
:disabled="transactions.length === 0"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Download class="w-4 h-4" />
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<div class="text-neutral-500">Loading transaction data...</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<DollarSign class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Total Revenue</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ formatCurrency(totalRevenue) }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last 100 transactions</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<TrendingUp class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Total Transactions</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ totalTransactions }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">All time</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Clock class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Pending Deliveries</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ pendingDeliveries }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Paid, not delivered</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<AlertCircle class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Refunds</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ refunds }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Total refunded</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Chart -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Revenue Over Time (Last 30 Days)</h2>
|
||||
<div ref="revenueChart" class="h-64"></div>
|
||||
</div>
|
||||
|
||||
<!-- Transaction Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-3 border-b border-neutral-800 flex items-center justify-between">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Transaction History</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-xs text-neutral-500">Filter:</label>
|
||||
<select
|
||||
v-model="statusFilter"
|
||||
class="px-2 py-1 text-xs bg-neutral-800 border border-neutral-700 rounded text-neutral-300 focus:outline-none focus:border-oxide-500"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="delivered">Delivered</option>
|
||||
<option value="paid">Paid</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="failed">Failed</option>
|
||||
<option value="refunded">Refunded</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-neutral-800 text-left">
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Date</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Player</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Item</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Amount</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Delivered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="filteredTransactions.length === 0">
|
||||
<td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="statusFilter !== 'all'">No {{ statusFilter }} transactions found.</template>
|
||||
<template v-else>No transactions yet. Sales will appear here.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="txn in filteredTransactions"
|
||||
:key="txn.id"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3">
|
||||
<p class="text-sm text-neutral-300">{{ formatDate(txn.created_at) }}</p>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<p class="text-sm font-medium text-neutral-100">{{ txn.player_name || 'Unknown' }}</p>
|
||||
<p class="text-xs text-neutral-500 font-mono">{{ txn.steam_id }}</p>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<p class="text-sm text-neutral-300">{{ txn.item_id || '—' }}</p>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<p class="text-sm font-medium text-neutral-200">{{ formatCurrency(txn.amount, txn.currency) }}</p>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full uppercase"
|
||||
:class="statusBadgeClass(txn.status)"
|
||||
>
|
||||
{{ txn.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full"
|
||||
:class="txn.delivered ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
{{ txn.delivered ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
<p v-if="txn.delivered_at" class="text-xs text-neutral-600 mt-1">
|
||||
{{ formatDate(txn.delivered_at) }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user