PronounsPage/app/pages/admin/profiles.vue

<script setup lang="ts">
import { useFetch, useNuxtApp } from 'nuxt/app';

import { PermissionAreas } from '#shared/helpers.ts';
import type { Dataset } from '~/components/Chart.vue';
import useConfig from '~/composables/useConfig.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';

const { $translator: translator } = useNuxtApp();
const config = useConfig();
useSimpleHead({
    title: `${translator.translate('admin.header')} • Profiles`,
}, translator);

const { data: chart } = await useFetch<Dataset>(
    `/api/admin/stats/users-chart/${config.locale}`,
    { server: false, lazy: true },
);
</script>

<template>
    <Page>
        <NotFound v-if="!$multiIsGranted([PermissionAreas.Users, PermissionAreas.Community])" />
        <div v-else>
            <p>
                <nuxt-link to="/admin">
                    <Icon v="user-cog" />
                    <T>admin.header</T>
                </nuxt-link>
            </p>
            <h2>
                <Icon v="user-cog" />
                Profiles
            </h2>

            <Loading :value="chart">
                <ChartSet :name="`profiles (${config.locale})`" :data="chart!" init="cumulative" />
            </Loading>
        </div>
    </Page>
</template>