perfil/nuxt4/app/components/auth/ApplicationsList.vue

<template>
  <UCard>
    <template #header>
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <h3 class="font-semibold text-lg flex items-center gap-2">
            <UIcon name="i-heroicons-squares-2x2" />
            Mis Aplicaciones
          </h3>
          <UBadge v-if="filteredApplications.length > 0" color="primary" variant="soft">
            {{ filteredApplications.length }}
          </UBadge>
        </div>

        <!-- Filtros por grupos -->
        <div v-if="availableGroups.length > 0" class="flex flex-wrap gap-2">
          <UButton
            v-for="group in availableGroups"
            :key="group"
            size="sm"
            :color="selectedGroups.includes(group) ? 'primary' : 'neutral'"
            :variant="selectedGroups.includes(group) ? 'soft' : 'ghost'"
            @click="toggleGroup(group)"
          >
            {{ group }}
          </UButton>
        </div>
      </div>
    </template>

    <div v-if="pending" class="flex justify-center py-8">
      <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary" />
    </div>

    <div v-else-if="error" class="text-center py-8">
      <UIcon name="i-heroicons-exclamation-triangle" class="w-12 h-12 mx-auto mb-4 text-error" />
      <p class="text-error font-semibold">Error al cargar aplicaciones</p>
      <p class="text-sm text-gray-500 mt-2">{{ error.message }}</p>
    </div>

    <div v-else-if="applications.length === 0" class="text-center py-8">
      <UIcon name="i-heroicons-inbox" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
      <p class="text-gray-600 dark:text-gray-400">No tienes aplicaciones disponibles</p>
    </div>

    <div v-else-if="filteredApplications.length === 0" class="text-center py-8">
      <UIcon name="i-heroicons-funnel" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
      <p class="text-gray-600 dark:text-gray-400">No hay aplicaciones en los grupos seleccionados</p>
    </div>

    <div v-else class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
      <a
        v-for="app in filteredApplications"
        :key="app.pk"
        :href="app.launchUrl"
        :target="app.openInNewTab ? '_blank' : '_self'"
        class="group block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary hover:bg-primary/5 transition-all duration-200"
      >
        <div class="flex items-start gap-3">
          <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
            <UIcon
              v-if="app.icon"
              :name="app.icon"
              class="w-6 h-6 text-primary"
            />
            <UIcon
              v-else
              name="i-heroicons-cube"
              class="w-6 h-6 text-primary"
            />
          </div>

          <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-2">
              <h4 class="font-semibold text-sm group-hover:text-primary transition-colors">
                {{ app.name }}
              </h4>
              <UIcon
                v-if="app.openInNewTab"
                name="i-heroicons-arrow-top-right-on-square"
                class="w-4 h-4 text-gray-400 flex-shrink-0"
              />
            </div>

            <!-- Grupos como subtítulo con chips compactos -->
            <div v-if="app.group" class="mt-1 flex flex-wrap gap-1">
              <UBadge
                v-for="group in app.group.split(',')"
                :key="group"
                size="xs"
                color="neutral"
                variant="soft"
              >
                {{ group.trim() }}
              </UBadge>
            </div>

            <p v-if="app.description" class="text-xs text-gray-500 dark:text-gray-400 mt-2 line-clamp-2">
              {{ app.description }}
            </p>
          </div>
        </div>
      </a>
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Application {
  pk: string
  name: string
  slug: string
  launchUrl: string
  description?: string
  icon?: string
  publisher?: string
  group?: string
  openInNewTab: boolean
}

const { data: applications, pending, error, refresh } = await useFetch<Application[]>('/api/authentik/applications', {
  default: () => []
})

// Estado de filtros
const selectedGroups = ref<string[]>([])

// Extraer todos los grupos únicos de las aplicaciones
const availableGroups = computed(() => {
  const groups = new Set<string>()
  applications.value.forEach(app => {
    if (app.group) {
      app.group.split(',').forEach(group => {
        groups.add(group.trim())
      })
    }
  })
  return Array.from(groups).sort()
})

// Filtrar aplicaciones según grupos seleccionados
const filteredApplications = computed(() => {
  // Si no hay grupos seleccionados, mostrar todas
  if (selectedGroups.value.length === 0) {
    return applications.value
  }

  // Filtrar apps que contengan al menos uno de los grupos seleccionados
  return applications.value.filter(app => {
    if (!app.group) return false
    const appGroups = app.group.split(',').map(g => g.trim())
    return selectedGroups.value.some(selectedGroup =>
      appGroups.includes(selectedGroup)
    )
  })
})

// Toggle de selección de grupos
const toggleGroup = (group: string) => {
  const index = selectedGroups.value.indexOf(group)
  if (index === -1) {
    selectedGroups.value.push(group)
  } else {
    selectedGroups.value.splice(index, 1)
  }
}

// Refrescar automáticamente cada 5 minutos
const refreshInterval = setInterval(() => {
  refresh()
}, 5 * 60 * 1000)

// Limpiar interval cuando el componente se desmonte
onUnmounted(() => {
  clearInterval(refreshInterval)
})
</script>