cataRio/nuxt4/app/pages/index.vue

<template>
  <UContainer class="py-8">
    <div class="space-y-6">
      <!-- Header -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold mb-2">RioCata</h1>
        <p class="text-gray-600 dark:text-gray-400">
          Sistema de Catastro del Río - Gestión Integral
        </p>
      </div>

      <!-- Componentes de autenticación -->
      <div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
        <!-- Columna izquierda -->
        <div class="space-y-6">
          <!-- Avatar y datos básicos -->
          <AuthUserAvatar />

          <!-- Botones de acción individuales -->
          <UCard class="w-full">
            <template #header>
              <h3 class="text-lg font-semibold">Acciones de Sesión</h3>
            </template>
            <div class="flex flex-wrap gap-3">
              <AuthSessionStatusButton />
              <AuthProfileButton />
              <AuthLogoutButton />
              <AuthLoginButton />
            </div>
          </UCard>

          <!-- Verificaciones Frontend/Backend -->
          <UCard class="w-full">
            <template #header>
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
                <h3 class="text-lg font-semibold">Verificación de Sistema</h3>
              </div>
            </template>
            <div class="flex flex-wrap gap-3">
              <AuthFrontendVerificationButton />
              <AuthBackendVerificationButton />
            </div>
          </UCard>

          <!-- Link a catación -->
          <UCard class="w-full">
            <template #header>
              <div class="flex items-center gap-2">
                <UIcon name="i-lucide-coffee" class="w-5 h-5 text-primary" />
                <h3 class="text-lg font-semibold">Aplicaciones</h3>
              </div>
            </template>
            <NuxtLink to="/cata" class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors">
              <div class="flex items-center gap-3">
                <UIcon name="i-lucide-coffee" class="w-6 h-6 text-primary" />
                <div>
                  <h4 class="font-semibold">Sistema de Catación de Café</h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Gestión de sesiones de catación y evaluación sensorial
                  </p>
                </div>
              </div>
            </NuxtLink>
          </UCard>
        </div>

        <!-- Columna derecha -->
        <div class="space-y-6">
          <!-- Metadatos completos -->
          <AuthUserMetadata />

          <!-- Verificaciones de Grupos Frontend -->
          <UCard class="w-full">
            <template #header>
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
                <h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
              </div>
            </template>
            <div class="grid grid-cols-2 gap-3">
              <AuthCheckAuthentikAdminsButton />
              <AuthCheckGrupoPruebaButton />
              <AuthCheckLvl0Button />
              <AuthCheckPublicAccessButton />
            </div>
          </UCard>

          <!-- Verificaciones de Grupos Backend -->
          <UCard class="w-full">
            <template #header>
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
                <h3 class="text-lg font-semibold">Grupos (Backend)</h3>
              </div>
            </template>
            <div class="grid grid-cols-2 gap-3">
              <AuthCheckAuthentikAdminsButton :verify-backend="true" />
              <AuthCheckGrupoPruebaButton :verify-backend="true" />
              <AuthCheckLvl0Button :verify-backend="true" />
              <AuthCheckPublicAccessButton :verify-backend="true" />
            </div>
          </UCard>
        </div>
      </div>

      <!-- Mensaje si no está autenticado -->
      <UCard v-else class="text-center">
        <div class="py-8">
          <UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
          <h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
          <p class="text-gray-600 dark:text-gray-400">
            Authentik Proxy Outpost debería redirigirte automáticamente.
          </p>
        </div>
      </UCard>
    </div>
  </UContainer>
</template>

<script setup lang="ts">
const { isAuthenticated } = useAuthentik()

useHead({
  title: 'RioCata - Inicio',
})
</script>