diff --git a/agate-ui/.eslintrc-auto-import.json b/agate-ui/.eslintrc-auto-import.json
index 6e3ef365..6d5931dd 100644
--- a/agate-ui/.eslintrc-auto-import.json
+++ b/agate-ui/.eslintrc-auto-import.json
@@ -116,6 +116,7 @@
     "onWatcherCleanup": true,
     "useId": true,
     "useModel": true,
-    "useTemplateRef": true
+    "useTemplateRef": true,
+    "useTicketStore": true
   }
 }
diff --git a/agate-ui/src/auto-imports.d.ts b/agate-ui/src/auto-imports.d.ts
index 73836ffc..11d42e53 100644
--- a/agate-ui/src/auto-imports.d.ts
+++ b/agate-ui/src/auto-imports.d.ts
@@ -5,211 +5,198 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const $: (typeof import('vue/macros'))['$'];
-  const $$: (typeof import('vue/macros'))['$$'];
-  const $computed: (typeof import('vue/macros'))['$computed'];
-  const $customRef: (typeof import('vue/macros'))['$customRef'];
-  const $ref: (typeof import('vue/macros'))['$ref'];
-  const $shallowRef: (typeof import('vue/macros'))['$shallowRef'];
-  const $toRef: (typeof import('vue/macros'))['$toRef'];
-  const AnalysisPluginPackages: (typeof import('./stores/plugins'))['AnalysisPluginPackages'];
-  const EffectScope: (typeof import('vue'))['EffectScope'];
-  const TOKEN_TYPES: (typeof import('./stores/tokens'))['TOKEN_TYPES'];
-  const computed: (typeof import('vue'))['computed'];
-  const createApp: (typeof import('vue'))['createApp'];
-  const customRef: (typeof import('vue'))['customRef'];
-  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent'];
-  const defineComponent: (typeof import('vue'))['defineComponent'];
-  const effectScope: (typeof import('vue'))['effectScope'];
-  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance'];
-  const getCurrentScope: (typeof import('vue'))['getCurrentScope'];
-  const h: (typeof import('vue'))['h'];
-  const inject: (typeof import('vue'))['inject'];
-  const isProxy: (typeof import('vue'))['isProxy'];
-  const isReactive: (typeof import('vue'))['isReactive'];
-  const isReadonly: (typeof import('vue'))['isReadonly'];
-  const isRef: (typeof import('vue'))['isRef'];
-  const markRaw: (typeof import('vue'))['markRaw'];
-  const nextTick: (typeof import('vue'))['nextTick'];
-  const onActivated: (typeof import('vue'))['onActivated'];
-  const onBeforeMount: (typeof import('vue'))['onBeforeMount'];
-  const onBeforeRouteLeave: (typeof import('vue-router'))['onBeforeRouteLeave'];
-  const onBeforeRouteUpdate: (typeof import('vue-router'))['onBeforeRouteUpdate'];
-  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount'];
-  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate'];
-  const onDeactivated: (typeof import('vue'))['onDeactivated'];
-  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured'];
-  const onMounted: (typeof import('vue'))['onMounted'];
-  const onRenderTracked: (typeof import('vue'))['onRenderTracked'];
-  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered'];
-  const onScopeDispose: (typeof import('vue'))['onScopeDispose'];
-  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch'];
-  const onUnmounted: (typeof import('vue'))['onUnmounted'];
-  const onUpdated: (typeof import('vue'))['onUpdated'];
-  const onWatcherCleanup: (typeof import('vue'))['onWatcherCleanup'];
-  const provide: (typeof import('vue'))['provide'];
-  const reactive: (typeof import('vue'))['reactive'];
-  const readonly: (typeof import('vue'))['readonly'];
-  const ref: (typeof import('vue'))['ref'];
-  const resolveComponent: (typeof import('vue'))['resolveComponent'];
-  const shallowReactive: (typeof import('vue'))['shallowReactive'];
-  const shallowReadonly: (typeof import('vue'))['shallowReadonly'];
-  const shallowRef: (typeof import('vue'))['shallowRef'];
-  const stores: (typeof import('./stores/index'))['default'];
-  const toRaw: (typeof import('vue'))['toRaw'];
-  const toRef: (typeof import('vue'))['toRef'];
-  const toRefs: (typeof import('vue'))['toRefs'];
-  const toValue: (typeof import('vue'))['toValue'];
-  const triggerRef: (typeof import('vue'))['triggerRef'];
-  const unref: (typeof import('vue'))['unref'];
-  const useApplicationStore: (typeof import('./stores/application'))['useApplicationStore'];
-  const useAppsStore: (typeof import('./stores/apps'))['useAppsStore'];
-  const useAttrs: (typeof import('vue'))['useAttrs'];
-  const useAuthStore: (typeof import('./stores/auth'))['useAuthStore'];
-  const useAuthzStore: (typeof import('./stores/authz'))['useAuthzStore'];
-  const useCartStore: (typeof import('./stores/cart'))['useCartStore'];
-  const useCommandsStore: (typeof import('./stores/commands'))['useCommandsStore'];
-  const useCounterStore: (typeof import('./stores/auth'))['useCounterStore'];
-  const useCssModule: (typeof import('vue'))['useCssModule'];
-  const useCssVars: (typeof import('vue'))['useCssVars'];
-  const useDatashieldStore: (typeof import('./stores/datashield'))['useDatashieldStore'];
-  const useDatasourceStore: (typeof import('./stores/datasource'))['useDatasourceStore'];
-  const useFilesStore: (typeof import('./stores/files'))['useFilesStore'];
-  const useGroupStore: (typeof import('./stores/group'))['useGroupStore'];
-  const useGroupsStore: (typeof import('./stores/groups'))['useGroupsStore'];
-  const useI18n: (typeof import('vue-i18n'))['useI18n'];
-  const useId: (typeof import('vue'))['useId'];
-  const useIdentifiersStore: (typeof import('./stores/identifiers'))['useIdentifiersStore'];
-  const useIdentityProvidersStore: (typeof import('./stores/identity-providers'))['useIdentityProvidersStore'];
-  const useLink: (typeof import('vue-router'))['useLink'];
-  const useModel: (typeof import('vue'))['useModel'];
-  const usePluginsStore: (typeof import('./stores/plugins'))['usePluginsStore'];
-  const useProfileAclsStore: (typeof import('./stores/profile-acls'))['useProfileAclsStore'];
-  const useProfileActivityStore: (typeof import('./stores/profile-activity'))['useProfileActivityStore'];
-  const useProfilesStore: (typeof import('./stores/profiles'))['useProfilesStore'];
-  const useProjectsStore: (typeof import('./stores/projects'))['useProjectsStore'];
-  const useRStore: (typeof import('./stores/r'))['useRStore'];
-  const useRealmStore: (typeof import('./stores/realm'))['useRealmStore'];
-  const useResourcesStore: (typeof import('./stores/resources'))['useResourcesStore'];
-  const useRoute: (typeof import('vue-router'))['useRoute'];
-  const useRouter: (typeof import('vue-router'))['useRouter'];
-  const useSearchStore: (typeof import('./stores/search'))['useSearchStore'];
-  const useSlots: (typeof import('vue'))['useSlots'];
-  const useSqlStore: (typeof import('./stores/sql'))['useSqlStore'];
-  const useSystemStore: (typeof import('./stores/system'))['useSystemStore'];
-  const useTaxonomiesStore: (typeof import('./stores/taxonomies'))['useTaxonomiesStore'];
-  const useTemplateRef: (typeof import('vue'))['useTemplateRef'];
-  const useTokensStore: (typeof import('./stores/tokens'))['useTokensStore'];
-  const useTransientDatasourceStore: (typeof import('./stores/transient-datasource'))['useTransientDatasourceStore'];
-  const useUserStore: (typeof import('./stores/user'))['useUserStore'];
-  const useUsersGroupsStore: (typeof import('./stores/users-groups'))['useUsersGroupsStore'];
-  const useUsersStore: (typeof import('./stores/users'))['useUsersStore'];
-  const watch: (typeof import('vue'))['watch'];
-  const watchEffect: (typeof import('vue'))['watchEffect'];
-  const watchPostEffect: (typeof import('vue'))['watchPostEffect'];
-  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect'];
+  const $: typeof import('vue/macros')['$']
+  const $$: typeof import('vue/macros')['$$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const AnalysisPluginPackages: (typeof import('./stores/plugins'))['AnalysisPluginPackages']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const TOKEN_TYPES: (typeof import('./stores/tokens'))['TOKEN_TYPES']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const stores: typeof import('./stores/index')['default']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useApplicationStore: typeof import('./stores/application')['useApplicationStore']
+  const useAppsStore: (typeof import('./stores/apps'))['useAppsStore']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useAuthStore: typeof import('./stores/auth')['useAuthStore']
+  const useAuthzStore: (typeof import('./stores/authz'))['useAuthzStore']
+  const useCartStore: (typeof import('./stores/cart'))['useCartStore']
+  const useCommandsStore: (typeof import('./stores/commands'))['useCommandsStore']
+  const useCounterStore: (typeof import('./stores/auth'))['useCounterStore']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDatashieldStore: (typeof import('./stores/datashield'))['useDatashieldStore']
+  const useDatasourceStore: (typeof import('./stores/datasource'))['useDatasourceStore']
+  const useFilesStore: (typeof import('./stores/files'))['useFilesStore']
+  const useGroupStore: typeof import('./stores/group')['useGroupStore']
+  const useGroupsStore: (typeof import('./stores/groups'))['useGroupsStore']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
+  const useIdentifiersStore: (typeof import('./stores/identifiers'))['useIdentifiersStore']
+  const useIdentityProvidersStore: (typeof import('./stores/identity-providers'))['useIdentityProvidersStore']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const usePluginsStore: (typeof import('./stores/plugins'))['usePluginsStore']
+  const useProfileAclsStore: (typeof import('./stores/profile-acls'))['useProfileAclsStore']
+  const useProfileActivityStore: (typeof import('./stores/profile-activity'))['useProfileActivityStore']
+  const useProfilesStore: (typeof import('./stores/profiles'))['useProfilesStore']
+  const useProjectsStore: (typeof import('./stores/projects'))['useProjectsStore']
+  const useRStore: (typeof import('./stores/r'))['useRStore']
+  const useRealmStore: typeof import('./stores/realm')['useRealmStore']
+  const useResourcesStore: (typeof import('./stores/resources'))['useResourcesStore']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSearchStore: (typeof import('./stores/search'))['useSearchStore']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSqlStore: (typeof import('./stores/sql'))['useSqlStore']
+  const useSystemStore: typeof import('./stores/system')['useSystemStore']
+  const useTaxonomiesStore: (typeof import('./stores/taxonomies'))['useTaxonomiesStore']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useTicketStore: typeof import('./stores/tickets')['useTicketStore']
+  const useTokensStore: (typeof import('./stores/tokens'))['useTokensStore']
+  const useTransientDatasourceStore: (typeof import('./stores/transient-datasource'))['useTransientDatasourceStore']
+  const useUserStore: typeof import('./stores/user')['useUserStore']
+  const useUsersGroupsStore: (typeof import('./stores/users-groups'))['useUsersGroupsStore']
+  const useUsersStore: (typeof import('./stores/users'))['useUsersStore']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from 'vue';
-  import('vue');
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
 // for vue template auto import
-import { UnwrapRef } from 'vue';
+import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly $$: UnwrapRef<(typeof import('vue/macros'))['$$']>;
-    readonly $: UnwrapRef<(typeof import('vue/macros'))['$']>;
-    readonly $computed: UnwrapRef<(typeof import('vue/macros'))['$computed']>;
-    readonly $customRef: UnwrapRef<(typeof import('vue/macros'))['$customRef']>;
-    readonly $ref: UnwrapRef<(typeof import('vue/macros'))['$ref']>;
-    readonly $shallowRef: UnwrapRef<(typeof import('vue/macros'))['$shallowRef']>;
-    readonly $toRef: UnwrapRef<(typeof import('vue/macros'))['$toRef']>;
-    readonly EffectScope: UnwrapRef<(typeof import('vue'))['EffectScope']>;
-    readonly computed: UnwrapRef<(typeof import('vue'))['computed']>;
-    readonly createApp: UnwrapRef<(typeof import('vue'))['createApp']>;
-    readonly customRef: UnwrapRef<(typeof import('vue'))['customRef']>;
-    readonly defineAsyncComponent: UnwrapRef<(typeof import('vue'))['defineAsyncComponent']>;
-    readonly defineComponent: UnwrapRef<(typeof import('vue'))['defineComponent']>;
-    readonly effectScope: UnwrapRef<(typeof import('vue'))['effectScope']>;
-    readonly getCurrentInstance: UnwrapRef<(typeof import('vue'))['getCurrentInstance']>;
-    readonly getCurrentScope: UnwrapRef<(typeof import('vue'))['getCurrentScope']>;
-    readonly h: UnwrapRef<(typeof import('vue'))['h']>;
-    readonly inject: UnwrapRef<(typeof import('vue'))['inject']>;
-    readonly isProxy: UnwrapRef<(typeof import('vue'))['isProxy']>;
-    readonly isReactive: UnwrapRef<(typeof import('vue'))['isReactive']>;
-    readonly isReadonly: UnwrapRef<(typeof import('vue'))['isReadonly']>;
-    readonly isRef: UnwrapRef<(typeof import('vue'))['isRef']>;
-    readonly markRaw: UnwrapRef<(typeof import('vue'))['markRaw']>;
-    readonly nextTick: UnwrapRef<(typeof import('vue'))['nextTick']>;
-    readonly onActivated: UnwrapRef<(typeof import('vue'))['onActivated']>;
-    readonly onBeforeMount: UnwrapRef<(typeof import('vue'))['onBeforeMount']>;
-    readonly onBeforeRouteLeave: UnwrapRef<(typeof import('vue-router'))['onBeforeRouteLeave']>;
-    readonly onBeforeRouteUpdate: UnwrapRef<(typeof import('vue-router'))['onBeforeRouteUpdate']>;
-    readonly onBeforeUnmount: UnwrapRef<(typeof import('vue'))['onBeforeUnmount']>;
-    readonly onBeforeUpdate: UnwrapRef<(typeof import('vue'))['onBeforeUpdate']>;
-    readonly onDeactivated: UnwrapRef<(typeof import('vue'))['onDeactivated']>;
-    readonly onErrorCaptured: UnwrapRef<(typeof import('vue'))['onErrorCaptured']>;
-    readonly onMounted: UnwrapRef<(typeof import('vue'))['onMounted']>;
-    readonly onRenderTracked: UnwrapRef<(typeof import('vue'))['onRenderTracked']>;
-    readonly onRenderTriggered: UnwrapRef<(typeof import('vue'))['onRenderTriggered']>;
-    readonly onScopeDispose: UnwrapRef<(typeof import('vue'))['onScopeDispose']>;
-    readonly onServerPrefetch: UnwrapRef<(typeof import('vue'))['onServerPrefetch']>;
-    readonly onUnmounted: UnwrapRef<(typeof import('vue'))['onUnmounted']>;
-    readonly onUpdated: UnwrapRef<(typeof import('vue'))['onUpdated']>;
-    readonly onWatcherCleanup: UnwrapRef<(typeof import('vue'))['onWatcherCleanup']>;
-    readonly provide: UnwrapRef<(typeof import('vue'))['provide']>;
-    readonly reactive: UnwrapRef<(typeof import('vue'))['reactive']>;
-    readonly readonly: UnwrapRef<(typeof import('vue'))['readonly']>;
-    readonly ref: UnwrapRef<(typeof import('vue'))['ref']>;
-    readonly resolveComponent: UnwrapRef<(typeof import('vue'))['resolveComponent']>;
-    readonly shallowReactive: UnwrapRef<(typeof import('vue'))['shallowReactive']>;
-    readonly shallowReadonly: UnwrapRef<(typeof import('vue'))['shallowReadonly']>;
-    readonly shallowRef: UnwrapRef<(typeof import('vue'))['shallowRef']>;
-    readonly stores: UnwrapRef<(typeof import('./stores/index'))['default']>;
-    readonly toRaw: UnwrapRef<(typeof import('vue'))['toRaw']>;
-    readonly toRef: UnwrapRef<(typeof import('vue'))['toRef']>;
-    readonly toRefs: UnwrapRef<(typeof import('vue'))['toRefs']>;
-    readonly toValue: UnwrapRef<(typeof import('vue'))['toValue']>;
-    readonly triggerRef: UnwrapRef<(typeof import('vue'))['triggerRef']>;
-    readonly unref: UnwrapRef<(typeof import('vue'))['unref']>;
-    readonly useApplicationStore: UnwrapRef<(typeof import('./stores/application'))['useApplicationStore']>;
-    readonly useAttrs: UnwrapRef<(typeof import('vue'))['useAttrs']>;
-    readonly useAuthStore: UnwrapRef<(typeof import('./stores/auth'))['useAuthStore']>;
-    readonly useCssModule: UnwrapRef<(typeof import('vue'))['useCssModule']>;
-    readonly useCssVars: UnwrapRef<(typeof import('vue'))['useCssVars']>;
-    readonly useGroupStore: UnwrapRef<(typeof import('./stores/group'))['useGroupStore']>;
-    readonly useI18n: UnwrapRef<(typeof import('vue-i18n'))['useI18n']>;
-    readonly useId: UnwrapRef<(typeof import('vue'))['useId']>;
-    readonly useLink: UnwrapRef<(typeof import('vue-router'))['useLink']>;
-    readonly useModel: UnwrapRef<(typeof import('vue'))['useModel']>;
-    readonly useRealmStore: UnwrapRef<(typeof import('./stores/realm'))['useRealmStore']>;
-    readonly useRoute: UnwrapRef<(typeof import('vue-router'))['useRoute']>;
-    readonly useRouter: UnwrapRef<(typeof import('vue-router'))['useRouter']>;
-    readonly useSlots: UnwrapRef<(typeof import('vue'))['useSlots']>;
-    readonly useSystemStore: UnwrapRef<(typeof import('./stores/system'))['useSystemStore']>;
-    readonly useTemplateRef: UnwrapRef<(typeof import('vue'))['useTemplateRef']>;
-    readonly useUserStore: UnwrapRef<(typeof import('./stores/user'))['useUserStore']>;
-    readonly watch: UnwrapRef<(typeof import('vue'))['watch']>;
-    readonly watchEffect: UnwrapRef<(typeof import('vue'))['watchEffect']>;
-    readonly watchPostEffect: UnwrapRef<(typeof import('vue'))['watchPostEffect']>;
-    readonly watchSyncEffect: UnwrapRef<(typeof import('vue'))['watchSyncEffect']>;
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly stores: UnwrapRef<typeof import('./stores/index')['default']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useApplicationStore: UnwrapRef<typeof import('./stores/application')['useApplicationStore']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useAuthStore: UnwrapRef<typeof import('./stores/auth')['useAuthStore']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useGroupStore: UnwrapRef<typeof import('./stores/group')['useGroupStore']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
+    readonly useRealmStore: UnwrapRef<typeof import('./stores/realm')['useRealmStore']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSystemStore: UnwrapRef<typeof import('./stores/system')['useSystemStore']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly useTicketStore: UnwrapRef<typeof import('./stores/tickets')['useTicketStore']>
+    readonly useUserStore: UnwrapRef<typeof import('./stores/user')['useUserStore']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
   }
 }
diff --git a/agate-ui/src/components/GroupsTable.vue b/agate-ui/src/components/GroupsTable.vue
index b71fda08..e702abf9 100644
--- a/agate-ui/src/components/GroupsTable.vue
+++ b/agate-ui/src/components/GroupsTable.vue
@@ -46,7 +46,7 @@
           </q-td>
           <q-td key="applications" :props="props">
             <template v-for="app in props.row.applications" :key="app">
-              <q-badge :label="getApplicationName(app)" class="on-left" />
+              <q-badge :label="applicationStore.getApplicationName(app)" class="on-left" />
             </template>
           </q-td>
         </q-tr>
@@ -134,8 +134,4 @@ function onAdd() {
 function onSaved() {
   refresh();
 }
-
-function getApplicationName(id: string) {
-  return applicationStore.applications?.find((app) => app.id === id)?.name;
-}
 </script>
diff --git a/agate-ui/src/components/TicketEventsDialog.vue b/agate-ui/src/components/TicketEventsDialog.vue
new file mode 100644
index 00000000..cbc9dd40
--- /dev/null
+++ b/agate-ui/src/components/TicketEventsDialog.vue
@@ -0,0 +1,64 @@
+<template>
+  <q-dialog v-model="showDialog" persistent @hide="onHide">
+    <q-card class="dialog-sm">
+      <q-card-section>
+        <div class="text-h6">{{ t('ticket.events') }}</div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <q-list separator class="fields-list">
+          <q-item v-for="(event, idx) in events" :key="idx">
+            <q-item-section>
+              <q-item-label>
+                <q-badge :label="applicationStore.getApplicationName(event.application)" />
+              </q-item-label>
+              <q-item-label caption>{{ getDateLabel(event.time) }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              <q-chip :label="event.action" size="sm" color="accent" class="text-white" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-grey-3">
+        <q-btn flat :label="t('close')" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { TicketDto } from 'src/models/Agate';
+import { getDateLabel } from 'src/utils/dates';
+
+const { t } = useI18n();
+const applicationStore = useApplicationStore();
+
+interface DialogProps {
+  modelValue: boolean;
+  ticket: TicketDto | undefined;
+}
+
+const props = defineProps<DialogProps>();
+const emit = defineEmits(['update:modelValue']);
+
+const showDialog = ref(props.modelValue);
+const events = ref(props.ticket?.events);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    showDialog.value = value;
+    events.value = props.ticket?.events;
+  },
+);
+
+function onHide() {
+  emit('update:modelValue', false);
+}
+</script>
diff --git a/agate-ui/src/components/TicketsTable.vue b/agate-ui/src/components/TicketsTable.vue
new file mode 100644
index 00000000..4efae8a7
--- /dev/null
+++ b/agate-ui/src/components/TicketsTable.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <q-table :rows="tickets" flat row-key="name" :columns="columns" :pagination="initialPagination">
+      <template v-slot:top-right>
+        <q-input v-model="filter" debounce="300" :placeholder="t('search')" dense clearable class="q-mr-md">
+          <template v-slot:prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" @mouseover="onOverRow(props.row)" @mouseleave="onLeaveRow(props.row)">
+          <q-td key="id" :props="props">
+            <span class="text-primary">{{ props.row.id }}</span>
+            <div class="float-right">
+              <q-btn
+                v-if="!props.row.hasDatasource"
+                rounded
+                dense
+                flat
+                size="sm"
+                color="secondary"
+                :title="t('delete')"
+                :icon="toolsVisible[props.row.id] ? 'delete' : 'none'"
+                class="q-ml-xs"
+                @click="onShowDelete(props.row)"
+              />
+            </div>
+          </q-td>
+          <q-td key="username" :props="props">
+            <q-chip size="sm">{{ props.row.username }}</q-chip>
+          </q-td>
+          <q-td key="expires" :props="props">
+            <span>{{ getDateLabel(props.row.expires) }}</span>
+          </q-td>
+          <q-td key="login_app" :props="props">
+            <q-badge :label="applicationStore.getApplicationName(getLoginApp(props.row))" />
+          </q-td>
+          <q-td key="events" :props="props">
+            <q-btn :label="props.row.events?.length ?? 0" color="accent" size="sm" @click="onShowEvents(props.row)" />
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <confirm-dialog
+      v-model="showDelete"
+      :title="t('ticket.remove')"
+      :text="t('ticket.remove_confirm', { id: selected?.id, username: selected?.username })"
+      @confirm="onDelete"
+    />
+    <ticket-events-dialog v-model="showEventsDialog" :ticket="selected" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TicketDto } from 'src/models/Agate';
+import ConfirmDialog from 'src/components/ConfirmDialog.vue';
+import TicketEventsDialog from 'src/components/TicketEventsDialog.vue';
+import { DefaultAlignment } from 'src/components/models';
+import { getDateLabel } from 'src/utils/dates';
+
+const { t } = useI18n();
+const ticketStore = useTicketStore();
+const applicationStore = useApplicationStore();
+
+const filter = ref('');
+const toolsVisible = ref<{ [key: string]: boolean }>({});
+const initialPagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 20,
+});
+const showDelete = ref(false);
+const showEventsDialog = ref(false);
+const selected = ref();
+
+const tickets = computed<TicketDto[]>(
+  () =>
+    ticketStore.tickets?.filter((tk) =>
+      filter.value ? tk.username.toLowerCase().includes(filter.value.toLowerCase()) : true,
+    ) || [],
+);
+const columns = computed(() => [
+  { name: 'id', label: 'ID', field: 'id', align: DefaultAlignment },
+  { name: 'username', label: t('username'), field: 'username', align: DefaultAlignment },
+  { name: 'expires', label: t('ticket.expires'), field: 'expires', align: DefaultAlignment },
+  { name: 'login_app', label: t('ticket.login_app'), field: 'events', align: DefaultAlignment },
+  { name: 'events', label: t('ticket.events'), field: 'events', align: DefaultAlignment },
+]);
+
+onMounted(() => {
+  applicationStore.init();
+  refresh();
+});
+
+function refresh() {
+  ticketStore.init();
+}
+
+function onOverRow(row: TicketDto) {
+  toolsVisible.value[row.id] = true;
+}
+
+function onLeaveRow(row: TicketDto) {
+  toolsVisible.value[row.id] = false;
+}
+
+function onShowDelete(row: TicketDto) {
+  selected.value = row;
+  showDelete.value = true;
+}
+
+function onShowEvents(row: TicketDto) {
+  selected.value = row;
+  showEventsDialog.value = true;
+}
+
+function onDelete() {
+  ticketStore.remove(selected.value).finally(refresh);
+}
+
+function getLoginApp(row: TicketDto) {
+  return row.events?.find((evt) => evt.action === 'login')?.application;
+}
+</script>
diff --git a/agate-ui/src/components/UsersTable.vue b/agate-ui/src/components/UsersTable.vue
index 9385ac7c..67b02c49 100644
--- a/agate-ui/src/components/UsersTable.vue
+++ b/agate-ui/src/components/UsersTable.vue
@@ -127,12 +127,12 @@
           </q-td>
           <q-td key="applications" :props="props">
             <template v-for="app in props.row.applications" :key="app">
-              <q-badge :label="getApplicationName(app)" class="on-left" />
+              <q-badge :label="applicationStore.getApplicationName(app)" class="on-left" />
             </template>
             <template v-for="(grpApp, idx) in props.row.groupApplications" :key="idx">
               <q-badge
                 color="secondary"
-                :label="getApplicationName(grpApp.application)"
+                :label="applicationStore.getApplicationName(grpApp.application)"
                 :title="t('inherited_from', { parent: grpApp.group })"
                 class="on-left"
               />
@@ -270,10 +270,6 @@ function onSaved() {
   refresh();
 }
 
-function getApplicationName(id: string) {
-  return applicationStore.applications?.find((app) => app.id === id)?.name;
-}
-
 function onAccount(row: UserDto) {
   window.open(row.accountUrl, '_blank');
 }
diff --git a/agate-ui/src/i18n/en/index.js b/agate-ui/src/i18n/en/index.js
index b94a0b2d..d853765e 100644
--- a/agate-ui/src/i18n/en/index.js
+++ b/agate-ui/src/i18n/en/index.js
@@ -131,6 +131,13 @@ export default {
       ANY: 'Email or mobile app',
     },
   },
+  ticket: {
+    events: 'Events',
+    expires: 'Expires',
+    login_app: 'Login application',
+    remove: 'Remove ticket',
+    remove_confirm: 'Please confirm ticket removal: {id} of {username}',
+  },
   add: 'Add',
   administration: 'Administration',
   applications_caption: 'Manage applications, identifications and identity providers',
@@ -171,6 +178,7 @@ export default {
   source_code: 'Source Code',
   status: 'Status',
   tickets: 'Tickets',
+  username: 'Username',
   users_caption: 'Manage users, assign role and groups to grant applications access',
   users: 'Users',
 };
diff --git a/agate-ui/src/i18n/fr/index.js b/agate-ui/src/i18n/fr/index.js
index ce77549b..ee9b1eaa 100644
--- a/agate-ui/src/i18n/fr/index.js
+++ b/agate-ui/src/i18n/fr/index.js
@@ -131,6 +131,13 @@ export default {
       ANY: 'Courriel ou application mobile',
     },
   },
+  ticket: {
+    events: 'Événements',
+    expires: 'Expire',
+    login_app: 'Application de connexion',
+    remove: 'Supprimer le ticket',
+    remove_confirm: 'Veuillez confirmer la suppression du ticket: {id} de {username}',
+  },
   add: 'ajouter',
   administration: 'Administration',
   applications_caption: "Gérer les applications, les identifications et les fournisseurs d'identité",
@@ -171,6 +178,7 @@ export default {
   source_code: 'Code source',
   status: 'Statut',
   tickets: 'Tickets',
+  username: 'Nom d\'usager',
   users_caption: 'Gérer les utilisateurs, les rôles et les accès aux applications',
   users: 'Utilisateurs',
 };
diff --git a/agate-ui/src/pages/TicketsPage.vue b/agate-ui/src/pages/TicketsPage.vue
new file mode 100644
index 00000000..2f36cbe4
--- /dev/null
+++ b/agate-ui/src/pages/TicketsPage.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <q-toolbar class="bg-grey-3">
+      <q-breadcrumbs>
+        <q-breadcrumbs-el icon="home" to="/" />
+        <q-breadcrumbs-el :label="t('tickets')" />
+      </q-breadcrumbs>
+    </q-toolbar>
+    <q-page class="q-pa-md">
+      <tickets-table />
+    </q-page>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TicketsTable from 'src/components/TicketsTable.vue';
+
+const { t } = useI18n();
+</script>
diff --git a/agate-ui/src/router/routes.ts b/agate-ui/src/router/routes.ts
index 710d8e28..70a19074 100644
--- a/agate-ui/src/router/routes.ts
+++ b/agate-ui/src/router/routes.ts
@@ -11,6 +11,7 @@ const routes: RouteRecordRaw[] = [
       { path: 'groups', component: () => import('pages/GroupsPage.vue') },
       { path: 'applications', component: () => import('pages/ApplicationsPage.vue') },
       { path: 'realms', component: () => import('pages/RealmsPage.vue') },
+      { path: 'tickets', component: () => import('pages/TicketsPage.vue') },
       { path: 'settings', component: () => import('pages/SettingsPage.vue') },
     ],
   },
diff --git a/agate-ui/src/stores/application.ts b/agate-ui/src/stores/application.ts
index ccbbe2e3..4969b107 100644
--- a/agate-ui/src/stores/application.ts
+++ b/agate-ui/src/stores/application.ts
@@ -52,11 +52,17 @@ export const useApplicationStore = defineStore('application', () => {
     return key.join('');
   }
 
+
+  function getApplicationName(id: string | undefined) {
+    return applications.value?.find((app) => app.id === id)?.name;
+  }
+
   return {
     applications,
     init,
     save,
     remove,
     generateKey,
+    getApplicationName,
   };
 });
diff --git a/agate-ui/src/stores/tickets.ts b/agate-ui/src/stores/tickets.ts
new file mode 100644
index 00000000..ee329fa1
--- /dev/null
+++ b/agate-ui/src/stores/tickets.ts
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/api';
+import type { TicketDto } from 'src/models/Agate';
+
+export const useTicketStore = defineStore('ticket', () => {
+  const tickets = ref<TicketDto[]>([]);
+
+  async function init() {
+    return api.get('/tickets').then((response) => {
+      if (response.status === 200) {
+        tickets.value = response.data;
+      }
+      return response;
+    });
+  }
+
+  async function remove(ticket: TicketDto) {
+    return api.delete(`/tickets/${ticket.id}`);
+  }
+
+  return {
+    tickets,
+    init,
+    remove,
+  };
+});