From 76dcff31d6b0fea3b0d6d92055d14448fc866d1d Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 02:05:54 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Reorganizar=20UI=20-=20Sistema=20de=20c?=
 =?UTF-8?q?ataci=C3=B3n=20como=20p=C3=A1gina=20principal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Crear componente CataUserInfo con estilo mobile-first del sistema de catación
- Mover "/" para redirigir automáticamente a /cata
- Incluir información del usuario en página de catación
- Mantener estilo consistente con diseño outline/terminal del sistema
- Optimizar componente de usuario para mobile (compacto y funcional)
---
 nuxt4/app/components/cata/UserInfo.vue |  84 ++++++++++++++++
 nuxt4/app/pages/cata/index.vue         |  17 ++--
 nuxt4/app/pages/index.vue              | 127 ++-----------------------
 3 files changed, 97 insertions(+), 131 deletions(-)
 create mode 100644 nuxt4/app/components/cata/UserInfo.vue

diff --git a/nuxt4/app/components/cata/UserInfo.vue b/nuxt4/app/components/cata/UserInfo.vue
new file mode 100644
index 0000000..f0643e8
--- /dev/null
+++ b/nuxt4/app/components/cata/UserInfo.vue
@@ -0,0 +1,84 @@
+<template>
+  <div v-if="user" class="cata-user-info">
+    <div class="cata-outline-box rounded-lg p-4">
+      <div class="flex items-center gap-3">
+        <!-- Avatar simple con inicial -->
+        <div class="user-avatar cata-outline-box">
+          <span class="cata-text text-xl font-semibold">
+            {{ userInitial }}
+          </span>
+        </div>
+
+        <!-- Info del usuario -->
+        <div class="flex-1 min-w-0">
+          <h3 class="cata-text font-semibold text-base sm:text-lg truncate">
+            {{ user.name || user.username }}
+          </h3>
+          <p class="cata-text text-xs sm:text-sm opacity-60 truncate">
+            {{ user.email }}
+          </p>
+        </div>
+
+        <!-- Botón de logout compacto -->
+        <button
+          class="cata-button p-2 flex-shrink-0"
+          @click="handleLogout"
+          title="Cerrar sesión"
+        >
+          <UIcon name="i-lucide-log-out" class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+
+// Obtener la inicial del usuario
+const userInitial = computed(() => {
+  if (!user.value) return '?'
+  const name = user.value.name || user.value.username || user.value.email || '?'
+  return name.charAt(0).toUpperCase()
+})
+
+// Manejar logout
+const handleLogout = () => {
+  // Redirigir al endpoint de logout de Authentik
+  window.location.href = '/outpost.goauthentik.io/sign_out'
+}
+</script>
+
+<style scoped>
+.cata-user-info {
+  width: 100%;
+}
+
+.user-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
+}
+
+.dark .user-avatar {
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .user-avatar {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .user-avatar .cata-text {
+    font-size: 1rem;
+  }
+}
+</style>
diff --git a/nuxt4/app/pages/cata/index.vue b/nuxt4/app/pages/cata/index.vue
index 926bcfa..5da46d1 100644
--- a/nuxt4/app/pages/cata/index.vue
+++ b/nuxt4/app/pages/cata/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="cata-page cata-text">
     <div class="container mx-auto px-4 py-8 max-w-4xl">
+      <!-- Información del usuario -->
+      <div v-if="isAuthenticated" class="mb-6 cata-fade-in">
+        <CataUserInfo />
+      </div>
+
       <!-- Header -->
       <div class="text-center mb-12">
         <h1 class="text-4xl sm:text-5xl font-bold mb-3 cata-text dark:cata-glow">
@@ -182,21 +187,13 @@
         </div>
       </div>
 
-      <!-- Link para volver al home -->
-      <div class="text-center mt-12">
-        <NuxtLink
-          to="/"
-          class="text-sm cata-text opacity-60 hover:opacity-100 transition-opacity"
-        >
-          <UIcon name="i-lucide-arrow-left" class="w-4 h-4 inline mr-1" />
-          Volver al inicio
-        </NuxtLink>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+const { isAuthenticated } = useAuthentik()
+
 const {
   sesionActiva,
   cargando,
diff --git a/nuxt4/app/pages/index.vue b/nuxt4/app/pages/index.vue
index 19d86d8..13d984a 100644
--- a/nuxt4/app/pages/index.vue
+++ b/nuxt4/app/pages/index.vue
@@ -1,127 +1,12 @@
 <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>
+  <div />
 </template>
 
 <script setup lang="ts">
-const { isAuthenticated } = useAuthentik()
-
-useHead({
-  title: 'RioCata - Inicio',
+// Redirigir automáticamente al sistema de catación
+definePageMeta({
+  middleware: () => {
+    return navigateTo('/cata', { replace: true })
+  }
 })
 </script>