65 lines
2.7 KiB
Vue
65 lines
2.7 KiB
Vue
<script setup>
|
|
useSeoMeta({ title: 'Dashboard — IDconvert' })
|
|
|
|
const auth = useAuthStore()
|
|
const ui = useUiStore()
|
|
const router = useRouter()
|
|
|
|
onMounted(async () => {
|
|
await auth.fetchMe()
|
|
if (!auth.isLoggedIn) router.push('/login')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-[calc(100vh-60px)] bg-gray-100 px-4 py-12">
|
|
<div class="max-w-2xl mx-auto space-y-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
|
|
|
<!-- User header -->
|
|
<div class="flex items-center gap-4 pb-5 border-b border-gray-100 mb-5">
|
|
<div class="w-12 h-12 rounded-full bg-blue-50 text-[#1a56db] text-lg font-bold flex items-center justify-center border border-blue-100">
|
|
{{ auth.user?.name?.[0]?.toUpperCase() }}
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">{{ auth.user?.name }}</div>
|
|
<div class="text-sm text-gray-400">{{ auth.user?.email }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-gray-900">{{ auth.creditsBalance }}</div>
|
|
<div class="text-xs text-gray-400 uppercase tracking-wide mt-1">Credits remaining</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<div class="text-2xl font-bold text-gray-900">{{ auth.freeUsed ? 'Used' : 'Available' }}</div>
|
|
<div class="text-xs text-gray-400 uppercase tracking-wide mt-1">Free conversion</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Low credit warning -->
|
|
<div v-if="auth.freeUsed && auth.creditsBalance === 0"
|
|
class="bg-red-50 border border-red-200 rounded-lg px-4 py-3 flex items-center justify-between mb-4">
|
|
<span class="text-sm text-gray-800">No credits remaining.</span>
|
|
<button @click="ui.openPurchaseModal()" class="text-sm text-[#1a56db] font-medium hover:underline ml-3">Buy credits</button>
|
|
</div>
|
|
<div v-else-if="auth.freeUsed && auth.creditsBalance === 1"
|
|
class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 text-sm text-gray-800 mb-4">
|
|
1 credit remaining — <button @click="ui.openPurchaseModal()" class="text-[#1a56db] hover:underline">buy more to keep converting</button>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<NuxtLink to="/">
|
|
<BaseButton variant="primary">Convert a file</BaseButton>
|
|
</NuxtLink>
|
|
<BaseButton variant="ghost" @click="ui.openPurchaseModal()">Buy credits</BaseButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|