logout e integracion con authentik completa
All checks were successful
deploy-analiticaNucleo / deploy (push) Successful in 36s
All checks were successful
deploy-analiticaNucleo / deploy (push) Successful in 36s
This commit is contained in:
150
nuxt4-app/app/pages/notifications.vue
Normal file
150
nuxt4-app/app/pages/notifications.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
// Mock notifications for preview
|
||||
const mockNotifications = [
|
||||
{
|
||||
id: 1,
|
||||
type: 'info',
|
||||
title: 'Nueva actualización disponible',
|
||||
message: 'Se ha lanzado una nueva versión del sistema con mejoras de rendimiento.',
|
||||
time: '2 horas',
|
||||
read: false,
|
||||
icon: 'i-lucide-info',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'warning',
|
||||
title: 'Mantenimiento programado',
|
||||
message: 'El sistema estará en mantenimiento el próximo domingo de 2:00 AM a 4:00 AM.',
|
||||
time: '1 día',
|
||||
read: false,
|
||||
icon: 'i-lucide-alert-triangle',
|
||||
color: 'amber'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'success',
|
||||
title: 'Reporte generado',
|
||||
message: 'Tu reporte mensual ha sido generado exitosamente.',
|
||||
time: '3 días',
|
||||
read: true,
|
||||
icon: 'i-lucide-check-circle',
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardLayout>
|
||||
<UDashboardPanel grow>
|
||||
<UDashboardNavbar
|
||||
title="Notificaciones"
|
||||
description="Mantente al día con las últimas actualizaciones y alertas"
|
||||
/>
|
||||
|
||||
<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-amber-50 dark:bg-amber-950/30 flex items-center justify-center relative">
|
||||
<UIcon name="i-lucide-bell" class="size-12 text-amber-600 dark:text-amber-400" />
|
||||
<span class="absolute -top-1 -right-1 w-6 h-6 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center ring-4 ring-white dark:ring-gray-900">
|
||||
3
|
||||
</span>
|
||||
</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 tus notificaciones, configurar alertas personalizadas y mantenerte informado sobre eventos importantes del sistema.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-3">
|
||||
<UButton
|
||||
to="/"
|
||||
color="primary"
|
||||
icon="i-lucide-home"
|
||||
>
|
||||
Volver al inicio
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Notifications Preview -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Vista previa de notificaciones
|
||||
</h3>
|
||||
<UBadge color="red" variant="solid" size="sm">
|
||||
{{ mockNotifications.filter(n => !n.read).length }} nuevas
|
||||
</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="notification in mockNotifications"
|
||||
:key="notification.id"
|
||||
:class="[
|
||||
'p-4 rounded-lg border transition-colors',
|
||||
notification.read
|
||||
? 'bg-gray-50/50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
|
||||
: 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600'
|
||||
]"
|
||||
>
|
||||
<div class="flex gap-3">
|
||||
<div :class="[
|
||||
'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
`bg-${notification.color}-50 dark:bg-${notification.color}-950/30`
|
||||
]">
|
||||
<UIcon
|
||||
:name="notification.icon"
|
||||
:class="[
|
||||
'size-5',
|
||||
`text-${notification.color}-600 dark:text-${notification.color}-400`
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h4 :class="[
|
||||
'font-semibold text-sm',
|
||||
notification.read
|
||||
? 'text-gray-600 dark:text-gray-400'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
]">
|
||||
{{ notification.title }}
|
||||
</h4>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500 flex-shrink-0">
|
||||
hace {{ notification.time }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{{ notification.message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UDashboardPanelContent>
|
||||
</UDashboardPanel>
|
||||
</UDashboardLayout>
|
||||
</template>
|
||||
93
nuxt4-app/app/pages/profile.vue
Normal file
93
nuxt4-app/app/pages/profile.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
const { user } = useAuth()
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
</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>
|
||||
120
nuxt4-app/app/pages/settings.vue
Normal file
120
nuxt4-app/app/pages/settings.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardLayout>
|
||||
<UDashboardPanel grow>
|
||||
<UDashboardNavbar
|
||||
title="Configuración"
|
||||
description="Personaliza tu experiencia y preferencias del sistema"
|
||||
/>
|
||||
|
||||
<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-gray-50 dark:bg-gray-800/50 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-settings" class="size-12 text-gray-600 dark:text-gray-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 configurar tus preferencias de visualización, notificaciones, privacidad y más opciones del sistema.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-3">
|
||||
<UButton
|
||||
to="/"
|
||||
color="primary"
|
||||
icon="i-lucide-home"
|
||||
>
|
||||
Volver al inicio
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Settings Preview -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-950/30 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-palette" class="size-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
Apariencia
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Tema, colores y personalización visual
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-bell" class="size-5 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
Notificaciones
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Gestión de alertas y comunicaciones
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-950/30 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-shield" class="size-5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
Privacidad
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Control de datos y seguridad
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-purple-50 dark:bg-purple-950/30 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-globe" class="size-5 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
Idioma y región
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Preferencias de localización
|
||||
</p>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</UDashboardPanelContent>
|
||||
</UDashboardPanel>
|
||||
</UDashboardLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user