feat(frontend) : ERP-27 - EffectivePermissions component

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/modules/core/components/EffectivePermissions.vue

@@ -0,0 +1,73 @@
+<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">
+const { t } = useI18n()
+
+interface EffectivePermission {
+    code: string
+    label: string
+    module: string
+    sources: string[]
+}
+
+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>