feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
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>
This commit is contained in:
Vantz Stockwell
@@ -3,7 +3,13 @@ import { ref, onMounted, computed } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { StoreConfig } from '@/types'
|
||||
import { Store, Save, Loader2, AlertTriangle, DollarSign } from 'lucide-vue-next'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Select from '@/components/ds/forms/Select.vue'
|
||||
import Switch from '@/components/ds/forms/Switch.vue'
|
||||
|
||||
const api = useApi()
|
||||
const toast = useToastStore()
|
||||
@@ -22,10 +28,18 @@ const isLoading = ref(false)
|
||||
const saving = ref(false)
|
||||
const isConfigured = ref(false)
|
||||
|
||||
// DS Input uses defineModel<string>() which emits string | undefined, but
|
||||
// paypal_client_id is string | null in the DB type. Bridge null ↔ undefined
|
||||
// so we never change what gets saved to the API.
|
||||
const paypalClientId = computed({
|
||||
get: () => config.value.paypal_client_id ?? undefined,
|
||||
set: (v: string | undefined) => { config.value.paypal_client_id = v ?? null },
|
||||
})
|
||||
|
||||
const currencyOptions = [
|
||||
{ value: 'USD', label: 'USD - US Dollar' },
|
||||
{ value: 'EUR', label: 'EUR - Euro' },
|
||||
{ value: 'GBP', label: 'GBP - British Pound' },
|
||||
{ value: 'USD', label: 'USD — US Dollar' },
|
||||
{ value: 'EUR', label: 'EUR — Euro' },
|
||||
{ value: 'GBP', label: 'GBP — British Pound' },
|
||||
]
|
||||
|
||||
const showPayPalWarning = computed(() => {
|
||||
@@ -40,7 +54,6 @@ async function fetchConfig() {
|
||||
isConfigured.value = !!data.config.store_name
|
||||
} catch (err: any) {
|
||||
if (err.response?.status === 404) {
|
||||
// No config yet, use defaults
|
||||
isConfigured.value = false
|
||||
} else {
|
||||
toast.error('Failed to load store configuration')
|
||||
@@ -51,7 +64,6 @@ async function fetchConfig() {
|
||||
}
|
||||
|
||||
async function saveConfig() {
|
||||
// Validation
|
||||
if (!config.value.store_name.trim()) {
|
||||
toast.error('Store name is required')
|
||||
return
|
||||
@@ -73,7 +85,6 @@ async function saveConfig() {
|
||||
enabled: config.value.enabled,
|
||||
}
|
||||
|
||||
// Only include secret if it was entered
|
||||
if (paypalSecret.value.trim()) {
|
||||
payload.paypal_client_secret = paypalSecret.value
|
||||
}
|
||||
@@ -81,7 +92,7 @@ async function saveConfig() {
|
||||
await api.put('/webstore/config', payload)
|
||||
toast.success('Store configuration saved successfully')
|
||||
isConfigured.value = true
|
||||
paypalSecret.value = '' // Clear after save
|
||||
paypalSecret.value = ''
|
||||
} catch (err: any) {
|
||||
const message = err.response?.data?.error || 'Failed to save configuration'
|
||||
toast.error(message)
|
||||
@@ -96,202 +107,181 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Store class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Store Configuration</h1>
|
||||
<p class="text-sm text-neutral-500 mt-0.5">
|
||||
Configure your integrated webstore and PayPal settings
|
||||
</p>
|
||||
</div>
|
||||
<div class="sc-page">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Management</div>
|
||||
<h1 class="page__title">Store configuration</h1>
|
||||
<p class="page__sub">Configure your integrated webstore and PayPal settings.</p>
|
||||
</div>
|
||||
<button
|
||||
@click="saveConfig"
|
||||
:disabled="saving || isLoading"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
<Button :loading="saving" :disabled="isLoading" icon="save" @click="saveConfig">
|
||||
Save configuration
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Loading skeleton -->
|
||||
<div v-if="isLoading" class="sc-loading">
|
||||
<EmptyState icon="loader" title="Loading configuration" description="Fetching your store settings…" />
|
||||
</div>
|
||||
|
||||
<!-- Empty state — no config yet -->
|
||||
<Panel v-else-if="!isConfigured && !config.store_name">
|
||||
<EmptyState
|
||||
icon="shopping-cart"
|
||||
title="No store configured"
|
||||
description="Set up your integrated webstore to start selling in-game items, ranks, and currency to your players. Fill out the form below to get started."
|
||||
>
|
||||
<Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
|
||||
<Save v-else class="w-4 h-4" />
|
||||
{{ saving ? 'Saving...' : 'Save Configuration' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
|
||||
<Loader2 class="w-8 h-8 text-neutral-500 animate-spin mx-auto mb-3" />
|
||||
<p class="text-sm text-neutral-500">Loading configuration...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-else-if="!isConfigured && !config.store_name"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center"
|
||||
>
|
||||
<Store class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
|
||||
<h3 class="text-lg font-medium text-neutral-200 mb-2">No Store Configured</h3>
|
||||
<p class="text-sm text-neutral-500 mb-6 max-w-md mx-auto">
|
||||
Set up your integrated webstore to start selling in-game items, ranks, and currency to your players.
|
||||
</p>
|
||||
<p class="text-xs text-neutral-600">
|
||||
Fill out the form below to get started.
|
||||
</p>
|
||||
</div>
|
||||
<template #action>
|
||||
<Button size="sm" variant="outline" icon="arrow-down">Complete the form below</Button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
</Panel>
|
||||
|
||||
<!-- Configuration form -->
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Store enable toggle with warning -->
|
||||
<div
|
||||
class="bg-neutral-900 border rounded-lg p-5"
|
||||
:class="config.enabled ? 'border-oxide-500/50' : 'border-neutral-800'"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-neutral-200">Enable Webstore</h2>
|
||||
<p class="text-xs text-neutral-500 mt-1">
|
||||
Allow players to purchase items from your store
|
||||
</p>
|
||||
<div v-else class="sc-form">
|
||||
<!-- Enable toggle -->
|
||||
<Panel title="Webstore status" subtitle="Allow players to purchase items from your store">
|
||||
<div class="sc-toggle-row">
|
||||
<div class="sc-toggle-row__info">
|
||||
<span class="sc-toggle-row__label">Enable webstore</span>
|
||||
<span class="sc-toggle-row__hint">Players will be able to browse and purchase items when enabled.</span>
|
||||
</div>
|
||||
<button
|
||||
@click="config.enabled = !config.enabled"
|
||||
:class="config.enabled ? 'bg-oxide-600' : 'bg-neutral-700'"
|
||||
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
|
||||
>
|
||||
<span
|
||||
:class="config.enabled ? 'translate-x-6' : 'translate-x-1'"
|
||||
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
||||
></span>
|
||||
</button>
|
||||
<Switch v-model="config.enabled" />
|
||||
</div>
|
||||
|
||||
<!-- Warning when enabled without PayPal -->
|
||||
<div
|
||||
<Alert
|
||||
v-if="showPayPalWarning"
|
||||
class="mt-4 flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg"
|
||||
tone="warn"
|
||||
title="PayPal configuration required"
|
||||
class="sc-alert"
|
||||
>
|
||||
<AlertTriangle class="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
<div class="text-xs text-yellow-300">
|
||||
<strong>PayPal configuration required.</strong> You must configure PayPal credentials below before the store can process transactions.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Configure PayPal credentials in the section below before the store can process transactions.
|
||||
</Alert>
|
||||
</Panel>
|
||||
|
||||
<!-- Basic store info -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Store Information</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Store Name *</label>
|
||||
<input
|
||||
<!-- Store information -->
|
||||
<Panel title="Store information" eyebrow="General">
|
||||
<div class="sc-fields">
|
||||
<Input
|
||||
v-model="config.store_name"
|
||||
type="text"
|
||||
label="Store name"
|
||||
placeholder="My Rust Server Store"
|
||||
maxlength="200"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
:required="true"
|
||||
hint="Displayed to players on the store page"
|
||||
/>
|
||||
<p class="text-xs text-neutral-600 mt-1">Displayed to players on the store page</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
|
||||
<textarea
|
||||
v-model="config.description"
|
||||
placeholder="Welcome to our server store! Support us and get awesome in-game items..."
|
||||
rows="3"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
|
||||
></textarea>
|
||||
<p class="text-xs text-neutral-600 mt-1">Brief description shown on the store page</p>
|
||||
</div>
|
||||
<label class="cc-field">
|
||||
<span class="cc-field__label">Description <span class="sc-opt">(optional)</span></span>
|
||||
<textarea
|
||||
v-model="config.description"
|
||||
class="cc-textarea"
|
||||
rows="3"
|
||||
placeholder="Welcome to our server store! Support us and get awesome in-game items…"
|
||||
/>
|
||||
<span class="cc-field__hint">Brief description shown on the store page.</span>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Currency</label>
|
||||
<div class="relative">
|
||||
<DollarSign class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500 pointer-events-none" />
|
||||
<select
|
||||
v-model="config.currency"
|
||||
class="w-full pl-9 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors appearance-none cursor-pointer"
|
||||
>
|
||||
<option v-for="opt in currencyOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-600 mt-1">Currency used for all transactions</p>
|
||||
<Select
|
||||
v-model="config.currency"
|
||||
label="Currency"
|
||||
:options="currencyOptions"
|
||||
hint="Currency used for all transactions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- PayPal configuration -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">PayPal Configuration</h2>
|
||||
<p class="text-xs text-neutral-500 mt-1">
|
||||
Get your API credentials from the
|
||||
<a
|
||||
href="https://developer.paypal.com/dashboard/"
|
||||
target="_blank"
|
||||
class="text-oxide-400 hover:text-oxide-300 underline"
|
||||
>
|
||||
PayPal Developer Dashboard
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">PayPal Client ID *</label>
|
||||
<input
|
||||
v-model="config.paypal_client_id"
|
||||
type="text"
|
||||
<Panel title="PayPal configuration" eyebrow="Payments" subtitle="Get your API credentials from the PayPal Developer Dashboard.">
|
||||
<div class="sc-fields">
|
||||
<Input
|
||||
v-model="paypalClientId"
|
||||
label="PayPal Client ID"
|
||||
placeholder="AXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
:required="true"
|
||||
:mono="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">PayPal Client Secret *</label>
|
||||
<input
|
||||
<Input
|
||||
v-model="paypalSecret"
|
||||
label="PayPal Client Secret"
|
||||
type="password"
|
||||
placeholder="Enter to update (stored encrypted)"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
:mono="true"
|
||||
hint="Stored encrypted. Leave blank to keep existing secret."
|
||||
:required="true"
|
||||
/>
|
||||
<p class="text-xs text-neutral-600 mt-1">
|
||||
Stored encrypted. Leave blank to keep existing secret.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sandbox mode toggle -->
|
||||
<div class="flex items-center justify-between p-4 bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-200">Sandbox Mode</p>
|
||||
<p class="text-xs text-neutral-500 mt-1">
|
||||
Use PayPal sandbox for testing (no real transactions)
|
||||
</p>
|
||||
<!-- Sandbox mode toggle -->
|
||||
<div class="sc-sandbox">
|
||||
<div class="sc-toggle-row">
|
||||
<div class="sc-toggle-row__info">
|
||||
<span class="sc-toggle-row__label">Sandbox mode</span>
|
||||
<span class="sc-toggle-row__hint">Use PayPal sandbox for testing — no real transactions.</span>
|
||||
</div>
|
||||
<Switch v-model="config.sandbox_mode" />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="config.sandbox_mode = !config.sandbox_mode"
|
||||
:class="config.sandbox_mode ? 'bg-yellow-600' : 'bg-green-600'"
|
||||
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
|
||||
|
||||
<Alert
|
||||
v-if="!config.sandbox_mode && config.enabled"
|
||||
tone="danger"
|
||||
title="Production mode active"
|
||||
>
|
||||
<span
|
||||
:class="config.sandbox_mode ? 'translate-x-6' : 'translate-x-1'"
|
||||
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
||||
></span>
|
||||
</button>
|
||||
Real transactions will be processed. Ensure your PayPal credentials are correct.
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<!-- Production warning -->
|
||||
<div
|
||||
v-if="!config.sandbox_mode && config.enabled"
|
||||
class="flex items-start gap-3 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
|
||||
>
|
||||
<AlertTriangle class="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
|
||||
<div class="text-xs text-red-300">
|
||||
<strong>Production mode enabled.</strong> Real transactions will be processed. Ensure your PayPal credentials are correct.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sc-page { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
|
||||
|
||||
.page__head {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
gap: 16px; flex-wrap: wrap; row-gap: 12px;
|
||||
}
|
||||
.page__title {
|
||||
font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
|
||||
color: var(--text-primary); margin-top: 5px;
|
||||
}
|
||||
.page__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 3px; }
|
||||
|
||||
.sc-loading { padding: 20px 0; }
|
||||
|
||||
.sc-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.sc-fields { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
/* Shared toggle row */
|
||||
.sc-toggle-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.sc-toggle-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.sc-toggle-row__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
|
||||
.sc-toggle-row__hint { font-size: var(--text-xs); color: var(--text-tertiary); }
|
||||
|
||||
.sc-sandbox {
|
||||
background: var(--surface-raised); border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default); padding: 14px 16px;
|
||||
}
|
||||
|
||||
.sc-alert { margin-top: 14px; }
|
||||
|
||||
.sc-opt { font-weight: 400; color: var(--text-muted); }
|
||||
|
||||
/* Textarea token style */
|
||||
.cc-textarea {
|
||||
width: 100%; min-height: 80px; padding: 9px 11px;
|
||||
background: var(--surface-inset); border: none; border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default); resize: vertical;
|
||||
font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
|
||||
line-height: var(--leading-normal); outline: none;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
.cc-textarea::placeholder { color: var(--text-muted); }
|
||||
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user