Refer permissions by UUID rather than scope.

frontend/src/admin/AdminOrgDetail.vue

@@ -26,6 +26,12 @@ const sortedRoles = computed(() => {
   })
 })
 
+// Get org's grantable permissions as full permission objects (with UUIDs)
+const orgPermissions = computed(() => {
+  const uuidSet = new Set(props.selectedOrg.permissions || [])
+  return props.permissions.filter(p => uuidSet.has(p.uuid))
+})
+
 function permissionDisplayName(scope) {
   return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }
@@ -302,17 +308,17 @@ defineExpose({ focusFirstElement })
           </div>
           <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button" tabindex="0" @keydown.enter="$emit('createRole', selectedOrg)">➕</div>
 
-          <template v-for="pid in selectedOrg.permissions" :key="pid">
-            <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
+          <template v-for="p in orgPermissions" :key="p.uuid">
+            <div class="perm-name" :title="p.scope">{{ p.display_name }}</div>
             <div
               v-for="r in sortedRoles"
-              :key="r.uuid + '-' + pid"
+              :key="r.uuid + '-' + p.uuid"
               class="matrix-cell"
             >
               <input
                 type="checkbox"
-                :checked="r.permissions.includes(pid)"
-                @change="e => toggleRolePermission(r, pid, e.target.checked)"
+                :checked="r.permissions.includes(p.uuid)"
+                @change="e => toggleRolePermission(r, p.uuid, e.target.checked)"
               />
             </div>
             <div class="matrix-cell add-role-cell" />

frontend/src/admin/AdminOverview.vue

@@ -296,19 +296,19 @@ defineExpose({ focusFirstElement })
             <span>{{ o.display_name }}</span>
           </div>
 
-          <template v-for="p in sortedPermissions" :key="p.scope">
+          <template v-for="p in sortedPermissions" :key="p.uuid">
             <div class="perm-name" :title="p.scope">
               <span class="display-text">{{ p.display_name }}</span>
             </div>
             <div
               v-for="o in sortedOrgs"
-              :key="o.uuid + '-' + p.scope"
+              :key="o.uuid + '-' + p.uuid"
               class="matrix-cell"
             >
               <input
                 type="checkbox"
-                :checked="o.permissions.includes(p.scope)"
-                @change="e => $emit('toggleOrgPermission', o, p.scope, e.target.checked)"
+                :checked="o.permissions.includes(p.uuid)"
+                @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
               />
             </div>
           </template>
@@ -329,7 +329,7 @@ defineExpose({ focusFirstElement })
           </tr>
         </thead>
         <tbody>
-          <tr v-for="p in sortedPermissions" :key="p.scope">
+          <tr v-for="p in sortedPermissions" :key="p.uuid">
             <td class="perm-name-cell">
               <div class="perm-title">
                 <span class="display-text">{{ p.display_name }}</span>
@@ -340,7 +340,7 @@ defineExpose({ focusFirstElement })
               </div>
             </td>
             <td class="perm-domain">{{ p.domain || '—' }}</td>
-            <td class="perm-members center">{{ permissionSummary[p.scope]?.userCount || 0 }}</td>
+            <td class="perm-members center">{{ permissionSummary[p.uuid]?.userCount || 0 }}</td>
             <td class="perm-actions center">
               <button @click="$emit('deletePermission', p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
             </td>