feat(core) : add usePermissions composable and rbac roles admin front

frontend/pages/admin.vue

@@ -6,7 +6,7 @@
             <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
                 <nav class="flex gap-4 sm:gap-6">
                     <button
-                        v-for="tab in tabs"
+                        v-for="tab in visibleTabs"
                         :key="tab.key"
                         class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
                         :class="activeTab === tab.key
@@ -27,6 +27,7 @@
             <AdminPriorityTab v-if="activeTab === 'priorities'" />
             <AdminTagTab v-if="activeTab === 'tags'" />
             <AdminUserTab v-if="activeTab === 'users'" />
+            <AdminRoleTab v-if="activeTab === 'roles' && canViewRoles" />
             <AdminGiteaTab v-if="activeTab === 'gitea'" />
             <AdminBookStackTab v-if="activeTab === 'bookstack'" />
             <AdminZimbraTab v-if="activeTab === 'zimbra'" />
@@ -41,6 +42,11 @@
 definePageMeta({ middleware: ['admin'] })
 useHead({ title: 'Administration' })
 
+const { can } = usePermissions()
+const { t } = useI18n()
+
+const canViewRoles = computed(() => can('core.roles.view'))
+
 const tabs = [
     { key: 'clients', label: 'Clients' },
     { key: 'workflows', label: 'Workflows' },
@@ -48,6 +54,7 @@ const tabs = [
     { key: 'priorities', label: 'Priorités' },
     { key: 'tags', label: 'Tags' },
     { key: 'users', label: 'Utilisateurs' },
+    { key: 'roles', label: t('admin.roles.title'), permission: 'core.roles.view' },
     { key: 'gitea', label: 'Gitea' },
     { key: 'bookstack', label: 'BookStack' },
     { key: 'zimbra', label: 'Zimbra' },
@@ -58,5 +65,9 @@ const tabs = [
 
 type TabKey = typeof tabs[number]['key']
 
+const visibleTabs = computed(() =>
+    tabs.filter((tab) => !('permission' in tab) || can(tab.permission)),
+)
+
 const activeTab = ref<TabKey>('clients')
 </script>