From 231c901e1c53dc26fc4979e0d654d749796141e1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 01:50:00 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20app.vue=20para=20usar=20NuxtP?=
 =?UTF-8?q?age=20y=20crear=20p=C3=A1gina=20de=20inicio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplificar app.vue para usar <NuxtPage /> correctamente
- Crear index.vue con contenido de autenticación de Authentik
- Agregar enlace a la aplicación de catación desde el inicio
- Esto permite que las rutas /cata y /cata/sesion se rendericen correctamente
---
 nuxt4/app/app.vue         |  98 +----------------------------
 nuxt4/app/pages/index.vue | 127 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 97 deletions(-)
 create mode 100644 nuxt4/app/pages/index.vue

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index 33c0a1e..c648ef0 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -2,103 +2,7 @@
   <UApp>
     <NuxtRouteAnnouncer />
     <UNotifications />
-
-    <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>
-          </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>
+    <NuxtPage />
   </UApp>
 </template>
 
diff --git a/nuxt4/app/pages/index.vue b/nuxt4/app/pages/index.vue
new file mode 100644
index 0000000..19d86d8
--- /dev/null
+++ b/nuxt4/app/pages/index.vue
@@ -0,0 +1,127 @@
+<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>