corrosion-admin-panel/frontend/src/views/admin/StoreRevenueView.vue

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
import { useApi } from '@/composables/useApi'
import type { StoreTransaction } from '@/types'
import { safeCurrency, safeDate } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import StatCard from '@/components/ds/data/StatCard.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
import Select from '@/components/ds/forms/Select.vue'

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 safeCurrency(amount, symbol)
}

// Status badge tone map
type BadgeTone = 'online' | 'warn' | 'info' | 'offline' | 'neutral'
const statusTone = (status: string): BadgeTone => {
  switch (status) {
    case 'delivered': return 'online'
    case 'paid': return 'warn'
    case 'pending': return 'info'
    case 'failed': return 'offline'
    case 'refunded': return 'neutral'
    default: return 'neutral'
  }
}

// Format date for display
const formatDate = (dateStr: string): string => {
  return safeDate(dateStr, '—')
}

// Load transactions
const loadTransactions = async () => {
  loading.value = true
  try {
    const data = await api.get<StoreTransaction[]>('/webstore/transactions')
    transactions.value = data
    await nextTick()
    renderRevenueChart()
  } catch (error) {
    console.error('Failed to load transactions:', error)
  } finally {
    loading.value = false
  }
}

function cssVar(name: string): string {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}

// 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)
  }

  const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
  const axisLine = cssVar('--border-default') || '#404040'
  const labelColor = cssVar('--text-tertiary') || '#808080'
  const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
  const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
  const tooltipText = cssVar('--text-primary') || '#e5e5e5'
  const mono = 'JetBrains Mono, monospace'

  revenueChartInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: tooltipBg,
      borderColor: tooltipBorder,
      textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
      formatter: (params: any) => {
        const value = params[0]?.data
        return `${params[0]?.axisValue ?? 'Unknown'}<br/>Revenue: ${safeCurrency(value, '$')}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLine: { lineStyle: { color: axisLine } },
      axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
    },
    yAxis: {
      type: 'value',
      name: 'Revenue ($)',
      axisLine: { lineStyle: { color: axisLine } },
      splitLine: { lineStyle: { color: grid } },
      axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10, 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="revenue-view">
    <!-- Header -->
    <div class="revenue-view__header">
      <h1 class="revenue-view__title">Revenue dashboard</h1>
      <div class="revenue-view__controls">
        <Button
          variant="secondary"
          size="sm"
          icon="refresh-cw"
          :loading="loading"
          @click="loadTransactions"
        >
          Refresh
        </Button>
        <Button
          variant="secondary"
          size="sm"
          icon="download"
          :disabled="transactions.length === 0"
          @click="exportCSV"
        >
          Export CSV
        </Button>
      </div>
    </div>

    <!-- Loading state -->
    <div v-if="loading" class="revenue-view__loading">
      <span class="revenue-view__loading-text">Loading transaction data...</span>
    </div>

    <template v-else>
      <!-- Summary Cards -->
      <div class="revenue-view__stats">
        <StatCard
          label="Total revenue"
          :value="formatCurrency(totalRevenue)"
          icon="dollar-sign"
          note="Last 100 transactions"
        />
        <StatCard
          label="Total transactions"
          :value="totalTransactions"
          icon="trending-up"
          note="All time"
        />
        <StatCard
          label="Pending deliveries"
          :value="pendingDeliveries"
          icon="clock"
          note="Paid, not delivered"
        />
        <StatCard
          label="Refunds"
          :value="refunds"
          icon="alert-circle"
          note="Total refunded"
        />
      </div>

      <!-- Revenue Chart -->
      <Panel title="Revenue over time (last 30 days)">
        <div ref="revenueChart" class="revenue-view__chart-area"></div>
      </Panel>

      <!-- Transaction Table -->
      <Panel title="Transaction history" :flush-body="true">
        <template #actions>
          <Select
            :options="[
              { value: 'all', label: 'All statuses' },
              { value: 'delivered', label: 'Delivered' },
              { value: 'paid', label: 'Paid' },
              { value: 'pending', label: 'Pending' },
              { value: 'failed', label: 'Failed' },
              { value: 'refunded', label: 'Refunded' }
            ]"
            v-model="statusFilter"
            size="sm"
          />
        </template>

        <div class="revenue-view__table-wrap">
          <table class="revenue-view__table">
            <thead>
              <tr class="revenue-view__thead-row">
                <th class="revenue-view__th revenue-view__th--left">Date</th>
                <th class="revenue-view__th revenue-view__th--left">Player</th>
                <th class="revenue-view__th revenue-view__th--left">Item</th>
                <th class="revenue-view__th revenue-view__th--right">Amount</th>
                <th class="revenue-view__th revenue-view__th--left">Status</th>
                <th class="revenue-view__th revenue-view__th--left">Delivered</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="filteredTransactions.length === 0">
                <td colspan="6" class="revenue-view__td-empty">
                  <EmptyState
                    icon="dollar-sign"
                    :title="statusFilter !== 'all' ? `No ${statusFilter} transactions` : 'No transactions yet'"
                    :description="statusFilter !== 'all' ? '' : 'Sales will appear here once customers make purchases.'"
                  />
                </td>
              </tr>
              <tr
                v-for="txn in filteredTransactions"
                :key="txn.id"
                class="revenue-view__row"
              >
                <td class="revenue-view__td">
                  <p class="revenue-view__cell-text">{{ formatDate(txn.created_at) }}</p>
                </td>
                <td class="revenue-view__td">
                  <p class="revenue-view__cell-primary">{{ txn.player_name || 'Unknown' }}</p>
                  <p class="revenue-view__cell-mono">{{ txn.steam_id }}</p>
                </td>
                <td class="revenue-view__td">
                  <p class="revenue-view__cell-text">{{ txn.item_id || '—' }}</p>
                </td>
                <td class="revenue-view__td revenue-view__td--right">
                  <p class="revenue-view__cell-primary revenue-view__cell-mono">{{ formatCurrency(txn.amount, txn.currency) }}</p>
                </td>
                <td class="revenue-view__td">
                  <Badge :tone="statusTone(txn.status)" uppercase>{{ txn.status }}</Badge>
                </td>
                <td class="revenue-view__td">
                  <Badge :tone="txn.delivered ? 'online' : 'neutral'">
                    {{ txn.delivered ? 'Yes' : 'No' }}
                  </Badge>
                  <p v-if="txn.delivered_at" class="revenue-view__cell-sub">
                    {{ formatDate(txn.delivered_at) }}
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </Panel>
    </template>
  </div>
</template>

<style scoped>
.revenue-view {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.revenue-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.revenue-view__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.revenue-view__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.revenue-view__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.revenue-view__loading-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.revenue-view__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 1024px) {
  .revenue-view__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.revenue-view__chart-area {
  height: 256px;
}

.revenue-view__table-wrap {
  overflow-x: auto;
}

.revenue-view__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.revenue-view__thead-row {
  border-bottom: 1px solid var(--border-subtle);
}

.revenue-view__th {
  padding: 12px 16px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.revenue-view__th--left {
  text-align: left;
}

.revenue-view__th--right {
  text-align: right;
}

.revenue-view__row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-standard);
}

.revenue-view__row:hover {
  background: var(--surface-hover);
}

.revenue-view__td {
  padding: 12px 16px;
  vertical-align: top;
}

.revenue-view__td--right {
  text-align: right;
}

.revenue-view__td-empty {
  padding: 0;
}

.revenue-view__cell-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.revenue-view__cell-primary {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.revenue-view__cell-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.revenue-view__cell-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
</style>