380 lines
16 KiB
Vue
380 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-2xl font-bold text-white">{{ $t('providers.title') }}</h1>
|
|
<p class="text-slate-400 mt-1">{{ $t('providers.subtitle') }}</p>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('providers.stats_total') }}</p>
|
|
<p class="text-2xl font-bold text-white mt-1">{{ stats.total }}</p>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-amber-500/30 p-4">
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('providers.stats_pending') }}</p>
|
|
<p class="text-2xl font-bold text-amber-400 mt-1">{{ stats.pending }}</p>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-emerald-500/30 p-4">
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('providers.stats_approved') }}</p>
|
|
<p class="text-2xl font-bold text-emerald-400 mt-1">{{ stats.approved }}</p>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-rose-500/30 p-4">
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('providers.stats_rejected') }}</p>
|
|
<p class="text-2xl font-bold text-rose-400 mt-1">{{ stats.rejected }}</p>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-purple-500/30 p-4">
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('providers.stats_flagged') }}</p>
|
|
<p class="text-2xl font-bold text-purple-400 mt-1">{{ stats.flagged }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex items-center justify-center py-20">
|
|
<div class="text-slate-400 flex items-center gap-3">
|
|
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span>{{ $t('providers.loading') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
|
|
<p class="text-rose-400">{{ $t('providers.error') }}</p>
|
|
<button @click="fetchProviders" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">{{ $t('providers.retry') }}</button>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<!-- Filters -->
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4 mb-6">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<!-- Search -->
|
|
<div class="flex-1 min-w-[200px]">
|
|
<input
|
|
v-model="filters.search"
|
|
type="text"
|
|
:placeholder="$t('providers.search_placeholder')"
|
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
|
@input="onSearchInput"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Status Filter -->
|
|
<select
|
|
v-model="filters.status"
|
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
|
@change="fetchProviders"
|
|
>
|
|
<option value="">{{ $t('providers.filter_all_status') }}</option>
|
|
<option value="pending">{{ $t('providers.filter_pending') }}</option>
|
|
<option value="approved">{{ $t('providers.filter_approved') }}</option>
|
|
<option value="rejected">{{ $t('providers.filter_rejected') }}</option>
|
|
<option value="flagged">{{ $t('providers.filter_flagged') }}</option>
|
|
</select>
|
|
|
|
<!-- Source Filter -->
|
|
<select
|
|
v-model="filters.source"
|
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
|
@change="fetchProviders"
|
|
>
|
|
<option value="">{{ $t('providers.filter_all_sources') }}</option>
|
|
<option value="manual">{{ $t('providers.source_manual') }}</option>
|
|
<option value="ocr">{{ $t('providers.source_ocr') }}</option>
|
|
<option value="import">{{ $t('providers.source_import') }}</option>
|
|
<option value="bot">{{ $t('providers.source_bot') }}</option>
|
|
<option value="verified_org">{{ $t('providers.source_verified_org') }}</option>
|
|
</select>
|
|
|
|
<!-- Sort -->
|
|
<select
|
|
v-model="filters.sort_by"
|
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
|
@change="fetchProviders"
|
|
>
|
|
<option value="created_at">{{ $t('providers.sort_created_at') }}</option>
|
|
<option value="name">{{ $t('providers.sort_name') }}</option>
|
|
<option value="validation_score">{{ $t('providers.sort_validation_score') }}</option>
|
|
</select>
|
|
|
|
<button
|
|
@click="filters.sort_order = filters.sort_order === 'asc' ? 'desc' : 'asc'; fetchProviders()"
|
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white hover:bg-slate-600 transition text-sm flex items-center gap-1"
|
|
>
|
|
<svg class="w-4 h-4" :class="filters.sort_order === 'asc' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
{{ filters.sort_order === 'asc' ? $t('common.ascending') : $t('common.descending') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Providers Table -->
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-700">
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_id') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_name') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_address') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_status') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_source') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_validation') }}</th>
|
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_created') }}</th>
|
|
<th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ $t('providers.col_actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700/50">
|
|
<tr v-for="provider in providers" :key="provider.id" class="hover:bg-slate-700/30 transition">
|
|
<td class="px-6 py-4 text-sm text-slate-400">{{ provider.id }}</td>
|
|
<td class="px-6 py-4">
|
|
<NuxtLink :to="`/providers/${provider.id}`" class="text-sm font-medium text-indigo-400 hover:text-indigo-300 transition">
|
|
{{ provider.name }}
|
|
</NuxtLink>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-slate-300 max-w-[200px] truncate">{{ provider.address_detail?.full_address_text || [provider.address_detail?.zip, provider.address_detail?.city, provider.address_detail?.street_name].filter(Boolean).join(' ') || '—' }}</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="statusClass(provider.status)">
|
|
{{ statusLabel(provider.status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<code class="text-xs font-mono text-slate-400 bg-slate-700/50 px-2 py-0.5 rounded">{{ provider.source }}</code>
|
|
<span v-if="provider.source_table" class="text-[10px] font-mono text-slate-500 bg-slate-700/30 px-1.5 py-0.5 rounded">{{ provider.source_table }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-16 h-1.5 bg-slate-700 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all"
|
|
:class="provider.validation_score >= 50 ? 'bg-emerald-500' : provider.validation_score >= 20 ? 'bg-amber-500' : 'bg-slate-500'"
|
|
:style="{ width: Math.min(provider.validation_score, 100) + '%' }"
|
|
/>
|
|
</div>
|
|
<span class="text-xs text-slate-400">{{ provider.validation_score }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-slate-400">{{ formatDate(provider.created_at) }}</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<NuxtLink
|
|
:to="`/providers/${provider.id}`"
|
|
class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition"
|
|
:title="$t('providers.view_details')"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</NuxtLink>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="providers.length === 0">
|
|
<td colspan="8" class="px-6 py-12 text-center text-sm text-slate-500">
|
|
{{ $t('providers.no_providers') }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="flex items-center justify-between mt-6">
|
|
<p class="text-sm text-slate-400">
|
|
{{ $t('providers.results_count', { count: providers.length, total: stats.total }) }}
|
|
</p>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
:disabled="filters.skip <= 0"
|
|
@click="filters.skip = Math.max(0, filters.skip - filters.limit); fetchProviders()"
|
|
class="px-3 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-600 transition text-sm"
|
|
>
|
|
{{ $t('common.prev') }}
|
|
</button>
|
|
<span class="text-sm text-slate-400">
|
|
{{ $t('providers.page', { page: Math.floor(filters.skip / filters.limit) + 1 }) }}
|
|
</span>
|
|
<button
|
|
:disabled="providers.length < filters.limit"
|
|
@click="filters.skip += filters.limit; fetchProviders()"
|
|
class="px-3 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-600 transition text-sm"
|
|
>
|
|
{{ $t('common.next') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Success Toast -->
|
|
<div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{{ toast }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const { formatDate } = useFormatter()
|
|
|
|
interface ProviderListItem {
|
|
id: number
|
|
name: string
|
|
address: string | null
|
|
city: string | null
|
|
address_detail?: {
|
|
zip: string | null
|
|
city: string | null
|
|
street_name: string | null
|
|
street_type: string | null
|
|
house_number: string | null
|
|
full_address_text: string | null
|
|
} | null
|
|
category: string | null
|
|
status: string
|
|
source: string
|
|
source_table?: string
|
|
validation_score: number
|
|
added_by_user_id: number | null
|
|
created_at: string | null
|
|
}
|
|
|
|
interface ProviderStats {
|
|
total: number
|
|
pending: number
|
|
approved: number
|
|
rejected: number
|
|
flagged: number
|
|
total_validations: number
|
|
staging_pending?: number
|
|
}
|
|
|
|
const loading = ref(true)
|
|
const error = ref(false)
|
|
const providers = ref<ProviderListItem[]>([])
|
|
const stats = ref<ProviderStats>({
|
|
total: 0,
|
|
pending: 0,
|
|
approved: 0,
|
|
rejected: 0,
|
|
flagged: 0,
|
|
total_validations: 0,
|
|
staging_pending: 0,
|
|
})
|
|
const toast = ref('')
|
|
let searchTimeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
const filters = reactive({
|
|
search: '',
|
|
status: '',
|
|
source: '',
|
|
sort_by: 'created_at',
|
|
sort_order: 'desc',
|
|
skip: 0,
|
|
limit: 50,
|
|
})
|
|
|
|
function getHeaders(): Record<string, string> {
|
|
const tokenCookie = useCookie('access_token')
|
|
const token = tokenCookie.value
|
|
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
|
|
}
|
|
|
|
function showToast(msg: string) {
|
|
toast.value = msg
|
|
setTimeout(() => { toast.value = '' }, 3000)
|
|
}
|
|
|
|
function statusClass(status: string): string {
|
|
const map: Record<string, string> = {
|
|
pending: 'bg-amber-500/10 text-amber-400',
|
|
approved: 'bg-emerald-500/10 text-emerald-400',
|
|
rejected: 'bg-rose-500/10 text-rose-400',
|
|
flagged: 'bg-purple-500/10 text-purple-400',
|
|
}
|
|
return map[status] || 'bg-slate-500/10 text-slate-400'
|
|
}
|
|
|
|
function statusLabel(status: string): string {
|
|
const map: Record<string, string> = {
|
|
pending: t('providers.status_pending'),
|
|
approved: t('providers.status_approved'),
|
|
rejected: t('providers.status_rejected'),
|
|
flagged: t('providers.status_flagged'),
|
|
}
|
|
return map[status] || status
|
|
}
|
|
|
|
function onSearchInput() {
|
|
if (searchTimeout) clearTimeout(searchTimeout)
|
|
searchTimeout = setTimeout(() => {
|
|
filters.skip = 0
|
|
fetchProviders()
|
|
}, 400)
|
|
}
|
|
|
|
async function fetchStats() {
|
|
try {
|
|
const data = await $fetch<ProviderStats>('/api/v1/admin/providers/stats', { headers: getHeaders() })
|
|
stats.value = data
|
|
} catch (e) {
|
|
console.error('Failed to fetch provider stats:', e)
|
|
}
|
|
}
|
|
|
|
async function fetchProviders() {
|
|
loading.value = true
|
|
error.value = false
|
|
try {
|
|
const params = new URLSearchParams()
|
|
params.append('skip', String(filters.skip))
|
|
params.append('limit', String(filters.limit))
|
|
params.append('sort_by', filters.sort_by)
|
|
params.append('sort_order', filters.sort_order)
|
|
if (filters.status) params.append('status', filters.status)
|
|
if (filters.source) params.append('source', filters.source)
|
|
if (filters.search) params.append('search', filters.search)
|
|
|
|
const data = await $fetch<ProviderListItem[]>(`/api/v1/admin/providers?${params.toString()}`, { headers: getHeaders() })
|
|
providers.value = data
|
|
} catch (e) {
|
|
console.error('Failed to fetch providers:', e)
|
|
error.value = true
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchStats()
|
|
fetchProviders()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(1rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|