feat: Add 5 Platform Admin views for super-admin dashboard
- AdminDashboard: KPI cards (licenses, users, MRR, servers, signups) + quick links - AdminLicenses: Searchable paginated table with detail panel, CSV export, license generation - AdminSubscriptions: MRR summary cards, per-module breakdown, subscriber table - AdminUsers: Paginated user table with super admin toggle and account disable actions - AdminServers: Filterable server table with connection type badges, status dots, relative heartbeat times Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
116
frontend/src/views/platform-admin/AdminDashboard.vue
Normal file
116
frontend/src/views/platform-admin/AdminDashboard.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Key, KeyRound, Users, DollarSign, Server, UserPlus, ArrowRight, ScrollText, CreditCard, MonitorCog } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
const router = useRouter()
|
||||
|
||||
interface PlatformStats {
|
||||
total_licenses: number
|
||||
active_licenses: number
|
||||
total_users: number
|
||||
module_mrr: number
|
||||
servers_online: number
|
||||
new_signups_this_week: number
|
||||
}
|
||||
|
||||
const stats = ref<PlatformStats | null>(null)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const kpiCards = [
|
||||
{ key: 'total_licenses' as const, label: 'Total Licenses', icon: Key, format: 'number' },
|
||||
{ key: 'active_licenses' as const, label: 'Active Licenses', icon: KeyRound, format: 'number' },
|
||||
{ key: 'total_users' as const, label: 'Total Users', icon: Users, format: 'number' },
|
||||
{ key: 'module_mrr' as const, label: 'Module MRR', icon: DollarSign, format: 'currency' },
|
||||
{ key: 'servers_online' as const, label: 'Servers Online', icon: Server, format: 'number' },
|
||||
{ key: 'new_signups_this_week' as const, label: 'New Signups This Week', icon: UserPlus, format: 'number' },
|
||||
]
|
||||
|
||||
const quickLinks = [
|
||||
{ label: 'Licenses', description: 'Manage license keys and activations', icon: Key, route: '/platform-admin/licenses' },
|
||||
{ label: 'Subscriptions', description: 'View module subscriptions and MRR', icon: CreditCard, route: '/platform-admin/subscriptions' },
|
||||
{ label: 'Users', description: 'Manage platform users and permissions', icon: Users, route: '/platform-admin/users' },
|
||||
{ label: 'Servers', description: 'Monitor connected game servers', icon: MonitorCog, route: '/platform-admin/servers' },
|
||||
]
|
||||
|
||||
function formatValue(value: number, format: string): string {
|
||||
if (format === 'currency') {
|
||||
return `$${value.toFixed(2)}`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
stats.value = await api.get<PlatformStats>('/admin/stats')
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-8 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<ScrollText class="w-6 h-6 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Platform Admin</h1>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 ml-9">Overview of all platform activity and key metrics.</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="card in kpiCards"
|
||||
:key="card.key"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="p-2 rounded-lg bg-oxide-500/10">
|
||||
<component :is="card.icon" class="w-4 h-4 text-oxide-400" />
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400">{{ card.label }}</p>
|
||||
</div>
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading" class="h-8 w-24 bg-neutral-800 rounded animate-pulse" />
|
||||
<!-- Value -->
|
||||
<p v-else class="text-3xl font-bold text-neutral-100">
|
||||
{{ stats ? formatValue(stats[card.key], card.format) : '\u2014' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-neutral-200 mb-4">Quick Links</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<button
|
||||
v-for="link in quickLinks"
|
||||
:key="link.route"
|
||||
@click="router.push(link.route)"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 text-left hover:border-oxide-500/40 hover:bg-neutral-800/50 transition-all group"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="p-2 rounded-lg bg-oxide-500/10">
|
||||
<component :is="link.icon" class="w-4 h-4 text-oxide-400" />
|
||||
</div>
|
||||
<ArrowRight class="w-4 h-4 text-neutral-600 group-hover:text-oxide-400 transition-colors" />
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-neutral-100 mt-3">{{ link.label }}</p>
|
||||
<p class="text-xs text-neutral-500 mt-1">{{ link.description }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
392
frontend/src/views/platform-admin/AdminLicenses.vue
Normal file
392
frontend/src/views/platform-admin/AdminLicenses.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Key, Search, Download, Plus, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
interface License {
|
||||
id: string
|
||||
license_key: string
|
||||
owner_email: string
|
||||
server_name: string
|
||||
status: 'active' | 'suspended' | 'expired' | 'revoked'
|
||||
created_at: string
|
||||
expires_at: string
|
||||
}
|
||||
|
||||
interface LicenseDetail {
|
||||
id: string
|
||||
license_key: string
|
||||
owner_email: string
|
||||
server_name: string
|
||||
status: string
|
||||
created_at: string
|
||||
expires_at: string
|
||||
team_count: number
|
||||
wipe_count: number
|
||||
server_connection: {
|
||||
connection_type: string
|
||||
server_ip: string
|
||||
game_port: number
|
||||
last_heartbeat: string
|
||||
status: string
|
||||
} | null
|
||||
}
|
||||
|
||||
interface LicenseListResponse {
|
||||
licenses: License[]
|
||||
total: number
|
||||
page: number
|
||||
per_page: number
|
||||
}
|
||||
|
||||
const licenses = ref<License[]>([])
|
||||
const isLoading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const statusFilter = ref('all')
|
||||
const page = ref(1)
|
||||
const perPage = 25
|
||||
const total = ref(0)
|
||||
|
||||
const selectedLicenseId = ref<string | null>(null)
|
||||
const selectedDetail = ref<LicenseDetail | null>(null)
|
||||
const isDetailLoading = ref(false)
|
||||
|
||||
const showGenerateForm = ref(false)
|
||||
const generateEmail = ref('')
|
||||
const isGenerating = ref(false)
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage)))
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'suspended', label: 'Suspended' },
|
||||
{ value: 'expired', label: 'Expired' },
|
||||
{ value: 'revoked', label: 'Revoked' },
|
||||
]
|
||||
|
||||
const statusBadgeClass: Record<string, string> = {
|
||||
active: 'bg-green-500/10 text-green-400',
|
||||
suspended: 'bg-yellow-500/10 text-yellow-400',
|
||||
expired: 'bg-neutral-700/50 text-neutral-400',
|
||||
revoked: 'bg-red-500/10 text-red-400',
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
async function fetchLicenses() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: page.value.toString(),
|
||||
per_page: perPage.toString(),
|
||||
})
|
||||
if (searchQuery.value.trim()) params.set('search', searchQuery.value.trim())
|
||||
if (statusFilter.value !== 'all') params.set('status', statusFilter.value)
|
||||
|
||||
const data = await api.get<LicenseListResponse>(`/admin/licenses?${params}`)
|
||||
licenses.value = data.licenses
|
||||
total.value = data.total
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectLicense(id: string) {
|
||||
if (selectedLicenseId.value === id) {
|
||||
selectedLicenseId.value = null
|
||||
selectedDetail.value = null
|
||||
return
|
||||
}
|
||||
selectedLicenseId.value = id
|
||||
isDetailLoading.value = true
|
||||
try {
|
||||
selectedDetail.value = await api.get<LicenseDetail>(`/admin/licenses/${id}`)
|
||||
} catch {
|
||||
selectedDetail.value = null
|
||||
} finally {
|
||||
isDetailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function generateLicense() {
|
||||
if (!generateEmail.value.trim()) return
|
||||
isGenerating.value = true
|
||||
try {
|
||||
await api.post('/admin/licenses', { email: generateEmail.value.trim() })
|
||||
generateEmail.value = ''
|
||||
showGenerateForm.value = false
|
||||
await fetchLicenses()
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
if (!licenses.value.length) return
|
||||
const headers = ['License Key', 'Owner Email', 'Server Name', 'Status', 'Created', 'Expires']
|
||||
const rows = licenses.value.map(l => [
|
||||
l.license_key,
|
||||
l.owner_email,
|
||||
l.server_name,
|
||||
l.status,
|
||||
formatDate(l.created_at),
|
||||
formatDate(l.expires_at),
|
||||
])
|
||||
const csv = [headers, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n')
|
||||
const blob = new Blob([csv], { type: 'text/csv' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `licenses-export-${new Date().toISOString().slice(0, 10)}.csv`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (page.value > 1) page.value--
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (page.value < totalPages.value) page.value++
|
||||
}
|
||||
|
||||
// Reset to page 1 when filters change
|
||||
watch([searchQuery, statusFilter], () => {
|
||||
page.value = 1
|
||||
})
|
||||
|
||||
// Refetch when page, search, or status changes
|
||||
watch([page, searchQuery, statusFilter], () => {
|
||||
fetchLicenses()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchLicenses()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Key class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">License Management</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">{{ total }} licenses total</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="exportCsv"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Download class="w-4 h-4" />
|
||||
Export CSV
|
||||
</button>
|
||||
<button
|
||||
@click="showGenerateForm = !showGenerateForm"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
Generate License
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate License Form -->
|
||||
<div
|
||||
v-if="showGenerateForm"
|
||||
class="bg-neutral-900 border border-oxide-500/30 rounded-lg p-4"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-semibold text-neutral-200">Generate New License</h3>
|
||||
<button @click="showGenerateForm = false" class="text-neutral-500 hover:text-neutral-300">
|
||||
<X class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
v-model="generateEmail"
|
||||
type="email"
|
||||
placeholder="Owner email address..."
|
||||
class="flex-1 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"
|
||||
@keydown.enter="generateLicense"
|
||||
/>
|
||||
<button
|
||||
@click="generateLicense"
|
||||
:disabled="isGenerating || !generateEmail.trim()"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
{{ isGenerating ? 'Generating...' : 'Generate' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search by key, email, or server name..."
|
||||
class="w-full pl-10 pr-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"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
v-model="statusFilter"
|
||||
class="px-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"
|
||||
>
|
||||
<option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<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">License Key</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server Name</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">Created</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="licenses.length === 0 && !isLoading">
|
||||
<td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="searchQuery || statusFilter !== 'all'">No licenses matching your filters.</template>
|
||||
<template v-else>No licenses found.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading licenses...</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="license in licenses"
|
||||
:key="license.id"
|
||||
@click="selectLicense(license.id)"
|
||||
class="hover:bg-neutral-800/50 transition-colors cursor-pointer"
|
||||
:class="{ 'bg-neutral-800/30': selectedLicenseId === license.id }"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm text-neutral-100 font-mono">{{ license.license_key }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ license.owner_email }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ license.server_name }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
|
||||
:class="statusBadgeClass[license.status] || 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
{{ license.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.created_at) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.expires_at) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Detail Panel -->
|
||||
<div
|
||||
v-if="selectedLicenseId"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
|
||||
>
|
||||
<div v-if="isDetailLoading" class="space-y-3">
|
||||
<div class="h-5 w-40 bg-neutral-800 rounded animate-pulse" />
|
||||
<div class="h-4 w-64 bg-neutral-800 rounded animate-pulse" />
|
||||
<div class="h-4 w-48 bg-neutral-800 rounded animate-pulse" />
|
||||
</div>
|
||||
<div v-else-if="selectedDetail">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-neutral-100">License Details</h3>
|
||||
<button @click="selectedLicenseId = null; selectedDetail = null" class="text-neutral-500 hover:text-neutral-300">
|
||||
<X class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-neutral-500">License Key</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono text-xs">{{ selectedDetail.license_key }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Owner</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.owner_email }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Team Members</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.team_count }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Wipe Count</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.wipe_count }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedDetail.server_connection" class="mt-4 pt-4 border-t border-neutral-800">
|
||||
<h4 class="text-sm font-medium text-neutral-300 mb-3">Server Connection</h4>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-neutral-500">Connection Type</span>
|
||||
<p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.connection_type }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Server IP</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.server_ip }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Game Port</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.game_port }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Status</span>
|
||||
<p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.status }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-neutral-500">
|
||||
Page {{ page }} of {{ totalPages }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="prevPage"
|
||||
:disabled="page <= 1"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
@click="nextPage"
|
||||
:disabled="page >= totalPages"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
Next
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
204
frontend/src/views/platform-admin/AdminServers.vue
Normal file
204
frontend/src/views/platform-admin/AdminServers.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Server, Search } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
interface ServerEntry {
|
||||
id: string
|
||||
server_name: string
|
||||
owner_email: string
|
||||
connection_type: 'plugin' | 'companion' | 'amp' | 'pterodactyl' | 'bare_metal'
|
||||
status: 'connected' | 'degraded' | 'offline'
|
||||
server_ip: string
|
||||
game_port: number
|
||||
last_heartbeat: string
|
||||
}
|
||||
|
||||
interface ServerListResponse {
|
||||
servers: ServerEntry[]
|
||||
}
|
||||
|
||||
const servers = ref<ServerEntry[]>([])
|
||||
const isLoading = ref(false)
|
||||
const statusFilter = ref('all')
|
||||
const searchQuery = ref('')
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'connected', label: 'Connected' },
|
||||
{ value: 'degraded', label: 'Degraded' },
|
||||
{ value: 'offline', label: 'Offline' },
|
||||
]
|
||||
|
||||
const connectionBadgeClass: Record<string, string> = {
|
||||
plugin: 'bg-blue-500/10 text-blue-400',
|
||||
companion: 'bg-purple-500/10 text-purple-400',
|
||||
amp: 'bg-cyan-500/10 text-cyan-400',
|
||||
pterodactyl: 'bg-green-500/10 text-green-400',
|
||||
bare_metal: 'bg-orange-500/10 text-orange-400',
|
||||
}
|
||||
|
||||
const statusDotClass: Record<string, string> = {
|
||||
connected: 'bg-green-500',
|
||||
degraded: 'bg-yellow-500',
|
||||
offline: 'bg-red-500',
|
||||
}
|
||||
|
||||
const statusTextClass: Record<string, string> = {
|
||||
connected: 'text-green-400',
|
||||
degraded: 'text-yellow-400',
|
||||
offline: 'text-red-400',
|
||||
}
|
||||
|
||||
const filteredServers = computed(() => {
|
||||
let result = servers.value
|
||||
|
||||
if (statusFilter.value !== 'all') {
|
||||
result = result.filter(s => s.status === statusFilter.value)
|
||||
}
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
result = result.filter(s =>
|
||||
s.server_name.toLowerCase().includes(q) ||
|
||||
s.owner_email.toLowerCase().includes(q) ||
|
||||
s.server_ip.includes(q)
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const seconds = Math.floor(diff / 1000)
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const days = Math.floor(hours / 24)
|
||||
|
||||
if (seconds < 60) return 'Just now'
|
||||
if (minutes < 60) return `${minutes} min ago`
|
||||
if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`
|
||||
return `${days} day${days !== 1 ? 's' : ''} ago`
|
||||
}
|
||||
|
||||
async function fetchServers() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (statusFilter.value !== 'all') params.set('status', statusFilter.value)
|
||||
|
||||
const query = params.toString()
|
||||
const path = query ? `/admin/servers?${query}` : '/admin/servers'
|
||||
const data = await api.get<ServerListResponse>(path)
|
||||
servers.value = data.servers
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(statusFilter, () => {
|
||||
fetchServers()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchServers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Server class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Server Overview</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">
|
||||
{{ filteredServers.length }} server{{ filteredServers.length !== 1 ? 's' : '' }}
|
||||
<template v-if="statusFilter !== 'all'"> ({{ statusFilter }})</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search by server name, email, or IP..."
|
||||
class="w-full pl-10 pr-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"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
v-model="statusFilter"
|
||||
class="px-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"
|
||||
>
|
||||
<option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<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">Server Name</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Connection Type</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">Server IP</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Game Port</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Last Heartbeat</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="filteredServers.length === 0 && !isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="searchQuery">No servers matching "{{ searchQuery }}"</template>
|
||||
<template v-else-if="statusFilter !== 'all'">No {{ statusFilter }} servers found.</template>
|
||||
<template v-else>No servers found.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading servers...</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="srv in filteredServers"
|
||||
:key="srv.id"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm font-medium text-neutral-100">{{ srv.server_name }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ srv.owner_email }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
|
||||
:class="connectionBadgeClass[srv.connection_type] || 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
{{ srv.connection_type.replace('_', ' ') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full" :class="statusDotClass[srv.status] || 'bg-neutral-500'" />
|
||||
<span class="text-sm capitalize" :class="statusTextClass[srv.status] || 'text-neutral-400'">
|
||||
{{ srv.status }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.server_ip }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.game_port }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ relativeTime(srv.last_heartbeat) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
145
frontend/src/views/platform-admin/AdminSubscriptions.vue
Normal file
145
frontend/src/views/platform-admin/AdminSubscriptions.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { CreditCard, Package, DollarSign, Users } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
interface Subscription {
|
||||
owner_email: string
|
||||
module_name: string
|
||||
license_id: string
|
||||
}
|
||||
|
||||
interface SubscriptionResponse {
|
||||
subscriptions: Subscription[]
|
||||
}
|
||||
|
||||
const subscriptions = ref<Subscription[]>([])
|
||||
const isLoading = ref(false)
|
||||
|
||||
const MODULE_PRICE = 9.99
|
||||
|
||||
const totalSubscribers = computed(() => {
|
||||
const emails = new Set(subscriptions.value.map(s => s.owner_email))
|
||||
return emails.size
|
||||
})
|
||||
|
||||
const totalMrr = computed(() => {
|
||||
return subscriptions.value.length * MODULE_PRICE
|
||||
})
|
||||
|
||||
const moduleBreakdown = computed(() => {
|
||||
const counts: Record<string, number> = {}
|
||||
for (const sub of subscriptions.value) {
|
||||
counts[sub.module_name] = (counts[sub.module_name] || 0) + 1
|
||||
}
|
||||
return Object.entries(counts)
|
||||
.map(([name, count]) => ({ name, count }))
|
||||
.sort((a, b) => b.count - a.count)
|
||||
})
|
||||
|
||||
async function fetchSubscriptions() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await api.get<SubscriptionResponse>('/admin/subscriptions')
|
||||
subscriptions.value = data.subscriptions
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchSubscriptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<CreditCard class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Subscriptions</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">Module subscription overview and subscriber details.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- Total Subscribers -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="p-2 rounded-lg bg-oxide-500/10">
|
||||
<Users class="w-4 h-4 text-oxide-400" />
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400">Total Subscribers</p>
|
||||
</div>
|
||||
<div v-if="isLoading" class="h-8 w-16 bg-neutral-800 rounded animate-pulse" />
|
||||
<p v-else class="text-3xl font-bold text-neutral-100">{{ totalSubscribers.toLocaleString() }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Total MRR -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="p-2 rounded-lg bg-green-500/10">
|
||||
<DollarSign class="w-4 h-4 text-green-400" />
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400">Total MRR</p>
|
||||
</div>
|
||||
<div v-if="isLoading" class="h-8 w-24 bg-neutral-800 rounded animate-pulse" />
|
||||
<p v-else class="text-3xl font-bold text-neutral-100">${{ totalMrr.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Per-Module Cards -->
|
||||
<div
|
||||
v-for="mod in moduleBreakdown"
|
||||
:key="mod.name"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="p-2 rounded-lg bg-oxide-500/10">
|
||||
<Package class="w-4 h-4 text-oxide-400" />
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 truncate">{{ mod.name }}</p>
|
||||
</div>
|
||||
<p class="text-3xl font-bold text-neutral-100">{{ mod.count }}</p>
|
||||
<p class="text-xs text-neutral-500 mt-1">subscribers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<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">Owner Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Module Name</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">License ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="subscriptions.length === 0 && !isLoading">
|
||||
<td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
No subscriptions found.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading subscriptions...</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="(sub, idx) in subscriptions"
|
||||
:key="`${sub.license_id}-${sub.module_name}-${idx}`"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm text-neutral-100">{{ sub.owner_email }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ sub.module_name }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ sub.license_id }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
246
frontend/src/views/platform-admin/AdminUsers.vue
Normal file
246
frontend/src/views/platform-admin/AdminUsers.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Users, Search, ShieldCheck, ShieldOff, UserX, ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
interface PlatformUser {
|
||||
id: string
|
||||
email: string
|
||||
username: string
|
||||
is_super_admin: boolean
|
||||
license_count: number
|
||||
created_at: string
|
||||
last_login: string | null
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
interface UserListResponse {
|
||||
users: PlatformUser[]
|
||||
total: number
|
||||
page: number
|
||||
per_page: number
|
||||
}
|
||||
|
||||
const users = ref<PlatformUser[]>([])
|
||||
const isLoading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const page = ref(1)
|
||||
const perPage = 25
|
||||
const total = ref(0)
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage)))
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
function formatLastLogin(iso: string | null): string {
|
||||
if (!iso) return 'Never'
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const days = Math.floor(hours / 24)
|
||||
if (minutes < 1) return 'Just now'
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
if (days < 7) return `${days}d ago`
|
||||
return formatDate(iso)
|
||||
}
|
||||
|
||||
async function fetchUsers() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: page.value.toString(),
|
||||
per_page: perPage.toString(),
|
||||
})
|
||||
if (searchQuery.value.trim()) params.set('search', searchQuery.value.trim())
|
||||
|
||||
const data = await api.get<UserListResponse>(`/admin/users?${params}`)
|
||||
users.value = data.users
|
||||
total.value = data.total
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleSuperAdmin(user: PlatformUser) {
|
||||
const action = user.is_super_admin ? 'remove super admin from' : 'grant super admin to'
|
||||
if (!confirm(`Are you sure you want to ${action} ${user.email}?`)) return
|
||||
try {
|
||||
await api.request(`/admin/users/${user.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { is_super_admin: !user.is_super_admin },
|
||||
})
|
||||
user.is_super_admin = !user.is_super_admin
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
async function disableAccount(user: PlatformUser) {
|
||||
if (!confirm(`Are you sure you want to disable the account for ${user.email}? This cannot be undone from this panel.`)) return
|
||||
try {
|
||||
await api.request(`/admin/users/${user.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { disabled: true },
|
||||
})
|
||||
user.disabled = true
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (page.value > 1) page.value--
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
if (page.value < totalPages.value) page.value++
|
||||
}
|
||||
|
||||
watch(searchQuery, () => {
|
||||
page.value = 1
|
||||
})
|
||||
|
||||
watch([page, searchQuery], () => {
|
||||
fetchUsers()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchUsers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Users class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">User Management</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">{{ total }} registered users</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search by email or username..."
|
||||
class="w-full pl-10 pr-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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<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">Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Username</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Super Admin</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Licenses</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Created</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Last Login</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="users.length === 0 && !isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="searchQuery">No users matching "{{ searchQuery }}"</template>
|
||||
<template v-else>No users found.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading users...</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
:class="{ 'opacity-50': user.disabled }"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm text-neutral-100">{{ user.email }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ user.username }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
v-if="user.is_super_admin"
|
||||
class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full bg-oxide-500/10 text-oxide-400"
|
||||
>
|
||||
<ShieldCheck class="w-3 h-3" />
|
||||
Super Admin
|
||||
</span>
|
||||
<span v-else class="text-xs text-neutral-600">—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ user.license_count }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(user.created_at) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatLastLogin(user.last_login) }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button
|
||||
@click="toggleSuperAdmin(user)"
|
||||
:disabled="user.disabled"
|
||||
class="p-1.5 rounded transition-colors"
|
||||
:class="user.is_super_admin
|
||||
? 'text-oxide-400 hover:text-oxide-300 hover:bg-oxide-500/10'
|
||||
: 'text-neutral-500 hover:text-neutral-300 hover:bg-neutral-700'"
|
||||
:title="user.is_super_admin ? 'Remove Super Admin' : 'Grant Super Admin'"
|
||||
>
|
||||
<ShieldCheck v-if="!user.is_super_admin" class="w-4 h-4" />
|
||||
<ShieldOff v-else class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="disableAccount(user)"
|
||||
:disabled="user.disabled"
|
||||
class="p-1.5 text-neutral-500 hover:text-red-400 hover:bg-red-500/10 disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors"
|
||||
title="Disable Account"
|
||||
>
|
||||
<UserX class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-neutral-500">
|
||||
Page {{ page }} of {{ totalPages }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="prevPage"
|
||||
:disabled="page <= 1"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
@click="nextPage"
|
||||
:disabled="page >= totalPages"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
Next
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user