RBAC - Système complet de permissions (Backend + Frontend) (#7)

## Résumé

Implémentation complète du système RBAC (Role-Based Access Control) pour Coltura.

### Backend
- Entités Permission et Role avec API Platform CRUD
- PermissionVoter : vérification des permissions effectives (rôles + directes), admin bypass
- Endpoints `PATCH /users/{id}/rbac` pour assigner rôles, permissions directes et isAdmin
- AdminHeadcountGuard : protection contre la suppression du dernier admin
- Commande `app:sync-permissions` pour synchroniser les permissions déclarées par les modules
- Filtrage sidebar par permission RBAC (`permission` key optionnelle dans sidebar.php)
- 115 tests PHPUnit (fonctionnels + unitaires)

### Frontend
- Composable `usePermissions()` avec `can()`, `canAny()`, `canAll()` et admin bypass
- Page `/admin/roles` : DataTable, création/édition via drawer, suppression avec confirmation
- Page `/admin/users` : DataTable, drawer RBAC avec rôles, permissions directes, résumé effectif
- PermissionGroup : checkboxes groupées par module avec "tout sélectionner"
- EffectivePermissions : résumé lecture seule avec badges source ("via Rôle X" / "Direct")
- Warning auto-édition, toggle isAdmin
- Tests Vitest pour usePermissions

### Permissions déclarées
- `core.users.view` — Voir les utilisateurs
- `core.users.manage` — Gérer les utilisateurs
- `core.roles.view` — Voir les rôles RBAC
- `core.roles.manage` — Gérer les rôles et permissions
- `GET /api/permissions` accessible à tout utilisateur authentifié (catalogue read-only)

## Tickets Lesstime

- ERP-23 (#343) — Entités Permission et Role
- ERP-24 (#344) — API CRUD Roles & Permissions
- ERP-25 (#345) — Voter Symfony + usePermissions
- ERP-26 (#346) — Interface Admin : Gestion des Rôles
- ERP-27 (#347) — Interface Admin : Permissions Utilisateur

## Test plan

- [ ] `make db-reset` puis vérifier les fixtures (admin/alice/bob, rôles système)
- [ ] Login admin : sidebar affiche Gestion des rôles + Utilisateurs
- [ ] Login alice : sidebar masque ces onglets (pas de permission)
- [ ] Page /admin/roles : CRUD rôles, permissions groupées, protection rôles système
- [ ] Page /admin/users : assignation rôles + permissions directes, résumé effectif
- [ ] Warning auto-édition quand admin modifie ses propres droits
- [ ] `make test` : 115 tests PHPUnit passent
- [ ] `cd frontend && npm run test` : tests Vitest passent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Matthieu <mtholot19@gmail.com>
Co-authored-by: tristan <tristan@yuno.malio.fr>
Reviewed-on: MALIO-DEV/Coltura#7
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-committed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>

frontend/i18n/locales/fr.json

@@ -22,6 +22,10 @@
         "commercial": {
             "section": "Commercial",
             "suppliers": "Répertoire fournisseurs"
+        },
+        "core": {
+            "roles": "Gestion des rôles",
+            "users": "Utilisateurs"
         }
     },
     "dashboard": {
@@ -56,5 +60,65 @@
         "auth": {
             "logout": "Deconnexion reussie"
         }
+    },
+    "admin": {
+        "roles": {
+            "title": "Gestion des rôles",
+            "newRole": "Nouveau rôle",
+            "editRole": "Modifier le rôle",
+            "createRole": "Créer un rôle",
+            "noRoles": "Aucun rôle configuré",
+            "table": {
+                "label": "Libellé",
+                "code": "Code",
+                "permissions": "Permissions",
+                "system": "Système"
+            },
+            "form": {
+                "label": "Libellé",
+                "code": "Code",
+                "description": "Description",
+                "permissions": "Permissions"
+            },
+            "delete": {
+                "title": "Supprimer le rôle",
+                "message": "Êtes-vous sûr de vouloir supprimer le rôle \"{label}\" ? Cette action est irréversible.",
+                "systemTooltip": "Rôle système non supprimable"
+            },
+            "toast": {
+                "created": "Rôle créé avec succès",
+                "updated": "Rôle mis à jour avec succès",
+                "deleted": "Rôle supprimé avec succès"
+            },
+            "permissions": {
+                "selectAll": "Tout selectionner",
+                "noPermissions": "Aucune permission disponible"
+            }
+        },
+        "users": {
+            "title": "Gestion des utilisateurs",
+            "noUsers": "Aucun utilisateur",
+            "table": {
+                "username": "Nom d'utilisateur",
+                "admin": "Administrateur",
+                "roles": "Roles",
+                "directPermissions": "Permissions directes"
+            },
+            "drawer": {
+                "title": "Permissions de {username}",
+                "selfWarning": "Vous modifiez vos propres droits",
+                "adminToggle": "Administrateur (bypass total)",
+                "rolesSection": "Rôles",
+                "directPermissionsSection": "Permissions directes",
+                "summarySection": "Résumé des permissions effectives",
+                "noEffectivePermissions": "Aucune permission effective",
+                "sourceRole": "via {role}",
+                "sourceDirect": "Direct",
+                "lastAdminWarning": "Impossible de retirer le statut administrateur du dernier admin"
+            },
+            "toast": {
+                "updated": "Permissions mises à jour avec succès"
+            }
+        }
     }
 }

frontend/modules/core/components/EffectivePermissions.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <div v-if="permissions.length === 0" class="text-sm text-neutral-400">
+            {{ t('admin.users.drawer.noEffectivePermissions') }}
+        </div>
+        <div v-else class="divide-y divide-neutral-100 rounded-lg border border-neutral-200">
+            <div
+                v-for="perm in groupedPermissions"
+                :key="perm.module"
+                class="px-4 py-2"
+            >
+                <!-- En-tête du module -->
+                <p class="text-xs font-semibold uppercase text-neutral-400 mb-1">
+                    {{ perm.module }}
+                </p>
+                <div
+                    v-for="item in perm.items"
+                    :key="item.code"
+                    class="flex items-center justify-between py-1"
+                >
+                    <span class="text-sm text-neutral-700">{{ item.label }}</span>
+                    <div class="flex gap-1">
+                        <span
+                            v-for="source in item.sources"
+                            :key="source"
+                            :class="[
+                                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                                source === t('admin.users.drawer.sourceDirect')
+                                    ? 'bg-green-100 text-green-800'
+                                    : 'bg-blue-100 text-blue-800'
+                            ]"
+                        >
+                            {{ source }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { EffectivePermission } from '~/shared/types/rbac'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    permissions: EffectivePermission[]
+}>()
+
+// Grouper par module pour l'affichage
+interface PermissionModuleGroup {
+    module: string
+    items: EffectivePermission[]
+}
+
+const groupedPermissions = computed<PermissionModuleGroup[]>(() => {
+    const groups = new Map<string, EffectivePermission[]>()
+    for (const perm of props.permissions) {
+        const list = groups.get(perm.module) || []
+        list.push(perm)
+        groups.set(perm.module, list)
+    }
+    return Array.from(groups.entries())
+        .map(([module, items]) => ({ module, items }))
+        .sort((a, b) => a.module.localeCompare(b.module))
+})
+</script>

frontend/modules/core/components/PermissionGroup.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="rounded-lg border border-neutral-200 overflow-hidden">
+        <!-- En-tete du groupe avec checkbox "tout selectionner" -->
+        <div class="flex items-center gap-3 bg-neutral-50 px-4 py-3 border-b border-neutral-200">
+            <MalioCheckbox
+                :id="`group-${module}`"
+                :label="moduleLabel"
+                :model-value="allSelected"
+                label-class="font-semibold text-sm text-neutral-700 capitalize"
+                @update:model-value="toggleAll"
+            />
+            <span class="ml-auto text-xs text-neutral-400">
+                {{ selectedCount }}/{{ permissions.length }}
+            </span>
+        </div>
+
+        <!-- Liste des permissions individuelles -->
+        <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-2">
+            <MalioCheckbox
+                v-for="perm in permissions"
+                :key="perm.id"
+                :id="`perm-${perm.id}`"
+                :label="perm.label"
+                :model-value="selectedIds.has(perm.id)"
+                label-class="text-sm text-neutral-600"
+                @update:model-value="(val: boolean) => togglePermission(perm.id, val)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Permission } from '~/shared/types/rbac'
+
+const props = defineProps<{
+    module: string
+    moduleLabel: string
+    permissions: Permission[]
+    selectedIds: Set<number>
+}>()
+
+const emit = defineEmits<{
+    toggle: [permissionId: number, selected: boolean]
+    toggleAll: [module: string, selected: boolean]
+}>()
+
+// Nombre de permissions selectionnees dans ce groupe
+const selectedCount = computed(() =>
+    props.permissions.filter(p => props.selectedIds.has(p.id)).length
+)
+
+// Vrai si toutes les permissions du groupe sont selectionnees
+const allSelected = computed(() =>
+    props.permissions.length > 0 && selectedCount.value === props.permissions.length
+)
+
+// Emet l'evenement de bascule pour une permission individuelle
+function togglePermission(id: number, selected: boolean) {
+    emit('toggle', id, selected)
+}
+
+// Emet l'evenement de bascule pour toutes les permissions du groupe
+function toggleAll(selected: boolean) {
+    emit('toggleAll', props.module, selected)
+}
+</script>

frontend/modules/core/components/RoleDeleteModal.vue

@@ -0,0 +1,79 @@
+<template>
+    <Teleport to="body">
+        <Transition name="fade">
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+                @click.self="cancel"
+            >
+                <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-semibold text-neutral-900">
+                        {{ t('admin.roles.delete.title') }}
+                    </h3>
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ t('admin.roles.delete.message', { label: roleLabel }) }}
+                    </p>
+                    <div class="mt-6 flex justify-end gap-3">
+                        <MalioButton
+                            :label="t('common.cancel')"
+                            variant="secondary"
+                            @click="cancel"
+                        />
+                        <MalioButton
+                            :label="t('common.delete')"
+                            variant="danger"
+                            icon-name="mdi:delete-outline"
+                            icon-position="left"
+                            :disabled="loading"
+                            @click="confirm"
+                        />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+defineProps<{
+    modelValue: boolean
+    roleLabel: string
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    confirm: []
+}>()
+
+// Ferme la modale sans confirmer
+function cancel() {
+    emit('update:modelValue', false)
+}
+
+// Emet l'evenement de confirmation de suppression
+function confirm() {
+    emit('confirm')
+}
+
+// Fermer la modale avec la touche Escape
+function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') cancel()
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

frontend/modules/core/components/RoleDrawer.vue

@@ -0,0 +1,224 @@
+<template>
+    <MalioDrawer
+        :model-value="modelValue"
+        :title="isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole')"
+        drawer-class="w-full max-w-lg"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <form class="flex flex-col gap-6 p-4" @submit.prevent="handleSave">
+            <!-- Champs du role -->
+            <MalioInputText
+                v-model="form.label"
+                :label="t('admin.roles.form.label')"
+                input-class="w-full"
+                required
+            />
+
+            <MalioInputText
+                v-model="form.code"
+                :label="t('admin.roles.form.code')"
+                input-class="w-full"
+                required
+                :readonly="isEditMode"
+            />
+
+            <MalioInputTextArea
+                v-model="form.description"
+                :label="t('admin.roles.form.description')"
+                input-class="w-full"
+            />
+
+            <!-- Permissions groupees par module -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.roles.form.permissions') }}
+                </h4>
+                <div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
+                    {{ t('admin.roles.permissions.noPermissions') }}
+                </div>
+                <div class="flex flex-col gap-4">
+                    <PermissionGroup
+                        v-for="group in permissionsByModule"
+                        :key="group.module"
+                        :module="group.module"
+                        :module-label="group.module"
+                        :permissions="group.permissions"
+                        :selected-ids="selectedPermissionIds"
+                        @toggle="handleTogglePermission"
+                        @toggle-all="handleToggleAll"
+                    />
+                </div>
+            </div>
+
+            <!-- Boutons -->
+            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
+                <MalioButton
+                    v-if="isEditMode"
+                    :label="t('common.delete')"
+                    variant="danger"
+                    icon-name="mdi:delete-outline"
+                    icon-position="left"
+                    :disabled="role?.isSystem"
+                    @click="emit('delete')"
+                />
+                <MalioButton
+                    v-else
+                    :label="t('common.cancel')"
+                    variant="tertiary"
+                    @click="emit('update:modelValue', false)"
+                />
+                <MalioButton
+                    :label="t('common.save')"
+                    variant="primary"
+                    :disabled="saving"
+                    @click="handleSave"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Permission, Role } from '~/shared/types/rbac'
+
+interface PermissionModule {
+    module: string
+    permissions: Permission[]
+}
+
+const { t } = useI18n()
+const api = useApi()
+
+const props = defineProps<{
+    modelValue: boolean
+    role: Role | null
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    saved: []
+    delete: []
+}>()
+
+const saving = ref(false)
+const allPermissions = ref<Permission[]>([])
+
+const form = ref({
+    label: '',
+    code: '',
+    description: '',
+})
+
+const selectedPermissionIds = ref(new Set<number>())
+
+const isEditMode = computed(() => props.role !== null)
+
+// Grouper les permissions par module
+const permissionsByModule = computed<PermissionModule[]>(() => {
+    const groups = new Map<string, Permission[]>()
+    for (const perm of allPermissions.value) {
+        if (perm.orphan) continue
+        const list = groups.get(perm.module) || []
+        list.push(perm)
+        groups.set(perm.module, list)
+    }
+    return Array.from(groups.entries())
+        .map(([module, permissions]) => ({ module, permissions }))
+        .sort((a, b) => a.module.localeCompare(b.module))
+})
+
+// Charger les permissions au montage
+async function loadPermissions() {
+    const data = await api.get<{ member: Permission[] }>(
+        '/permissions',
+        { 'orphan': false, itemsPerPage: 999 },
+        { toast: false },
+    )
+    allPermissions.value = data.member
+}
+
+// Remplir le formulaire quand le role change
+watch(() => props.role, (role) => {
+    if (role) {
+        form.value.label = role.label
+        form.value.code = role.code
+        form.value.description = role.description || ''
+        selectedPermissionIds.value = new Set(role.permissions.map(p => {
+            // L'API peut retourner des objets Permission ou des IRIs string
+            if (typeof p === 'string') {
+                return Number(p.split('/').pop())
+            }
+            return p.id
+        }))
+    } else {
+        form.value.label = ''
+        form.value.code = ''
+        form.value.description = ''
+        selectedPermissionIds.value = new Set()
+    }
+}, { immediate: true })
+
+// Charger les permissions quand le drawer s'ouvre
+watch(() => props.modelValue, (open) => {
+    if (open) loadPermissions()
+})
+
+// Basculer une permission individuelle
+function handleTogglePermission(id: number, selected: boolean) {
+    const ids = new Set(selectedPermissionIds.value)
+    if (selected) {
+        ids.add(id)
+    } else {
+        ids.delete(id)
+    }
+    selectedPermissionIds.value = ids
+}
+
+// Basculer toutes les permissions d'un module
+function handleToggleAll(module: string, selected: boolean) {
+    const ids = new Set(selectedPermissionIds.value)
+    const group = permissionsByModule.value.find(g => g.module === module)
+    if (!group) return
+    for (const perm of group.permissions) {
+        if (selected) {
+            ids.add(perm.id)
+        } else {
+            ids.delete(perm.id)
+        }
+    }
+    selectedPermissionIds.value = ids
+}
+
+// Sauvegarder le role (creation ou edition)
+async function handleSave() {
+    saving.value = true
+    try {
+        const permissions = Array.from(selectedPermissionIds.value).map(id => `/api/permissions/${id}`)
+
+        if (isEditMode.value && props.role) {
+            // Le code est immuable apres creation (garde backend RoleProcessor)
+            await api.patch(`/roles/${props.role.id}`, {
+                label: form.value.label,
+                description: form.value.description || null,
+                permissions,
+            }, {
+                toastSuccessMessage: t('admin.roles.toast.updated'),
+            })
+        } else {
+            await api.post('/roles', {
+                label: form.value.label,
+                code: form.value.code,
+                description: form.value.description || null,
+                permissions,
+            }, {
+                toastSuccessMessage: t('admin.roles.toast.created'),
+            })
+        }
+
+        emit('saved')
+        emit('update:modelValue', false)
+    } finally {
+        saving.value = false
+    }
+}
+</script>

frontend/modules/core/components/UserRbacDrawer.vue

@@ -0,0 +1,259 @@
+<template>
+    <MalioDrawer
+        :model-value="modelValue"
+        :title="t('admin.users.drawer.title', { username: user?.username ?? '' })"
+        drawer-class="w-full max-w-lg"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <div class="flex flex-col gap-6 p-4">
+            <!-- Avertissement auto-edition -->
+            <div
+                v-if="isSelfEdit"
+                class="flex items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800"
+            >
+                <Icon name="mdi:alert-outline" class="size-5 shrink-0" />
+                {{ t('admin.users.drawer.selfWarning') }}
+            </div>
+
+            <!-- Toggle Administrateur -->
+            <MalioCheckbox
+                id="admin-toggle"
+                :label="t('admin.users.drawer.adminToggle')"
+                :model-value="form.isAdmin"
+                label-class="font-semibold text-sm text-neutral-700"
+                @update:model-value="form.isAdmin = $event"
+            />
+
+            <!-- Section Roles -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.rolesSection') }}
+                </h4>
+                <div class="flex flex-col gap-2">
+                    <MalioCheckbox
+                        v-for="role in allRoles"
+                        :key="role.id"
+                        :id="`role-${role.id}`"
+                        :label="role.label"
+                        :model-value="selectedRoleIds.has(role.id)"
+                        label-class="text-sm text-neutral-600"
+                        @update:model-value="(val: boolean) => toggleRole(role.id, val)"
+                    />
+                </div>
+            </div>
+
+            <!-- Section Permissions directes -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.directPermissionsSection') }}
+                </h4>
+                <div v-if="permissionsByModule.length === 0" class="text-sm text-neutral-400">
+                    {{ t('admin.roles.permissions.noPermissions') }}
+                </div>
+                <div class="flex flex-col gap-4">
+                    <PermissionGroup
+                        v-for="group in permissionsByModule"
+                        :key="group.module"
+                        :module="group.module"
+                        :module-label="group.module"
+                        :permissions="group.permissions"
+                        :selected-ids="selectedDirectPermissionIds"
+                        @toggle="handleTogglePermission"
+                        @toggle-all="handleToggleAll"
+                    />
+                </div>
+            </div>
+
+            <!-- Section Resume permissions effectives -->
+            <div>
+                <h4 class="mb-3 text-sm font-semibold text-neutral-700">
+                    {{ t('admin.users.drawer.summarySection') }}
+                </h4>
+                <EffectivePermissions :permissions="effectivePermissions" />
+            </div>
+
+            <!-- Boutons -->
+            <div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
+                <MalioButton
+                    :label="t('common.cancel')"
+                    variant="tertiary"
+                    @click="emit('update:modelValue', false)"
+                />
+                <MalioButton
+                    :label="t('common.save')"
+                    variant="primary"
+                    :disabled="saving"
+                    @click="handleSave"
+                />
+            </div>
+        </div>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Permission, Role, UserListItem, EffectivePermission } from '~/shared/types/rbac'
+
+interface PermissionModule {
+    module: string
+    permissions: Permission[]
+}
+
+const { t } = useI18n()
+const api = useApi()
+const auth = useAuthStore()
+
+const props = defineProps<{
+    modelValue: boolean
+    user: UserListItem | null
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    saved: []
+}>()
+
+const saving = ref(false)
+const allRoles = ref<Role[]>([])
+const allPermissions = ref<Permission[]>([])
+
+const form = ref({ isAdmin: false })
+const selectedRoleIds = ref(new Set<number>())
+const selectedDirectPermissionIds = ref(new Set<number>())
+
+// Detecter l'auto-edition
+const isSelfEdit = computed(() => props.user?.id === auth.user?.id)
+
+// Extraire un ID depuis une IRI API Platform
+function iriToId(iri: string): number {
+    return Number(iri.split('/').pop())
+}
+
+// Grouper les permissions par module (pour les checkboxes)
+const permissionsByModule = computed<PermissionModule[]>(() => {
+    const groups = new Map<string, Permission[]>()
+    for (const perm of allPermissions.value) {
+        if (perm.orphan) continue
+        const list = groups.get(perm.module) || []
+        list.push(perm)
+        groups.set(perm.module, list)
+    }
+    return Array.from(groups.entries())
+        .map(([module, permissions]) => ({ module, permissions }))
+        .sort((a, b) => a.module.localeCompare(b.module))
+})
+
+// Calculer les permissions effectives avec leurs sources
+const effectivePermissions = computed<EffectivePermission[]>(() => {
+    const permMap = new Map<number, Permission>()
+    for (const p of allPermissions.value) {
+        if (!p.orphan) permMap.set(p.id, p)
+    }
+
+    // Construire la map permissionId -> sources[]
+    const result = new Map<number, string[]>()
+
+    // Permissions heritees des roles
+    for (const roleId of selectedRoleIds.value) {
+        const role = allRoles.value.find(r => r.id === roleId)
+        if (!role) continue
+        for (const p of role.permissions) {
+            const pid = typeof p === 'string' ? iriToId(p) : p.id
+            const sources = result.get(pid) || []
+            sources.push(t('admin.users.drawer.sourceRole', { role: role.label }))
+            result.set(pid, sources)
+        }
+    }
+
+    // Permissions directes
+    for (const pid of selectedDirectPermissionIds.value) {
+        const sources = result.get(pid) || []
+        sources.push(t('admin.users.drawer.sourceDirect'))
+        result.set(pid, sources)
+    }
+
+    // Construire la liste finale
+    return Array.from(result.entries())
+        .map(([pid, sources]) => {
+            const perm = permMap.get(pid)
+            if (!perm) return null
+            return { code: perm.code, label: perm.label, module: perm.module, sources }
+        })
+        .filter((p): p is EffectivePermission => p !== null)
+        .sort((a, b) => a.code.localeCompare(b.code))
+})
+
+// Charger roles et permissions
+async function loadData() {
+    const [rolesData, permsData] = await Promise.all([
+        api.get<{ member: Role[] }>('/roles', {}, { toast: false }),
+        api.get<{ member: Permission[] }>('/permissions', { orphan: false, itemsPerPage: 999 }, { toast: false }),
+    ])
+    allRoles.value = rolesData.member
+    allPermissions.value = permsData.member
+}
+
+// Remplir le formulaire quand le user change
+watch(() => props.user, (user) => {
+    if (user) {
+        form.value.isAdmin = user.isAdmin
+        selectedRoleIds.value = new Set(user.roles.map(iriToId))
+        selectedDirectPermissionIds.value = new Set(user.directPermissions.map(iriToId))
+    } else {
+        form.value.isAdmin = false
+        selectedRoleIds.value = new Set()
+        selectedDirectPermissionIds.value = new Set()
+    }
+}, { immediate: true })
+
+// Charger les donnees quand le drawer s'ouvre
+watch(() => props.modelValue, (open) => {
+    if (open) loadData()
+})
+
+function toggleRole(id: number, selected: boolean) {
+    const ids = new Set(selectedRoleIds.value)
+    if (selected) ids.add(id)
+    else ids.delete(id)
+    selectedRoleIds.value = ids
+}
+
+function handleTogglePermission(id: number, selected: boolean) {
+    const ids = new Set(selectedDirectPermissionIds.value)
+    if (selected) ids.add(id)
+    else ids.delete(id)
+    selectedDirectPermissionIds.value = ids
+}
+
+function handleToggleAll(module: string, selected: boolean) {
+    const ids = new Set(selectedDirectPermissionIds.value)
+    const group = permissionsByModule.value.find(g => g.module === module)
+    if (!group) return
+    for (const perm of group.permissions) {
+        if (selected) ids.add(perm.id)
+        else ids.delete(perm.id)
+    }
+    selectedDirectPermissionIds.value = ids
+}
+
+async function handleSave() {
+    if (!props.user) return
+    saving.value = true
+    try {
+        await api.patch(`/users/${props.user.id}/rbac`, {
+            isAdmin: form.value.isAdmin,
+            roles: Array.from(selectedRoleIds.value).map(id => `/api/roles/${id}`),
+            directPermissions: Array.from(selectedDirectPermissionIds.value).map(id => `/api/permissions/${id}`),
+        }, {
+            toastSuccessMessage: t('admin.users.toast.updated'),
+        })
+        // Rafraichir les donnees du user courant si auto-edition
+        if (isSelfEdit.value) {
+            await auth.refreshUser()
+        }
+        emit('saved')
+        emit('update:modelValue', false)
+    } finally {
+        saving.value = false
+    }
+}
+</script>

frontend/modules/core/pages/admin/roles.vue

@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <!-- En-tete -->
+        <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
+                {{ t('admin.roles.title') }}
+            </h1>
+            <MalioButton
+                v-if="can('core.roles.manage')"
+                :label="t('admin.roles.newRole')"
+                icon-name="mdi:plus"
+                icon-position="left"
+                @click="openCreateDrawer"
+            />
+        </div>
+
+        <!-- Table des roles -->
+        <MalioDataTable
+            class="mt-6"
+            :columns="columns"
+            :items="roleItems"
+            :total-items="roles.length"
+            :row-clickable="canManage"
+            :empty-message="t('admin.roles.noRoles')"
+            @row-click="onRowClick"
+        >
+            <template #cell-code="{ item }">
+                <span class="font-mono text-xs">{{ item.code }}</span>
+            </template>
+            <template #cell-permissions="{ item }">
+                {{ item.permissions }}
+            </template>
+            <template #cell-system="{ item }">
+                <span
+                    v-if="item.isSystem"
+                    class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
+                >
+                    {{ t('admin.roles.table.system') }}
+                </span>
+            </template>
+        </MalioDataTable>
+
+        <!-- Drawer creation/edition -->
+        <RoleDrawer
+            v-model="drawerOpen"
+            :role="selectedRole"
+            @saved="onRoleSaved"
+            @delete="onDeleteRequest"
+        />
+
+        <!-- Modale de suppression -->
+        <RoleDeleteModal
+            v-model="deleteModalOpen"
+            :role-label="roleToDelete?.label ?? ''"
+            :loading="deleting"
+            @confirm="handleDelete"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Role } from '~/shared/types/rbac'
+
+const { t } = useI18n()
+const api = useApi()
+const { can } = usePermissions()
+const canManage = computed(() => can('core.roles.manage'))
+
+useHead({ title: t('admin.roles.title') })
+
+const roles = ref<Role[]>([])
+const loading = ref(false)
+
+const columns = [
+    { key: 'label', label: t('admin.roles.table.label') },
+    { key: 'code', label: t('admin.roles.table.code') },
+    { key: 'permissions', label: t('admin.roles.table.permissions') },
+    { key: 'system', label: t('admin.roles.table.system') },
+]
+
+// Transformer les roles en items compatibles MalioDataTable
+const roleItems = computed(() =>
+    roles.value.map(role => ({
+        id: role.id,
+        label: role.label,
+        code: role.code,
+        permissions: role.permissions.length,
+        isSystem: role.isSystem,
+        system: '', // colonne geree par le slot
+    }))
+)
+
+function getRoleById(id: number): Role | undefined {
+    return roles.value.find(r => r.id === id)
+}
+
+function onRowClick(item: Record<string, unknown>) {
+    const role = getRoleById(item.id as number)
+    if (role) openEditDrawer(role)
+}
+const drawerOpen = ref(false)
+const selectedRole = ref<Role | null>(null)
+const deleteModalOpen = ref(false)
+const roleToDelete = ref<Role | null>(null)
+const deleting = ref(false)
+
+// Charger la liste des roles
+async function loadRoles() {
+    loading.value = true
+    try {
+        const data = await api.get<{ member: Role[] }>(
+            '/roles',
+            {},
+            { toast: false },
+        )
+        roles.value = data.member
+    } finally {
+        loading.value = false
+    }
+}
+
+function openCreateDrawer() {
+    selectedRole.value = null
+    drawerOpen.value = true
+}
+
+function openEditDrawer(role: Role) {
+    selectedRole.value = role
+    drawerOpen.value = true
+}
+
+function onDeleteRequest() {
+    if (!selectedRole.value || selectedRole.value.isSystem) return
+    roleToDelete.value = selectedRole.value
+    deleteModalOpen.value = true
+}
+
+async function handleDelete() {
+    if (!roleToDelete.value) return
+    deleting.value = true
+    try {
+        await api.delete(`/roles/${roleToDelete.value.id}`, {}, {
+            toastSuccessMessage: t('admin.roles.toast.deleted'),
+        })
+        deleteModalOpen.value = false
+        roleToDelete.value = null
+        drawerOpen.value = false
+        await loadRoles()
+    } finally {
+        deleting.value = false
+    }
+}
+
+function onRoleSaved() {
+    loadRoles()
+}
+
+onMounted(() => {
+    loadRoles()
+})
+</script>

frontend/modules/core/pages/admin/users.vue

@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <!-- En-tete -->
+        <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
+                {{ t('admin.users.title') }}
+            </h1>
+        </div>
+
+        <!-- Table des utilisateurs -->
+        <MalioDataTable
+            class="mt-6"
+            :columns="columns"
+            :items="userItems"
+            :total-items="users.length"
+            :row-clickable="canManage"
+            :empty-message="t('admin.users.noUsers')"
+            @row-click="onRowClick"
+        >
+            <template #cell-admin="{ item }">
+                <span
+                    v-if="item.admin"
+                    class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800"
+                >
+                    {{ t('admin.users.table.admin') }}
+                </span>
+            </template>
+        </MalioDataTable>
+
+        <!-- Drawer RBAC -->
+        <UserRbacDrawer
+            v-model="drawerOpen"
+            :user="selectedUser"
+            @saved="onUserSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { UserListItem } from '~/shared/types/rbac'
+
+const { t } = useI18n()
+const api = useApi()
+const { can } = usePermissions()
+
+useHead({ title: t('admin.users.title') })
+
+const canManage = computed(() => can('core.users.manage'))
+
+const users = ref<UserListItem[]>([])
+const loading = ref(false)
+const drawerOpen = ref(false)
+const selectedUser = ref<UserListItem | null>(null)
+
+const columns = [
+    { key: 'username', label: t('admin.users.table.username') },
+    { key: 'admin', label: t('admin.users.table.admin') },
+    { key: 'roles', label: t('admin.users.table.roles') },
+    { key: 'directPermissions', label: t('admin.users.table.directPermissions') },
+]
+
+const userItems = computed(() =>
+    users.value.map(user => ({
+        id: user.id,
+        username: user.username,
+        admin: user.isAdmin,
+        roles: user.roles.length,
+        directPermissions: user.directPermissions.length,
+    }))
+)
+
+async function loadUsers() {
+    loading.value = true
+    try {
+        const data = await api.get<{ member: UserListItem[] }>(
+            '/users',
+            {},
+            { toast: false },
+        )
+        users.value = data.member
+    } finally {
+        loading.value = false
+    }
+}
+
+function getUserById(id: number): UserListItem | undefined {
+    return users.value.find(u => u.id === id)
+}
+
+function openDrawer(user: UserListItem) {
+    selectedUser.value = user
+    drawerOpen.value = true
+}
+
+function onRowClick(item: Record<string, unknown>) {
+    const user = getUserById(item.id as number)
+    if (user) openDrawer(user)
+}
+
+function onUserSaved() {
+    loadUsers()
+}
+
+onMounted(() => {
+    loadUsers()
+})
+</script>

frontend/package.json

@@ -10,10 +10,12 @@
     "postinstall": "nuxt prepare",
     "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.2.3",
+    "@malio/layer-ui": "^1.3.0",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",
@@ -28,8 +30,11 @@
     "@nuxt/eslint-config": "^1.9.0",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.36.0",
     "eslint-plugin-vue": "^10.5.0",
+    "happy-dom": "^20.9.0",
+    "vitest": "^4.1.4",
     "vue-eslint-parser": "^10.2.0"
   }
 }

frontend/shared/composables/__tests__/usePermissions.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { usePermissions } from '../usePermissions'
+
+// Mock du store auth : le composable ne depend que de auth.user.
+const mockUser = vi.hoisted(() => ({
+    value: null as { isAdmin: boolean; effectivePermissions: string[] } | null,
+}))
+
+vi.mock('~/shared/stores/auth', () => ({
+    useAuthStore: () => ({
+        get user() {
+            return mockUser.value
+        },
+    }),
+}))
+
+describe('usePermissions', () => {
+    beforeEach(() => {
+        mockUser.value = null
+    })
+
+    it('refuse toute permission quand aucun utilisateur n\'est connecte', () => {
+        const { can, canAny, canAll } = usePermissions()
+        expect(can('core.users.view')).toBe(false)
+        expect(canAny(['core.users.view', 'core.roles.view'])).toBe(false)
+        expect(canAll(['core.users.view'])).toBe(false)
+    })
+
+    it('accorde toutes les permissions a un admin via le bypass', () => {
+        mockUser.value = { isAdmin: true, effectivePermissions: [] }
+        const { can, canAll } = usePermissions()
+        expect(can('core.users.view')).toBe(true)
+        expect(can('module.inexistante.action')).toBe(true)
+        expect(canAll(['a.b.c', 'd.e.f'])).toBe(true)
+    })
+
+    it('accorde une permission presente dans effectivePermissions', () => {
+        mockUser.value = { isAdmin: false, effectivePermissions: ['core.users.view'] }
+        const { can } = usePermissions()
+        expect(can('core.users.view')).toBe(true)
+    })
+
+    it('refuse une permission absente pour un non-admin', () => {
+        mockUser.value = { isAdmin: false, effectivePermissions: ['core.users.view'] }
+        const { can } = usePermissions()
+        expect(can('core.roles.manage')).toBe(false)
+    })
+
+    it('canAny retourne true si au moins un code matche', () => {
+        mockUser.value = { isAdmin: false, effectivePermissions: ['core.users.view'] }
+        const { canAny } = usePermissions()
+        expect(canAny(['core.roles.manage', 'core.users.view'])).toBe(true)
+        expect(canAny(['core.roles.manage', 'core.permissions.view'])).toBe(false)
+    })
+
+    it('canAll retourne true uniquement si tous les codes matchent', () => {
+        mockUser.value = {
+            isAdmin: false,
+            effectivePermissions: ['core.users.view', 'core.roles.view'],
+        }
+        const { canAll } = usePermissions()
+        expect(canAll(['core.users.view', 'core.roles.view'])).toBe(true)
+        expect(canAll(['core.users.view', 'core.roles.manage'])).toBe(false)
+    })
+})

frontend/shared/composables/usePermissions.ts

@@ -0,0 +1,38 @@
+import { useAuthStore } from '~/shared/stores/auth'
+
+/**
+ * Composable d'autorisation cote front.
+ *
+ * Source de verite : `useAuthStore().user`, qui porte le payload /api/me
+ * incluant `isAdmin` et `effectivePermissions` (tableau trie sans doublons).
+ *
+ * Regle de bypass dupliquee avec `PermissionVoter` (back) :
+ *   si `user.isAdmin === true`, toutes les permissions sont accordees.
+ * Cette duplication est volontaire pour offrir un feedback UI immediat
+ * sans aller-retour serveur. Si la regle de bypass change cote back
+ * (decision architecturale #343 section 11), ce composable DOIT evoluer
+ * en meme temps.
+ *
+ * Stateless : aucun ref module-level, tout passe par Pinia. Le reset est
+ * assure automatiquement par `authStore.logout()` qui efface `user`.
+ */
+export function usePermissions() {
+    const auth = useAuthStore()
+
+    function can(code: string): boolean {
+        const user = auth.user
+        if (!user) return false
+        if (user.isAdmin) return true
+        return user.effectivePermissions.includes(code)
+    }
+
+    function canAny(codes: string[]): boolean {
+        return codes.some(can)
+    }
+
+    function canAll(codes: string[]): boolean {
+        return codes.every(can)
+    }
+
+    return { can, canAny, canAll }
+}

frontend/shared/types/rbac.ts

@@ -0,0 +1,31 @@
+export interface Permission {
+    id: number
+    code: string
+    label: string
+    module: string
+    orphan: boolean
+}
+
+export interface Role {
+    id: number
+    code: string
+    label: string
+    description: string | null
+    isSystem: boolean
+    permissions: (Permission | string)[]
+}
+
+export interface UserListItem {
+    id: number
+    username: string
+    isAdmin: boolean
+    roles: string[]
+    directPermissions: string[]
+}
+
+export interface EffectivePermission {
+    code: string
+    label: string
+    module: string
+    sources: string[]
+}

frontend/shared/types/user-data.ts

@@ -2,4 +2,8 @@ export interface UserData {
     id: number
     username: string
     roles: string[]
+    /** Vrai si l'utilisateur a le bypass admin total (voir ticket #343 section 11). */
+    isAdmin: boolean
+    /** Codes de permission effectifs de l'utilisateur, tries alphabetiquement, sans doublon. */
+    effectivePermissions: string[]
 }

frontend/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import { fileURLToPath } from 'node:url'
+
+export default defineConfig({
+    test: {
+        environment: 'happy-dom',
+        globals: true,
+    },
+    resolve: {
+        alias: {
+            '~': fileURLToPath(new URL('./', import.meta.url)),
+            '@': fileURLToPath(new URL('./', import.meta.url)),
+        },
+    },
+})