seguidorDeLotes/nuxt4-app/app/pages/index.vue

<script setup lang="ts">
const { loggedIn, user } = useUserSession()

// Estado de conexión (solo en cliente)
const isOnline = ref(true)

onMounted(() => {
  // Inicializar estado de conexión
  isOnline.value = navigator.onLine

  // Escuchar cambios de conexión
  const handleOnline = () => { isOnline.value = true }
  const handleOffline = () => { isOnline.value = false }

  window.addEventListener('online', handleOnline)
  window.addEventListener('offline', handleOffline)

  onUnmounted(() => {
    window.removeEventListener('online', handleOnline)
    window.removeEventListener('offline', handleOffline)
  })
})
</script>

<template>
  <div class="min-h-screen">
    <header class="border-b border-gray-200 dark:border-gray-800">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold">Seguidor de Lotes</h1>
        <UserMenu />
      </div>
    </header>

    <main class="container mx-auto px-4 py-8">
      <div v-if="loggedIn" class="space-y-6">
        <UCard>
          <template #header>
            <h2 class="text-xl font-semibold">Bienvenido, {{ user?.name }}!</h2>
          </template>

          <div class="space-y-4">
            <p>Has iniciado sesión correctamente.</p>

            <div class="grid gap-4 md:grid-cols-2">
              <UCard>
                <template #header>
                  <h3 class="font-semibold">Información del Usuario</h3>
                </template>
                <dl class="space-y-2 text-sm">
                  <div>
                    <dt class="font-medium">Email:</dt>
                    <dd class="text-gray-600 dark:text-gray-400">{{ user?.email }}</dd>
                  </div>
                  <div>
                    <dt class="font-medium">Usuario:</dt>
                    <dd class="text-gray-600 dark:text-gray-400">{{ user?.username }}</dd>
                  </div>
                  <div v-if="user?.groups?.length">
                    <dt class="font-medium">Grupos:</dt>
                    <dd class="text-gray-600 dark:text-gray-400">{{ user.groups.join(', ') }}</dd>
                  </div>
                </dl>
              </UCard>

              <UCard>
                <template #header>
                  <h3 class="font-semibold">Estado PWA</h3>
                </template>
                <div class="space-y-2 text-sm">
                  <div class="flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full" :class="isOnline ? 'bg-green-500' : 'bg-red-500'"></div>
                    <span>{{ isOnline ? 'En línea' : 'Sin conexión' }}</span>
                  </div>
                  <p class="text-gray-600 dark:text-gray-400">
                    La aplicación funciona offline gracias al service worker
                  </p>
                </div>
              </UCard>
            </div>
          </div>
        </UCard>

        <UCard>
          <template #header>
            <h3 class="font-semibold">Páginas Protegidas</h3>
          </template>
          <div class="flex gap-2">
            <UButton to="/dashboard" color="primary">
              Ir al Dashboard
            </UButton>
            <UButton to="/profile" color="gray">
              Ver Perfil
            </UButton>
          </div>
        </UCard>
      </div>

      <div v-else class="text-center space-y-4">
        <UCard>
          <template #header>
            <h2 class="text-xl font-semibold">Bienvenido a Seguidor de Lotes</h2>
          </template>

          <div class="space-y-4">
            <p>Por favor, inicia sesión para acceder a la aplicación.</p>

            <UButton
              to="/login"
              color="primary"
              size="lg"
            >
              Iniciar Sesión
            </UButton>
          </div>
        </UCard>
      </div>
    </main>
  </div>
</template>