pet-web/src/views/qrmanager/ForbiddenView.vue

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <div class="min-h-screen bg-[var(--p-surface-50)]">
    <div class="mx-auto flex min-h-screen max-w-md flex-col justify-center px-4 py-10">
      <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="text-lg font-semibold text-slate-900">Access Denied</div>
        <div class="mt-2 text-sm text-slate-600">Your account role does not meet the access requirements for this page.</div>
        <div class="mt-6 flex gap-2">
          <button
            class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800"
            @click="router.push({ name: 'qrmanagerHome' })"
          >
            Return to Overview
          </button>
          <button
            class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
            @click="router.push({ name: 'home' })"
          >
            Return to Scan Page
          </button>
        </div>
      </div>
    </div>
  </div>
</template>