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

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Notificaciones'
})

// 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>