oauth/resources/js/pages/Dashboard.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';

const auth = useAuthStore();
const { t } = useI18n();
</script>

<template>
    <div>
        <h1 class="page-title">{{ t('dashboard.greeting', { name: auth.user?.name }) }}</h1>
        <p class="page-subtitle">{{ t('dashboard.subtitle') }}</p>

        <div class="dashboard__grid">
            <router-link to="/clients" class="card card--interactive">
                <h2 class="card__title">{{ t('dashboard.clientsTitle') }}</h2>
                <p class="card__subtitle">{{ t('dashboard.clientsDesc') }}</p>
            </router-link>

            <router-link to="/tokens" class="card card--interactive">
                <h2 class="card__title">{{ t('dashboard.tokensTitle') }}</h2>
                <p class="card__subtitle">{{ t('dashboard.tokensDesc') }}</p>
            </router-link>

            <router-link to="/authorized-apps" class="card card--interactive">
                <h2 class="card__title">{{ t('dashboard.appsTitle') }}</h2>
                <p class="card__subtitle">{{ t('dashboard.appsDesc') }}</p>
            </router-link>

            <router-link v-if="auth.isAdmin" to="/admin/users" class="card card--interactive">
                <h2 class="card__title">{{ t('dashboard.usersTitle') }}</h2>
                <p class="card__subtitle">{{ t('dashboard.usersDesc') }}</p>
            </router-link>

            <router-link v-if="auth.isAdmin" to="/admin/analytics" class="card card--interactive">
                <h2 class="card__title">{{ t('dashboard.analyticsTitle') }}</h2>
                <p class="card__subtitle">{{ t('dashboard.analyticsDesc') }}</p>
            </router-link>
        </div>

        <div class="card dashboard__api-card">
            <h2 class="card__title">{{ t('dashboard.apiTitle') }}</h2>
            <p class="card__subtitle">
                <i18n-t keypath="dashboard.apiDesc" tag="span">
                    <template #resource><code>/api/users</code></template>
                    <template #read><code>users:read</code></template>
                    <template #write><code>users:write</code></template>
                    <template #link><a href="/api/documentation" class="link">/api/documentation</a></template>
                </i18n-t>
            </p>
        </div>
    </div>
</template>

<style scoped>
.dashboard__grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.dashboard__api-card {
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .dashboard__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>