630 lines
26 KiB
Vue
630 lines
26 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-2xl font-bold text-white">{{ $t('garages.title') }}</h1>
|
|
<p class="text-slate-400 mt-1">{{ $t('garages.subtitle') }}</p>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex items-center justify-center py-20">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<svg class="w-8 h-8 text-indigo-400 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
<p class="text-slate-400 text-sm">{{ $t('garages.loading') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="flex flex-col items-center justify-center py-20 text-center">
|
|
<svg class="w-12 h-12 text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
<p class="text-red-400 text-sm mb-2">{{ error }}</p>
|
|
<button @click="fetchGarages" class="px-4 py-2 text-sm bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 rounded-lg transition">
|
|
{{ $t('garages.retry') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<template v-else>
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('garages.total_garages') }}</p>
|
|
<p class="text-2xl font-bold text-white">{{ garages.length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 rounded-lg bg-emerald-500/10 text-emerald-400">
|
|
<svg class="w-5 h-5" 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>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('garages.active_garages') }}</p>
|
|
<p class="text-2xl font-bold text-emerald-400">{{ activeCount }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 rounded-lg bg-amber-500/10 text-amber-400">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('garages.premium_garages') }}</p>
|
|
<p class="text-2xl font-bold text-amber-400">{{ premiumCount }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 rounded-lg bg-purple-500/10 text-purple-400">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-slate-400 uppercase tracking-wider">{{ $t('garages.enterprise_garages') }}</p>
|
|
<p class="text-2xl font-bold text-purple-400">{{ enterpriseCount }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search & Filter Bar -->
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
|
|
<div class="relative flex-1 max-w-md">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
:placeholder="$t('garages.search_placeholder')"
|
|
class="w-full pl-10 pr-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<select
|
|
v-model="filterTier"
|
|
class="px-3 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-sm text-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition"
|
|
>
|
|
<option value="all">{{ $t('garages.all_tiers') }}</option>
|
|
<option value="free">Free</option>
|
|
<option value="premium">Premium</option>
|
|
<option value="enterprise">Enterprise</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<div class="bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-slate-700 bg-slate-800/80">
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">ID</th>
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $t('garages.company_name') }}</th>
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $t('garages.status') }}</th>
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $t('garages.current_package') }}</th>
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $t('garages.expiration_date') }}</th>
|
|
<th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $t('garages.actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="garage in filteredGarages"
|
|
:key="garage.id"
|
|
class="border-b border-slate-700/50 hover:bg-slate-700/30 transition"
|
|
>
|
|
<!-- ID -->
|
|
<td class="py-3.5 px-4 text-slate-400 font-mono text-xs">{{ garage.id }}</td>
|
|
|
|
<!-- Company Name -->
|
|
<td class="py-3.5 px-4">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold text-white"
|
|
:class="getInitialsColor(garage.full_name)"
|
|
>
|
|
{{ getInitials(garage.full_name) }}
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-white">{{ garage.full_name }}</p>
|
|
<p class="text-xs text-slate-500">{{ garage.city || '—' }} · {{ garage.member_count }} {{ $t('garages.members') }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Status -->
|
|
<td class="py-3.5 px-4">
|
|
<span
|
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
:class="statusBadgeClass(garage.status)"
|
|
>
|
|
<span
|
|
class="w-1.5 h-1.5 rounded-full mr-1.5"
|
|
:class="statusDotClass(garage.status)"
|
|
></span>
|
|
{{ statusLabel(garage.status) }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Current Package -->
|
|
<td class="py-3.5 px-4">
|
|
<span
|
|
class="px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
:class="tierBadgeClass(garage.subscription_tier_name)"
|
|
>
|
|
{{ garage.subscription_tier_name }}
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Expiration Date -->
|
|
<td class="py-3.5 px-4">
|
|
<span v-if="garage.subscription_expires_at" class="text-slate-300 text-xs">
|
|
{{ formatDate(garage.subscription_expires_at) }}
|
|
</span>
|
|
<span v-else class="text-slate-500 text-xs">—</span>
|
|
</td>
|
|
|
|
<!-- Actions -->
|
|
<td class="py-3.5 px-4">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
@click="openSubscriptionModal(garage)"
|
|
class="px-3 py-1.5 text-xs font-medium bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 rounded-lg transition"
|
|
>
|
|
{{ $t('garages.manage_subscription') }}
|
|
</button>
|
|
<button
|
|
@click="toggleStatus(garage)"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-lg transition"
|
|
:class="garage.is_active
|
|
? 'bg-red-500/10 text-red-300 hover:bg-red-500/20'
|
|
: 'bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20'"
|
|
>
|
|
{{ garage.is_active ? $t('garages.deactivate') : $t('garages.activate') }}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div
|
|
v-if="filteredGarages.length === 0 && !loading"
|
|
class="flex flex-col items-center justify-center py-16 text-center"
|
|
>
|
|
<svg class="w-12 h-12 text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<p class="text-slate-400 text-sm">{{ $t('garages.no_results') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ================================================================ -->
|
|
<!-- Subscription Management Modal -->
|
|
<!-- ================================================================ -->
|
|
<div
|
|
v-if="showSubscriptionModal"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
|
@click.self="closeSubscriptionModal"
|
|
>
|
|
<div class="bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
|
|
<!-- Modal Header -->
|
|
<div class="px-6 py-4 border-b border-slate-700 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white">{{ $t('garages.manage_subscription') }}</h3>
|
|
<p class="text-sm text-slate-400 mt-0.5">{{ selectedGarage?.full_name }}</p>
|
|
</div>
|
|
<button @click="closeSubscriptionModal" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="px-6 py-5 space-y-5">
|
|
<!-- Current Subscription Info -->
|
|
<div class="bg-slate-900/50 rounded-xl p-4 border border-slate-700/50">
|
|
<p class="text-xs text-slate-500 uppercase tracking-wider mb-1">{{ $t('garages.current_package') }}</p>
|
|
<p class="text-sm font-medium text-white">
|
|
{{ selectedGarage?.subscription_tier_name || $t('garages.free_fallback') }}
|
|
</p>
|
|
<p v-if="selectedGarage?.subscription_expires_at" class="text-xs text-slate-400 mt-1">
|
|
{{ $t('garages.expires') }}: {{ formatDate(selectedGarage.subscription_expires_at) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tier Selection -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">{{ $t('garages.select_package') }}</label>
|
|
<select
|
|
v-model="selectedTierId"
|
|
class="w-full px-3 py-2.5 bg-slate-900 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition"
|
|
>
|
|
<option value="" disabled>{{ $t('garages.select_package_placeholder') }}</option>
|
|
<option
|
|
v-for="tier in availableTiers"
|
|
:key="tier.id"
|
|
:value="tier.id"
|
|
>
|
|
{{ tier.name }} (Level {{ tier.tier_level }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Custom Expiration Date -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">
|
|
{{ $t('garages.custom_expiration') }}
|
|
<span class="text-xs text-slate-500 ml-1">({{ $t('garages.optional') }})</span>
|
|
</label>
|
|
<input
|
|
v-model="customExpiresAt"
|
|
type="datetime-local"
|
|
class="w-full px-3 py-2.5 bg-slate-900 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition"
|
|
/>
|
|
<p class="text-xs text-slate-500 mt-1.5">{{ $t('garages.custom_expiration_hint') }}</p>
|
|
</div>
|
|
|
|
<!-- Save Error -->
|
|
<div
|
|
v-if="saveError"
|
|
class="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-3"
|
|
>
|
|
<p class="text-sm text-red-400">{{ saveError }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="px-6 py-4 border-t border-slate-700 flex items-center justify-end gap-3">
|
|
<button
|
|
@click="closeSubscriptionModal"
|
|
class="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition"
|
|
>
|
|
{{ $t('garages.cancel') }}
|
|
</button>
|
|
<button
|
|
@click="saveSubscription"
|
|
:disabled="saving || !selectedTierId"
|
|
class="px-5 py-2 text-sm font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:class="saving
|
|
? 'bg-indigo-600/50 text-indigo-200 cursor-wait'
|
|
: 'bg-indigo-600 text-white hover:bg-indigo-500'"
|
|
>
|
|
<span v-if="saving" class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
{{ $t('garages.saving') }}
|
|
</span>
|
|
<span v-else>{{ $t('garages.save') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Notification -->
|
|
<div
|
|
v-if="saveNotification"
|
|
class="fixed bottom-6 right-6 px-5 py-3 rounded-xl shadow-xl text-sm font-medium z-50"
|
|
:class="saveNotification.type === 'success'
|
|
? 'bg-emerald-600 text-white'
|
|
: 'bg-red-600 text-white'"
|
|
>
|
|
{{ saveNotification.message }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
// ── Types ──────────────────────────────────────────────────────────
|
|
|
|
interface SubscriptionInfo {
|
|
id: number
|
|
org_id: number
|
|
tier_id: number
|
|
tier_name: string
|
|
valid_from: string | null
|
|
valid_until: string | null
|
|
is_active: boolean
|
|
extra_allowances: Record<string, unknown>
|
|
}
|
|
|
|
interface Garage {
|
|
id: number
|
|
name: string
|
|
full_name: string
|
|
display_name: string | null
|
|
email: string | null
|
|
status: string
|
|
is_active: boolean
|
|
is_verified: boolean
|
|
is_deleted: boolean
|
|
org_type: string
|
|
city: string | null
|
|
region: string | null
|
|
segment: string | null
|
|
member_count: number
|
|
created_at: string | null
|
|
subscription: SubscriptionInfo | null
|
|
subscription_tier_name: string
|
|
subscription_expires_at: string | null
|
|
}
|
|
|
|
interface Tier {
|
|
id: number
|
|
name: string
|
|
tier_level: number
|
|
rules: Record<string, unknown>
|
|
}
|
|
|
|
// ── State ──────────────────────────────────────────────────────────
|
|
|
|
const loading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
const garages = ref<Garage[]>([])
|
|
const availableTiers = ref<Tier[]>([])
|
|
const searchQuery = ref('')
|
|
const filterTier = ref('all')
|
|
|
|
// Modal state
|
|
const showSubscriptionModal = ref(false)
|
|
const selectedGarage = ref<Garage | null>(null)
|
|
const selectedTierId = ref<number | ''>('')
|
|
const customExpiresAt = ref<string>('')
|
|
const saving = ref(false)
|
|
const saveError = ref<string | null>(null)
|
|
|
|
// Notification
|
|
const saveNotification = ref<{ type: 'success' | 'error'; message: string } | null>(null)
|
|
|
|
// ── Computed ───────────────────────────────────────────────────────
|
|
|
|
const activeCount = computed(() => garages.value.filter(g => g.is_active).length)
|
|
const premiumCount = computed(() => {
|
|
return garages.value.filter(g => {
|
|
const name = g.subscription_tier_name.toLowerCase()
|
|
return name.includes('premium') || name.includes('pro')
|
|
}).length
|
|
})
|
|
const enterpriseCount = computed(() => {
|
|
return garages.value.filter(g => {
|
|
const name = g.subscription_tier_name.toLowerCase()
|
|
return name.includes('enterprise') || name.includes('vip') || name.includes('corp')
|
|
}).length
|
|
})
|
|
|
|
const filteredGarages = computed(() => {
|
|
return garages.value.filter(g => {
|
|
// Search filter
|
|
if (searchQuery.value) {
|
|
const q = searchQuery.value.toLowerCase()
|
|
const matchesSearch =
|
|
g.full_name.toLowerCase().includes(q) ||
|
|
g.name.toLowerCase().includes(q) ||
|
|
(g.city && g.city.toLowerCase().includes(q))
|
|
if (!matchesSearch) return false
|
|
}
|
|
// Tier filter
|
|
if (filterTier.value !== 'all') {
|
|
const name = g.subscription_tier_name.toLowerCase()
|
|
if (filterTier.value === 'free' && !name.includes('free') && !name.includes('fallback')) return false
|
|
if (filterTier.value === 'premium' && !name.includes('premium') && !name.includes('pro')) return false
|
|
if (filterTier.value === 'enterprise' && !name.includes('enterprise') && !name.includes('vip') && !name.includes('corp')) return false
|
|
}
|
|
return true
|
|
})
|
|
})
|
|
|
|
// ── Auth Helper ────────────────────────────────────────────────────
|
|
|
|
function getAuthHeaders() {
|
|
const tokenCookie = useCookie('access_token')
|
|
const token = tokenCookie.value
|
|
return token ? { Authorization: `Bearer ${token}` } : {}
|
|
}
|
|
|
|
// ── Data Fetching ──────────────────────────────────────────────────
|
|
|
|
async function fetchGarages() {
|
|
loading.value = true
|
|
error.value = null
|
|
try {
|
|
const response = await $fetch<{ total: number; skip: number; limit: number; garages: Garage[] }>('/api/v1/admin/organizations', {
|
|
params: { limit: 200 },
|
|
headers: getAuthHeaders(),
|
|
})
|
|
garages.value = response.garages
|
|
} catch (err: any) {
|
|
console.error('[Garages] Failed to fetch garages:', err)
|
|
error.value = err?.data?.detail || err?.message || 'Failed to load garages'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function fetchTiers() {
|
|
try {
|
|
const response = await $fetch<{ total: number; tiers: Tier[] }>('/api/v1/admin/packages', {
|
|
params: { include_hidden: true, limit: 100 },
|
|
headers: getAuthHeaders(),
|
|
})
|
|
availableTiers.value = response.tiers
|
|
} catch (err: any) {
|
|
console.error('[Garages] Failed to fetch tiers:', err)
|
|
}
|
|
}
|
|
|
|
// ── Subscription Modal ─────────────────────────────────────────────
|
|
|
|
function openSubscriptionModal(garage: Garage) {
|
|
selectedGarage.value = garage
|
|
selectedTierId.value = garage.subscription?.tier_id || ''
|
|
customExpiresAt.value = ''
|
|
saveError.value = null
|
|
showSubscriptionModal.value = true
|
|
}
|
|
|
|
function closeSubscriptionModal() {
|
|
showSubscriptionModal.value = false
|
|
selectedGarage.value = null
|
|
selectedTierId.value = ''
|
|
customExpiresAt.value = ''
|
|
saveError.value = null
|
|
}
|
|
|
|
async function saveSubscription() {
|
|
if (!selectedGarage.value || !selectedTierId.value) return
|
|
|
|
saving.value = true
|
|
saveError.value = null
|
|
|
|
try {
|
|
const payload: Record<string, unknown> = {
|
|
tier_id: selectedTierId.value,
|
|
}
|
|
|
|
// If custom expiration date is set, include it
|
|
if (customExpiresAt.value) {
|
|
payload.expires_at = new Date(customExpiresAt.value).toISOString()
|
|
}
|
|
|
|
await $fetch(`/api/v1/admin/organizations/${selectedGarage.value.id}/subscription`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
...getAuthHeaders(),
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: payload,
|
|
})
|
|
|
|
showNotification('success', `"${selectedGarage.value.full_name}" ${useNuxtApp().$i18n.t('garages.subscription_updated')}`)
|
|
closeSubscriptionModal()
|
|
|
|
// Refresh the list
|
|
await fetchGarages()
|
|
} catch (err: any) {
|
|
console.error('[Garages] Failed to save subscription:', err)
|
|
saveError.value = err?.data?.detail || err?.message || 'Failed to save subscription'
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
// ── Status Toggle ──────────────────────────────────────────────────
|
|
|
|
async function toggleStatus(garage: Garage) {
|
|
// This would call a PATCH endpoint to toggle is_active
|
|
// For now, we just show a notification that this is not yet implemented
|
|
showNotification('error', `Status toggle for "${garage.full_name}" not yet implemented via API`)
|
|
}
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────
|
|
|
|
function getInitials(name: string): string {
|
|
return name
|
|
.split(' ')
|
|
.map(w => w.charAt(0))
|
|
.join('')
|
|
.toUpperCase()
|
|
.slice(0, 2)
|
|
}
|
|
|
|
function getInitialsColor(name: string): string {
|
|
const colors = [
|
|
'bg-amber-600', 'bg-purple-600', 'bg-slate-600',
|
|
'bg-indigo-600', 'bg-emerald-600', 'bg-rose-600',
|
|
'bg-cyan-600', 'bg-orange-600', 'bg-teal-600',
|
|
]
|
|
let hash = 0
|
|
for (let i = 0; i < name.length; i++) {
|
|
hash = name.charCodeAt(i) + ((hash << 5) - hash)
|
|
}
|
|
return colors[Math.abs(hash) % colors.length]
|
|
}
|
|
|
|
function statusBadgeClass(status: string): string {
|
|
if (status === 'active') return 'bg-emerald-500/10 text-emerald-400'
|
|
if (status === 'suspended') return 'bg-red-500/10 text-red-400'
|
|
if (status === 'pending_verification') return 'bg-amber-500/10 text-amber-400'
|
|
return 'bg-slate-500/10 text-slate-400'
|
|
}
|
|
|
|
function statusDotClass(status: string): string {
|
|
if (status === 'active') return 'bg-emerald-400'
|
|
if (status === 'suspended') return 'bg-red-400'
|
|
if (status === 'pending_verification') return 'bg-amber-400'
|
|
return 'bg-slate-400'
|
|
}
|
|
|
|
function statusLabel(status: string): string {
|
|
if (status === 'active') return 'Aktív'
|
|
if (status === 'suspended') return 'Felfüggesztve'
|
|
if (status === 'pending_verification') return 'Függőben'
|
|
return 'Inaktív'
|
|
}
|
|
|
|
function tierBadgeClass(tierName: string): string {
|
|
const name = tierName.toLowerCase()
|
|
if (name.includes('enterprise') || name.includes('vip') || name.includes('corp')) return 'bg-purple-500/20 text-purple-300'
|
|
if (name.includes('premium') || name.includes('pro')) return 'bg-amber-500/20 text-amber-300'
|
|
return 'bg-slate-500/20 text-slate-300'
|
|
}
|
|
|
|
function formatDate(dateStr: string): string {
|
|
try {
|
|
const d = new Date(dateStr)
|
|
return d.toLocaleDateString('hu-HU', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})
|
|
} catch {
|
|
return dateStr
|
|
}
|
|
}
|
|
|
|
function showNotification(type: 'success' | 'error', message: string) {
|
|
saveNotification.value = { type, message }
|
|
setTimeout(() => {
|
|
saveNotification.value = null
|
|
}, 4000)
|
|
}
|
|
|
|
// ── Lifecycle ──────────────────────────────────────────────────────
|
|
|
|
onMounted(() => {
|
|
fetchGarages()
|
|
fetchTiers()
|
|
})
|
|
</script>
|