feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)

18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/admin/StoreRevenueView.vue

@@ -1,11 +1,16 @@
 <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'
 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()
 
@@ -45,15 +50,16 @@ const formatCurrency = (amount: number, currency: string = 'USD'): string => {
   return safeCurrency(amount, symbol)
 }
 
-// Status badge color classes
-const statusBadgeClass = (status: string): string => {
+// Status badge tone map
+type BadgeTone = 'online' | 'warn' | 'info' | 'offline' | 'neutral'
+const statusTone = (status: string): BadgeTone => {
   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'
+    case 'delivered': return 'online'
+    case 'paid': return 'warn'
+    case 'pending': return 'info'
+    case 'failed': return 'offline'
+    case 'refunded': return 'neutral'
+    default: return 'neutral'
   }
 }
 
@@ -77,6 +83,10 @@ const loadTransactions = async () => {
   }
 }
 
+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
@@ -106,16 +116,24 @@ const renderRevenueChart = () => {
     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)
+    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: '#1a1a1a',
-      borderColor: '#2a2a2a',
-      textStyle: { color: '#e5e5e5' },
+      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, '$')}`
@@ -131,15 +149,15 @@ const renderRevenueChart = () => {
     xAxis: {
       type: 'category',
       data: dates,
-      axisLine: { lineStyle: { color: '#404040' } },
-      axisLabel: { color: '#808080', rotate: 45 }
+      axisLine: { lineStyle: { color: axisLine } },
+      axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
     },
     yAxis: {
       type: 'value',
       name: 'Revenue ($)',
-      axisLine: { lineStyle: { color: '#404040' } },
-      splitLine: { lineStyle: { color: '#2a2a2a' } },
-      axisLabel: { color: '#808080', formatter: (value: number) => `$${value}` }
+      axisLine: { lineStyle: { color: axisLine } },
+      splitLine: { lineStyle: { color: grid } },
+      axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10, formatter: (value: number) => `$${value}` }
     },
     series: [
       {
@@ -186,163 +204,277 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="revenue-view">
     <!-- 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
+    <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"
-          :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"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="download"
           :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"
+          @click="exportCSV"
         >
-          <Download class="w-4 h-4" />
           Export CSV
-        </button>
+        </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 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="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 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 -->
-      <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>
+      <Panel title="Revenue over time (last 30 days)">
+        <div ref="revenueChart" class="revenue-view__chart-area"></div>
+      </Panel>
 
       <!-- 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>
+      <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>
 
-        <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>
+        <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>