analiticaNucleo/nuxt4-app/app/pages/profile.vue

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

<template>
  <UDashboardLayout>
    <UDashboardPanel grow>
      <UDashboardNavbar
        title="Mi Perfil"
        description="Gestiona tu información personal y preferencias de cuenta"
      />

      <UDashboardPanelContent>
        <div class="max-w-4xl mx-auto space-y-8">
          <!-- Coming Soon Banner -->
          <UCard>
            <div class="text-center py-12 space-y-6">
              <div class="flex justify-center">
                <div class="w-24 h-24 rounded-full bg-blue-50 dark:bg-blue-950/30 flex items-center justify-center">
                  <UIcon name="i-lucide-user" class="size-12 text-blue-600 dark:text-blue-400" />
                </div>
              </div>

              <div>
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                  Página en construcción
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
                  Estamos trabajando en esta funcionalidad
                </p>
                <p class="text-sm text-gray-500 dark:text-gray-500 max-w-md mx-auto">
                  Pronto podrás gestionar tu perfil, actualizar tu información personal, cambiar tu foto de perfil y más.
                </p>
              </div>

              <div class="flex justify-center gap-3">
                <UButton
                  to="/"
                  color="primary"
                  icon="i-lucide-home"
                >
                  Volver al inicio
                </UButton>
              </div>
            </div>
          </UCard>

          <!-- Current User Info Preview -->
          <UCard v-if="user">
            <template #header>
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                Información actual del usuario
              </h3>
            </template>

            <div class="space-y-4">
              <div>
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Nombre de usuario
                </label>
                <p class="mt-1 text-gray-900 dark:text-white">
                  {{ user.username || 'No especificado' }}
                </p>
              </div>

              <div>
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Nombre completo
                </label>
                <p class="mt-1 text-gray-900 dark:text-white">
                  {{ user.name || 'No especificado' }}
                </p>
              </div>

              <div>
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Email
                </label>
                <p class="mt-1 text-gray-900 dark:text-white">
                  {{ user.email || 'No especificado' }}
                </p>
              </div>
            </div>
          </UCard>
        </div>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardLayout>
</template>