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/MapAnalyticsView.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
-import { Map, TrendingUp, Award, Target, Download } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
 import type { MapAnalyticsSummary } from '@/types'
 import { safeFixed } 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 Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 
@@ -30,6 +36,10 @@ const loadMapAnalytics = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 const renderCharts = () => {
   if (!analytics.value || analytics.value.maps.length === 0) return
 
@@ -44,20 +54,29 @@ const renderCharts = () => {
     const avgPlayers = analytics.value.maps.map(m => m.avg_players)
     const peakPlayers = analytics.value.maps.map(m => m.peak_players)
 
+    const accent = cssVar('--accent') || '#CE422B'
+    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'
+
     performanceChartInstance.setOption({
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' },
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
         axisPointer: {
           type: 'shadow'
         }
       },
       legend: {
         data: ['Avg Players', 'Peak Players'],
-        textStyle: { color: '#a3a3a3' },
+        textStyle: { color: labelColor, fontFamily: mono },
         top: 0
       },
       grid: {
@@ -70,22 +89,22 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: mapNames,
-        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: 'Players',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       series: [
         {
           name: 'Avg Players',
           type: 'bar',
           data: avgPlayers,
-          itemStyle: { color: '#CE422B' },
+          itemStyle: { color: accent },
           barGap: '10%'
         },
         {
@@ -138,182 +157,263 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="map-analytics-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Map class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Map Analytics</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="downloadCSV"
-          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"
-        >
-          <Download class="w-4 h-4" />
+    <div class="map-analytics-view__header">
+      <h1 class="map-analytics-view__title">Map analytics</h1>
+      <div class="map-analytics-view__controls">
+        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
           Export CSV
-        </button>
-        <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-          <button
-            v-for="opt in (['30d', '90d', 'all'] as const)"
-            :key="opt"
-            @click="timeRange = opt"
-            class="px-3 py-2 text-sm font-medium transition-colors"
-            :class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ opt }}
-          </button>
-        </div>
+        </Button>
+        <Tabs
+          :items="[
+            { value: '30d', label: '30d' },
+            { value: '90d', label: '90d' },
+            { value: 'all', label: 'All' }
+          ]"
+          v-model="timeRange"
+          variant="pill"
+        />
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading map analytics...</div>
+    <div v-if="loading" class="map-analytics-view__loading">
+      <span class="map-analytics-view__loading-text">Loading map analytics...</span>
     </div>
 
     <template v-else-if="analytics">
       <!-- Summary cards -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Award class="w-4 h-4 text-oxide-400" />
-            <p class="text-sm text-neutral-400">Best Performing Map</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">
-            {{ analytics.best_performing_map ?? 'No data' }}
-          </p>
-          <p class="text-xs text-neutral-600 mt-1" v-if="analytics.maps.length > 0">
-            Avg {{ safeFixed(analytics?.maps?.[0]?.avg_players, 1) }} players
-          </p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Target class="w-4 h-4 text-green-400" />
-            <p class="text-sm text-neutral-400">Rotation Effectiveness</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">
-            {{ safeFixed(analytics?.rotation_effectiveness, 1) }}%
-          </p>
-          <p class="text-xs text-neutral-600 mt-1">Overall rotation health</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-blue-400" />
-            <p class="text-sm text-neutral-400">Total Maps Tracked</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">{{ analytics.maps.length }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
-        </div>
+      <div class="map-analytics-view__stats">
+        <StatCard
+          label="Best performing map"
+          :value="analytics.best_performing_map ?? 'No data'"
+          icon="award"
+          :note="analytics.maps.length > 0 ? `Avg ${safeFixed(analytics?.maps?.[0]?.avg_players, 1)} players` : undefined"
+        />
+        <StatCard
+          label="Rotation effectiveness"
+          :value="safeFixed(analytics?.rotation_effectiveness, 1)"
+          unit="%"
+          icon="target"
+          note="Overall rotation health"
+        />
+        <StatCard
+          label="Total maps tracked"
+          :value="analytics.maps.length"
+          icon="trending-up"
+          :note="`Last ${timeRange}`"
+        />
       </div>
 
       <!-- Performance 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">
-          Map Performance Comparison
-        </h2>
-        <div v-if="analytics.maps.length > 0" ref="performanceChart" class="h-80"></div>
-        <div v-else class="h-80 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
-          <p class="text-sm text-neutral-600">No map data available for this time range</p>
-        </div>
-      </div>
+      <Panel title="Map performance comparison">
+        <div v-if="analytics.maps.length > 0" ref="performanceChart" class="map-analytics-view__chart-area"></div>
+        <EmptyState
+          v-else
+          icon="map"
+          title="No map data"
+          description="No map data available for this time range."
+        />
+      </Panel>
 
       <!-- Map performance table -->
-      <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">
-          Detailed Map Metrics
-        </h2>
-        <div v-if="sortedMaps.length > 0" class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead class="border-b border-neutral-800">
-              <tr>
-                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Map Name</th>
-                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Seed</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Times Used</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Avg Players</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Peak Players</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Effectiveness</th>
+      <Panel title="Detailed map metrics" :flush-body="sortedMaps.length > 0">
+        <div v-if="sortedMaps.length > 0" class="map-analytics-view__table-wrap">
+          <table class="map-analytics-view__table">
+            <thead>
+              <tr class="map-analytics-view__thead-row">
+                <th class="map-analytics-view__th map-analytics-view__th--left">Map name</th>
+                <th class="map-analytics-view__th map-analytics-view__th--left">Seed</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Times used</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Avg players</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Peak players</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Effectiveness</th>
               </tr>
             </thead>
             <tbody>
               <tr
                 v-for="map in sortedMaps"
                 :key="map.map_id"
-                class="border-b border-neutral-800/50 hover:bg-neutral-800/30 transition-colors"
+                class="map-analytics-view__row"
               >
-                <td class="py-3 px-4 text-neutral-200 font-medium">{{ map.map_name }}</td>
-                <td class="py-3 px-4 text-neutral-400">{{ map.seed ?? '—' }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ map.times_used }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ safeFixed(map.avg_players, 1) }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ map.peak_players }}</td>
-                <td class="py-3 px-4 text-right">
-                  <span
-                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
-                    :class="{
-                      'bg-green-500/10 text-green-400': map.effectiveness_score >= 80,
-                      'bg-yellow-500/10 text-yellow-400': map.effectiveness_score >= 60 && map.effectiveness_score < 80,
-                      'bg-red-500/10 text-red-400': map.effectiveness_score < 60
-                    }"
+                <td class="map-analytics-view__td map-analytics-view__td--primary">{{ map.map_name }}</td>
+                <td class="map-analytics-view__td">{{ map.seed ?? '—' }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ map.times_used }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ safeFixed(map.avg_players, 1) }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ map.peak_players }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--right">
+                  <Badge
+                    :tone="map.effectiveness_score >= 80 ? 'online' : map.effectiveness_score >= 60 ? 'warn' : 'offline'"
+                    mono
                   >
                     {{ safeFixed(map.effectiveness_score, 1) }}%
-                  </span>
+                  </Badge>
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div v-else class="py-8 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
-          <p class="text-sm text-neutral-600">No map data available</p>
-        </div>
-      </div>
+        <EmptyState
+          v-else
+          icon="map"
+          title="No map data"
+          description="No map data available."
+        />
+      </Panel>
 
       <!-- Insights section -->
-      <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">
-          Actionable Insights
-        </h2>
-        <div class="space-y-3">
-          <div v-if="analytics.best_performing_map" class="flex items-start gap-3 p-3 bg-neutral-800/50 rounded-lg">
-            <Award class="w-5 h-5 text-oxide-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">
-                Your best map is <span class="text-oxide-400">{{ analytics.best_performing_map }}</span>
-              </p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Consider featuring this map more frequently in your rotation for maximum player engagement.
-              </p>
-            </div>
-          </div>
+      <Panel title="Actionable insights">
+        <div class="map-analytics-view__insights">
+          <Alert
+            v-if="analytics.best_performing_map"
+            tone="accent"
+            :title="`Best map: ${analytics.best_performing_map}`"
+          >
+            Consider featuring this map more frequently in your rotation for maximum player engagement.
+          </Alert>
 
-          <div
+          <Alert
             v-if="analytics.rotation_effectiveness < 70"
-            class="flex items-start gap-3 p-3 bg-yellow-500/5 border border-yellow-500/20 rounded-lg"
+            tone="warn"
+            title="Rotation effectiveness is below optimal"
           >
-            <Target class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">Rotation effectiveness is below optimal</p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Consider removing low-performing maps (effectiveness &lt; 60%) and testing new maps to improve overall rotation health.
-              </p>
-            </div>
-          </div>
+            Consider removing low-performing maps (effectiveness &lt; 60%) and testing new maps to improve overall rotation health.
+          </Alert>
 
-          <div
+          <Alert
             v-else-if="analytics.rotation_effectiveness >= 80"
-            class="flex items-start gap-3 p-3 bg-green-500/5 border border-green-500/20 rounded-lg"
+            tone="online"
+            title="Excellent rotation effectiveness"
           >
-            <TrendingUp class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">Excellent rotation effectiveness!</p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Your current map rotation is driving strong player engagement. Keep monitoring for any changes.
-              </p>
-            </div>
-          </div>
+            Your current map rotation is driving strong player engagement. Keep monitoring for any changes.
+          </Alert>
         </div>
-      </div>
+      </Panel>
     </template>
   </div>
 </template>
+
+<style scoped>
+.map-analytics-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.map-analytics-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.map-analytics-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.map-analytics-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.map-analytics-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.map-analytics-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.map-analytics-view__stats {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 768px) {
+  .map-analytics-view__stats {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.map-analytics-view__chart-area {
+  height: 320px;
+}
+
+.map-analytics-view__table-wrap {
+  overflow-x: auto;
+}
+
+.map-analytics-view__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.map-analytics-view__thead-row {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.map-analytics-view__th {
+  padding: 12px 16px;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.map-analytics-view__th--left {
+  text-align: left;
+}
+
+.map-analytics-view__th--right {
+  text-align: right;
+}
+
+.map-analytics-view__row {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.map-analytics-view__row:hover {
+  background: var(--surface-hover);
+}
+
+.map-analytics-view__td {
+  padding: 12px 16px;
+  color: var(--text-secondary);
+}
+
+.map-analytics-view__td--primary {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.map-analytics-view__td--num {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.map-analytics-view__td--right {
+  text-align: right;
+}
+
+.map-analytics-view__insights {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>