From bd4e22eafb32fb8db61708e1ebe32aa8c8cd4b34 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 24 Mar 2026 15:22:56 +0100
Subject: [PATCH] refactor: use SplitPane and EntityList in Admin RBAC tabs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Admin/UserManagement/GroupsTab.tsx  | 361 +++++++------
 src/pages/Admin/UserManagement/RolesTab.tsx   | 245 +++++----
 .../UserManagement/UserManagement.module.css  |  78 ---
 src/pages/Admin/UserManagement/UsersTab.tsx   | 477 +++++++++---------
 4 files changed, 519 insertions(+), 642 deletions(-)

diff --git a/src/pages/Admin/UserManagement/GroupsTab.tsx b/src/pages/Admin/UserManagement/GroupsTab.tsx
index 4714ea9..480375c 100644
--- a/src/pages/Admin/UserManagement/GroupsTab.tsx
+++ b/src/pages/Admin/UserManagement/GroupsTab.tsx
@@ -11,8 +11,10 @@ import { InlineEdit } from '../../../design-system/primitives/InlineEdit/InlineE
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
-import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, getChildGroups, type MockGroup } from './rbacMocks'
+import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, type MockGroup } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function GroupsTab() {
@@ -83,207 +85,190 @@ export function GroupsTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search groups..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add group
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
-              {duplicateGroupName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Group name already exists</span>}
-              <Select
-                options={parentOptions}
-                value={newParent}
-                onChange={(e) => setNewParent(e.target.value)}
-              />
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateGroupName}>Create</Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Groups">
-            {filtered.map((group) => {
-              const groupChildren = groups.filter((g) => g.parentId === group.id)
-              const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
-              const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
-              return (
-                <div
-                  key={group.id}
-                  className={`${styles.entityItem} ${selectedId === group.id ? styles.entityItemSelected : ''}`}
-                  onClick={() => setSelectedId(group.id)}
-                  role="option"
-                  tabIndex={0}
-                  aria-selected={selectedId === group.id}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(group.id) } }}
-                >
-                  <Avatar name={group.name} size="sm" />
-                  <div className={styles.entityInfo}>
-                    <div className={styles.entityName}>{group.name}</div>
-                    <div className={styles.entityMeta}>
-                      {groupParent ? `Child of ${groupParent.name}` : 'Top-level'}
-                      {' · '}{groupChildren.length} children · {groupMembers.length} members
-                    </div>
-                    <div className={styles.entityTags}>
-                      {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
-                    </div>
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+                {duplicateGroupName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Group name already exists</span>}
+                <Select
+                  options={parentOptions}
+                  value={newParent}
+                  onChange={(e) => setNewParent(e.target.value)}
+                />
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateGroupName}>Create</Button>
                 </div>
-              )
-            })}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No groups match your search</div>
+              </div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.name} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>
-                    {selected.builtIn ? selected.name : (
-                      <InlineEdit
-                        value={selected.name}
-                        onSave={(v) => updateGroup(selected.id, { name: v })}
-                      />
-                    )}
-                  </div>
-                  <div className={styles.detailEmail}>
-                    {parent ? `${parent.name} > ${selected.name}` : 'Top-level group'}
-                    {selected.builtIn && ' (built-in)'}
-                  </div>
+            <EntityList
+              items={filtered}
+              renderItem={(group) => {
+                const groupChildren = groups.filter((g) => g.parentId === group.id)
+                const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
+                const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
+                return (
+                  <>
+                    <Avatar name={group.name} size="sm" />
+                    <div className={styles.entityInfo}>
+                      <div className={styles.entityName}>{group.name}</div>
+                      <div className={styles.entityMeta}>
+                        {groupParent ? `Child of ${groupParent.name}` : 'Top-level'}
+                        {' · '}{groupChildren.length} children · {groupMembers.length} members
+                      </div>
+                      <div className={styles.entityTags}>
+                        {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
+                      </div>
+                    </div>
+                  </>
+                )
+              }}
+              getItemId={(group) => group.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search groups..."
+              onSearch={setSearch}
+              addLabel="+ Add group"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No groups match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.name} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>
+                  {selected.builtIn ? selected.name : (
+                    <InlineEdit
+                      value={selected.name}
+                      onSave={(v) => updateGroup(selected.id, { name: v })}
+                    />
+                  )}
+                </div>
+                <div className={styles.detailEmail}>
+                  {parent ? `${parent.name} > ${selected.name}` : 'Top-level group'}
+                  {selected.builtIn && ' (built-in)'}
                 </div>
-                <Button
-                  size="sm"
-                  variant="danger"
-                  onClick={() => setDeleteTarget(selected)}
-                  disabled={selected.builtIn}
-                >
-                  Delete
-                </Button>
               </div>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => setDeleteTarget(selected)}
+                disabled={selected.builtIn}
+              >
+                Delete
+              </Button>
+            </div>
 
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.id}</MonoText>
-              </div>
+            <div className={styles.metaGrid}>
+              <span className={styles.metaLabel}>ID</span>
+              <MonoText size="xs">{selected.id}</MonoText>
+            </div>
 
-              {parent && (
-                <>
-                  <SectionHeader>Member of</SectionHeader>
-                  <div className={styles.sectionTags}>
-                    <Tag label={parent.name} color="auto" />
-                  </div>
-                </>
-              )}
+            {parent && (
+              <>
+                <SectionHeader>Member of</SectionHeader>
+                <div className={styles.sectionTags}>
+                  <Tag label={parent.name} color="auto" />
+                </div>
+              </>
+            )}
 
-              <SectionHeader>Members (direct)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {members.map((u) => (
-                  <Tag
-                    key={u.id}
-                    label={u.displayName}
-                    color="auto"
-                    onRemove={() => {
-                      // Remove this group from the user's directGroups
-                      // Note: in mock data we can't easily update MOCK_USERS, so this is visual only
-                      toast({ title: 'Member removed', description: u.displayName, variant: 'success' })
-                    }}
-                  />
-                ))}
-                {members.length === 0 && <span className={styles.inheritedNote}>(no members)</span>}
-                <MultiSelect
-                  options={availableMembers}
-                  value={[]}
-                  onChange={(ids) => {
-                    toast({ title: `${ids.length} member(s) added`, variant: 'success' })
+            <SectionHeader>Members (direct)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {members.map((u) => (
+                <Tag
+                  key={u.id}
+                  label={u.displayName}
+                  color="auto"
+                  onRemove={() => {
+                    // Remove this group from the user's directGroups
+                    // Note: in mock data we can't easily update MOCK_USERS, so this is visual only
+                    toast({ title: 'Member removed', description: u.displayName, variant: 'success' })
                   }}
-                  placeholder="+ Add"
                 />
-              </div>
-              {children.length > 0 && (
-                <span className={styles.inheritedNote}>
-                  + all members of {children.map((c) => c.name).join(', ')}
-                </span>
-              )}
+              ))}
+              {members.length === 0 && <span className={styles.inheritedNote}>(no members)</span>}
+              <MultiSelect
+                options={availableMembers}
+                value={[]}
+                onChange={(ids) => {
+                  toast({ title: `${ids.length} member(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+            {children.length > 0 && (
+              <span className={styles.inheritedNote}>
+                + all members of {children.map((c) => c.name).join(', ')}
+              </span>
+            )}
 
-              <SectionHeader>Child groups</SectionHeader>
-              <div className={styles.sectionTags}>
-                {children.map((c) => (
-                  <Tag
-                    key={c.id}
-                    label={c.name}
-                    color="success"
-                    onRemove={() => {
-                      updateGroup(c.id, { parentId: null })
-                      toast({ title: 'Child group removed', description: c.name, variant: 'success' })
-                    }}
-                  />
-                ))}
-                {children.length === 0 && <span className={styles.inheritedNote}>(no child groups)</span>}
-                <MultiSelect
-                  options={availableChildGroups}
-                  value={[]}
-                  onChange={(ids) => {
-                    for (const id of ids) {
-                      updateGroup(id, { parentId: selected!.id })
+            <SectionHeader>Child groups</SectionHeader>
+            <div className={styles.sectionTags}>
+              {children.map((c) => (
+                <Tag
+                  key={c.id}
+                  label={c.name}
+                  color="success"
+                  onRemove={() => {
+                    updateGroup(c.id, { parentId: null })
+                    toast({ title: 'Child group removed', description: c.name, variant: 'success' })
+                  }}
+                />
+              ))}
+              {children.length === 0 && <span className={styles.inheritedNote}>(no child groups)</span>}
+              <MultiSelect
+                options={availableChildGroups}
+                value={[]}
+                onChange={(ids) => {
+                  for (const id of ids) {
+                    updateGroup(id, { parentId: selected!.id })
+                  }
+                  toast({ title: `${ids.length} child group(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+
+            <SectionHeader>Assigned roles</SectionHeader>
+            <div className={styles.sectionTags}>
+              {selected.directRoles.map((r) => (
+                <Tag
+                  key={r}
+                  label={r}
+                  color="warning"
+                  onRemove={() => {
+                    const memberCount = MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)).length
+                    if (memberCount > 0) {
+                      setRemoveRoleTarget(r)
+                    } else {
+                      updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== r) })
+                      toast({ title: 'Role removed', variant: 'success' })
                     }
-                    toast({ title: `${ids.length} child group(s) added`, variant: 'success' })
                   }}
-                  placeholder="+ Add"
                 />
-              </div>
-
-              <SectionHeader>Assigned roles</SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directRoles.map((r) => (
-                  <Tag
-                    key={r}
-                    label={r}
-                    color="warning"
-                    onRemove={() => {
-                      const memberCount = MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)).length
-                      if (memberCount > 0) {
-                        setRemoveRoleTarget(r)
-                      } else {
-                        updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== r) })
-                        toast({ title: 'Role removed', variant: 'success' })
-                      }
-                    }}
-                  />
-                ))}
-                {selected.directRoles.length === 0 && <span className={styles.inheritedNote}>(no roles)</span>}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roles) => {
-                    updateGroup(selected.id, { directRoles: [...selected.directRoles, ...roles] })
-                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a group to view details</div>
-          )}
-        </div>
-      </div>
+              ))}
+              {selected.directRoles.length === 0 && <span className={styles.inheritedNote}>(no roles)</span>}
+              <MultiSelect
+                options={availableRoles}
+                value={[]}
+                onChange={(roles) => {
+                  updateGroup(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                  toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+          </>
+        ) : null}
+        emptyMessage="Select a group to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}
diff --git a/src/pages/Admin/UserManagement/RolesTab.tsx b/src/pages/Admin/UserManagement/RolesTab.tsx
index 135ede1..115c25b 100644
--- a/src/pages/Admin/UserManagement/RolesTab.tsx
+++ b/src/pages/Admin/UserManagement/RolesTab.tsx
@@ -7,6 +7,8 @@ import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
 import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_ROLES, MOCK_GROUPS, MOCK_USERS, getEffectiveRoles, type MockRole } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -79,141 +81,124 @@ export function RolesTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search roles..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add role
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
-              {duplicateRoleName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Role name already exists</span>}
-              <Input placeholder="Description" value={newDesc} onChange={(e) => setNewDesc(e.target.value)} />
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateRoleName}>Create</Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Roles">
-            {filtered.map((role) => (
-              <div
-                key={role.id}
-                className={`${styles.entityItem} ${selectedId === role.id ? styles.entityItemSelected : ''}`}
-                onClick={() => setSelectedId(role.id)}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === role.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(role.id) } }}
-              >
-                <Avatar name={role.name} size="sm" />
-                <div className={styles.entityInfo}>
-                  <div className={styles.entityName}>
-                    {role.name}
-                    {role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
-                  </div>
-                  <div className={styles.entityMeta}>
-                    {role.description} · {getAssignmentCount(role)} assignments
-                  </div>
-                  <div className={styles.entityTags}>
-                    {MOCK_GROUPS.filter((g) => g.directRoles.includes(role.name))
-                      .map((g) => <Badge key={g.id} label={g.name} color="success" />)}
-                    {MOCK_USERS.filter((u) => u.directRoles.includes(role.name))
-                      .map((u) => <Badge key={u.id} label={u.username} color="auto" />)}
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+                {duplicateRoleName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Role name already exists</span>}
+                <Input placeholder="Description" value={newDesc} onChange={(e) => setNewDesc(e.target.value)} />
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateRoleName}>Create</Button>
                 </div>
               </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No roles match your search</div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.name} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>{selected.name}</div>
-                  {selected.description && (
-                    <div className={styles.detailEmail}>{selected.description}</div>
-                  )}
-                </div>
-                {!selected.system && (
-                  <Button
-                    size="sm"
-                    variant="danger"
-                    onClick={() => setDeleteTarget(selected)}
-                  >
-                    Delete
-                  </Button>
-                )}
-              </div>
-
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.id}</MonoText>
-                <span className={styles.metaLabel}>Scope</span>
-                <span className={styles.metaValue}>{selected.scope}</span>
-                {selected.system && (
-                  <>
-                    <span className={styles.metaLabel}>Type</span>
-                    <span className={styles.metaValue}>System role (read-only)</span>
-                  </>
-                )}
-              </div>
-
-              <SectionHeader>Assigned to groups</SectionHeader>
-              <div className={styles.sectionTags}>
-                {assignedGroups.map((g) => <Tag key={g.id} label={g.name} color="success" />)}
-                {assignedGroups.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-
-              <SectionHeader>Assigned to users (direct)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {directUsers.map((u) => <Tag key={u.id} label={u.displayName} color="auto" />)}
-                {directUsers.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-
-              <SectionHeader>Effective principals</SectionHeader>
-              <div className={styles.sectionTags}>
-                {effectivePrincipals.map((u) => {
-                  const isDirect = u.directRoles.includes(selected.name)
-                  return (
-                    <Badge
-                      key={u.id}
-                      label={u.displayName}
-                      color="auto"
-                      variant={isDirect ? 'filled' : 'dashed'}
-                    />
-                  )
-                })}
-                {effectivePrincipals.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-              {effectivePrincipals.some((u) => !u.directRoles.includes(selected.name)) && (
-                <span className={styles.inheritedNote}>
-                  Dashed entries inherit this role through group membership
-                </span>
+            <EntityList
+              items={filtered}
+              renderItem={(role) => (
+                <>
+                  <Avatar name={role.name} size="sm" />
+                  <div className={styles.entityInfo}>
+                    <div className={styles.entityName}>
+                      {role.name}
+                      {role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
+                    </div>
+                    <div className={styles.entityMeta}>
+                      {role.description} · {getAssignmentCount(role)} assignments
+                    </div>
+                    <div className={styles.entityTags}>
+                      {MOCK_GROUPS.filter((g) => g.directRoles.includes(role.name))
+                        .map((g) => <Badge key={g.id} label={g.name} color="success" />)}
+                      {MOCK_USERS.filter((u) => u.directRoles.includes(role.name))
+                        .map((u) => <Badge key={u.id} label={u.username} color="auto" />)}
+                    </div>
+                  </div>
+                </>
               )}
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a role to view details</div>
-          )}
-        </div>
-      </div>
+              getItemId={(role) => role.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search roles..."
+              onSearch={setSearch}
+              addLabel="+ Add role"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No roles match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.name} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>{selected.name}</div>
+                {selected.description && (
+                  <div className={styles.detailEmail}>{selected.description}</div>
+                )}
+              </div>
+              {!selected.system && (
+                <Button
+                  size="sm"
+                  variant="danger"
+                  onClick={() => setDeleteTarget(selected)}
+                >
+                  Delete
+                </Button>
+              )}
+            </div>
+
+            <div className={styles.metaGrid}>
+              <span className={styles.metaLabel}>ID</span>
+              <MonoText size="xs">{selected.id}</MonoText>
+              <span className={styles.metaLabel}>Scope</span>
+              <span className={styles.metaValue}>{selected.scope}</span>
+              {selected.system && (
+                <>
+                  <span className={styles.metaLabel}>Type</span>
+                  <span className={styles.metaValue}>System role (read-only)</span>
+                </>
+              )}
+            </div>
+
+            <SectionHeader>Assigned to groups</SectionHeader>
+            <div className={styles.sectionTags}>
+              {assignedGroups.map((g) => <Tag key={g.id} label={g.name} color="success" />)}
+              {assignedGroups.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+
+            <SectionHeader>Assigned to users (direct)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {directUsers.map((u) => <Tag key={u.id} label={u.displayName} color="auto" />)}
+              {directUsers.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+
+            <SectionHeader>Effective principals</SectionHeader>
+            <div className={styles.sectionTags}>
+              {effectivePrincipals.map((u) => {
+                const isDirect = u.directRoles.includes(selected.name)
+                return (
+                  <Badge
+                    key={u.id}
+                    label={u.displayName}
+                    color="auto"
+                    variant={isDirect ? 'filled' : 'dashed'}
+                  />
+                )
+              })}
+              {effectivePrincipals.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+            {effectivePrincipals.some((u) => !u.directRoles.includes(selected.name)) && (
+              <span className={styles.inheritedNote}>
+                Dashed entries inherit this role through group membership
+              </span>
+            )}
+          </>
+        ) : null}
+        emptyMessage="Select a role to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}
diff --git a/src/pages/Admin/UserManagement/UserManagement.module.css b/src/pages/Admin/UserManagement/UserManagement.module.css
index 699ac16..fea6bdc 100644
--- a/src/pages/Admin/UserManagement/UserManagement.module.css
+++ b/src/pages/Admin/UserManagement/UserManagement.module.css
@@ -1,63 +1,3 @@
-.splitPane {
-  display: grid;
-  grid-template-columns: 52fr 48fr;
-  gap: 1px;
-  background: var(--border-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  min-height: 500px;
-  box-shadow: var(--shadow-card);
-}
-
-.listPane {
-  background: var(--bg-surface);
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
-}
-
-.detailPane {
-  background: var(--bg-surface);
-  overflow-y: auto;
-  padding: 20px;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-}
-
-.listHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.listHeaderSearch {
-  flex: 1;
-}
-
-.entityList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.entityItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.1s;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.entityItem:hover {
-  background: var(--bg-hover);
-}
-
-.entityItemSelected {
-  background: var(--bg-raised);
-}
-
 .entityInfo {
   flex: 1;
   min-width: 0;
@@ -140,16 +80,6 @@
   max-width: 240px;
 }
 
-.emptyDetail {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-faint);
-  font-size: 13px;
-  font-family: var(--font-body);
-}
-
 .createForm {
   padding: 12px;
   border-bottom: 1px solid var(--border-subtle);
@@ -190,14 +120,6 @@
   margin-top: 16px;
 }
 
-.emptySearch {
-  padding: 32px;
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 12px;
-  font-family: var(--font-body);
-}
-
 .securitySection {
   margin-top: 8px;
   margin-bottom: 8px;
diff --git a/src/pages/Admin/UserManagement/UsersTab.tsx b/src/pages/Admin/UserManagement/UsersTab.tsx
index ba5e0fb..ccb6b0f 100644
--- a/src/pages/Admin/UserManagement/UsersTab.tsx
+++ b/src/pages/Admin/UserManagement/UsersTab.tsx
@@ -12,6 +12,8 @@ import { InfoCallout } from '../../../design-system/primitives/InfoCallout/InfoC
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_USERS, MOCK_GROUPS, MOCK_ROLES, getEffectiveRoles, type MockUser } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -97,260 +99,243 @@ export function UsersTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search users..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add user
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
-                <RadioItem value="local" label="Local" />
-                <RadioItem value="oidc" label="OIDC" />
-              </RadioGroup>
-              <div className={styles.createFormRow}>
-                <Input placeholder="Username *" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
-                <Input placeholder="Display name" value={newDisplay} onChange={(e) => setNewDisplay(e.target.value)} />
-              </div>
-              {duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
-              <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
-              {newProvider === 'local' && (
-                <Input placeholder="Password *" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
-              )}
-              {newProvider === 'oidc' && (
-                <InfoCallout variant="amber">
-                  OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login.
-                </InfoCallout>
-              )}
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button
-                  size="sm"
-                  variant="primary"
-                  onClick={handleCreate}
-                  disabled={!newUsername.trim() || (newProvider === 'local' && !newPassword.trim()) || duplicateUsername}
-                >
-                  Create
-                </Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Users">
-            {filtered.map((user) => (
-              <div
-                key={user.id}
-                className={`${styles.entityItem} ${selectedId === user.id ? styles.entityItemSelected : ''}`}
-                onClick={() => { setSelectedId(user.id); setResettingPassword(false) }}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === user.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(user.id); setResettingPassword(false) } }}
-              >
-                <Avatar name={user.displayName} size="sm" />
-                <div className={styles.entityInfo}>
-                  <div className={styles.entityName}>
-                    {user.displayName}
-                    {user.provider !== 'local' && (
-                      <Badge label={user.provider} color="running" variant="outlined" className={styles.providerBadge} />
-                    )}
-                  </div>
-                  <div className={styles.entityMeta}>
-                    {user.email} &middot; {getUserGroupPath(user)}
-                  </div>
-                  <div className={styles.entityTags}>
-                    {user.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
-                    {user.directGroups.map((gId) => {
-                      const g = MOCK_GROUPS.find((gr) => gr.id === gId)
-                      return g ? <Badge key={gId} label={g.name} color="success" /> : null
-                    })}
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
+                  <RadioItem value="local" label="Local" />
+                  <RadioItem value="oidc" label="OIDC" />
+                </RadioGroup>
+                <div className={styles.createFormRow}>
+                  <Input placeholder="Username *" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
+                  <Input placeholder="Display name" value={newDisplay} onChange={(e) => setNewDisplay(e.target.value)} />
+                </div>
+                {duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
+                <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
+                {newProvider === 'local' && (
+                  <Input placeholder="Password *" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+                )}
+                {newProvider === 'oidc' && (
+                  <InfoCallout variant="amber">
+                    OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login.
+                  </InfoCallout>
+                )}
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button
+                    size="sm"
+                    variant="primary"
+                    onClick={handleCreate}
+                    disabled={!newUsername.trim() || (newProvider === 'local' && !newPassword.trim()) || duplicateUsername}
+                  >
+                    Create
+                  </Button>
                 </div>
               </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No users match your search</div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.displayName} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>
-                    <InlineEdit
-                      value={selected.displayName}
-                      onSave={(v) => updateUser(selected.id, { displayName: v })}
-                    />
-                  </div>
-                  <div className={styles.detailEmail}>{selected.email}</div>
-                </div>
-                <Button
-                  size="sm"
-                  variant="danger"
-                  onClick={() => setDeleteTarget(selected)}
-                  disabled={selected.username === 'hendrik'}
-                >
-                  Delete
-                </Button>
-              </div>
-
-              <SectionHeader>Status</SectionHeader>
-              <div className={styles.sectionTags}>
-                <Tag label="Active" color="success" />
-              </div>
-
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.id}</MonoText>
-                <span className={styles.metaLabel}>Created</span>
-                <span className={styles.metaValue}>{new Date(selected.createdAt).toLocaleDateString()}</span>
-                <span className={styles.metaLabel}>Provider</span>
-                <span className={styles.metaValue}>{selected.provider}</span>
-              </div>
-
-              <SectionHeader>Security</SectionHeader>
-              <div className={styles.securitySection}>
-                {selected.provider === 'local' ? (
-                  <>
-                    <div className={styles.securityRow}>
-                      <span className={styles.metaLabel}>Password</span>
-                      <span className={styles.passwordDots}>••••••••</span>
-                      {!resettingPassword && (
-                        <Button size="sm" variant="ghost" onClick={() => { setResettingPassword(true); setNewPw('') }}>
-                          Reset password
-                        </Button>
+            <EntityList
+              items={filtered}
+              renderItem={(user) => (
+                <>
+                  <Avatar name={user.displayName} size="sm" />
+                  <div className={styles.entityInfo}>
+                    <div className={styles.entityName}>
+                      {user.displayName}
+                      {user.provider !== 'local' && (
+                        <Badge label={user.provider} color="running" variant="outlined" className={styles.providerBadge} />
                       )}
                     </div>
-                    {resettingPassword && (
-                      <div className={styles.resetForm}>
-                        <Input
-                          placeholder="New password"
-                          type="password"
-                          value={newPw}
-                          onChange={(e) => setNewPw(e.target.value)}
-                          className={styles.resetInput}
-                        />
-                        <Button size="sm" variant="ghost" onClick={() => setResettingPassword(false)}>Cancel</Button>
-                        <Button
-                          size="sm"
-                          variant="primary"
-                          onClick={() => { setResettingPassword(false); toast({ title: 'Password updated', description: selected.username, variant: 'success' }) }}
-                          disabled={!newPw.trim()}
-                        >
-                          Set
-                        </Button>
-                      </div>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <div className={styles.securityRow}>
-                      <span className={styles.metaLabel}>Authentication</span>
-                      <span className={styles.metaValue}>OIDC ({selected.provider})</span>
+                    <div className={styles.entityMeta}>
+                      {user.email} &middot; {getUserGroupPath(user)}
                     </div>
-                    <InfoCallout variant="amber">
-                      Password managed by the identity provider.
-                    </InfoCallout>
-                  </>
-                )}
-              </div>
-
-              <SectionHeader>Group membership (direct only)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directGroups.map((gId) => {
-                  const g = MOCK_GROUPS.find((gr) => gr.id === gId)
-                  return g ? (
-                    <Tag
-                      key={gId}
-                      label={g.name}
-                      color="success"
-                      onRemove={() => {
-                        const group = MOCK_GROUPS.find((gr) => gr.id === gId)
-                        if (group && group.directRoles.length > 0) {
-                          setRemoveGroupTarget(gId)
-                        } else {
-                          updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== gId) })
-                          toast({ title: 'Group removed', variant: 'success' })
-                        }
-                      }}
-                    />
-                  ) : null
-                })}
-                {selected.directGroups.length === 0 && (
-                  <span className={styles.inheritedNote}>(no groups)</span>
-                )}
-                <MultiSelect
-                  options={availableGroups}
-                  value={[]}
-                  onChange={(ids) => {
-                    updateUser(selected.id, { directGroups: [...selected.directGroups, ...ids] })
-                    toast({ title: `${ids.length} group(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-
-              <SectionHeader>Effective roles (direct + inherited)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {effectiveRoles.map(({ role, source }) =>
-                  source === 'direct' ? (
-                    <Tag
-                      key={role}
-                      label={role}
-                      color="warning"
-                      onRemove={() => {
-                        updateUser(selected.id, { directRoles: selected.directRoles.filter((r) => r !== role) })
-                        toast({ title: 'Role removed', description: role, variant: 'success' })
-                      }}
-                    />
-                  ) : (
-                    <Badge
-                      key={role}
-                      label={`${role} ↑ ${source}`}
-                      color="warning"
-                      variant="dashed"
-                      className={styles.inherited}
-                    />
-                  )
-                )}
-                {effectiveRoles.length === 0 && (
-                  <span className={styles.inheritedNote}>(no roles)</span>
-                )}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roles) => {
-                    updateUser(selected.id, { directRoles: [...selected.directRoles, ...roles] })
-                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-              {effectiveRoles.some((r) => r.source !== 'direct') && (
-                <span className={styles.inheritedNote}>
-                  Roles with ↑ are inherited through group membership
-                </span>
+                    <div className={styles.entityTags}>
+                      {user.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
+                      {user.directGroups.map((gId) => {
+                        const g = MOCK_GROUPS.find((gr) => gr.id === gId)
+                        return g ? <Badge key={gId} label={g.name} color="success" /> : null
+                      })}
+                    </div>
+                  </div>
+                </>
               )}
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a user to view details</div>
-          )}
-        </div>
-      </div>
+              getItemId={(user) => user.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={(id) => { setSelectedId(id); setResettingPassword(false) }}
+              searchPlaceholder="Search users..."
+              onSearch={setSearch}
+              addLabel="+ Add user"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No users match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.displayName} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>
+                  <InlineEdit
+                    value={selected.displayName}
+                    onSave={(v) => updateUser(selected.id, { displayName: v })}
+                  />
+                </div>
+                <div className={styles.detailEmail}>{selected.email}</div>
+              </div>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => setDeleteTarget(selected)}
+                disabled={selected.username === 'hendrik'}
+              >
+                Delete
+              </Button>
+            </div>
+
+            <SectionHeader>Status</SectionHeader>
+            <div className={styles.sectionTags}>
+              <Tag label="Active" color="success" />
+            </div>
+
+            <div className={styles.metaGrid}>
+              <span className={styles.metaLabel}>ID</span>
+              <MonoText size="xs">{selected.id}</MonoText>
+              <span className={styles.metaLabel}>Created</span>
+              <span className={styles.metaValue}>{new Date(selected.createdAt).toLocaleDateString()}</span>
+              <span className={styles.metaLabel}>Provider</span>
+              <span className={styles.metaValue}>{selected.provider}</span>
+            </div>
+
+            <SectionHeader>Security</SectionHeader>
+            <div className={styles.securitySection}>
+              {selected.provider === 'local' ? (
+                <>
+                  <div className={styles.securityRow}>
+                    <span className={styles.metaLabel}>Password</span>
+                    <span className={styles.passwordDots}>••••••••</span>
+                    {!resettingPassword && (
+                      <Button size="sm" variant="ghost" onClick={() => { setResettingPassword(true); setNewPw('') }}>
+                        Reset password
+                      </Button>
+                    )}
+                  </div>
+                  {resettingPassword && (
+                    <div className={styles.resetForm}>
+                      <Input
+                        placeholder="New password"
+                        type="password"
+                        value={newPw}
+                        onChange={(e) => setNewPw(e.target.value)}
+                        className={styles.resetInput}
+                      />
+                      <Button size="sm" variant="ghost" onClick={() => setResettingPassword(false)}>Cancel</Button>
+                      <Button
+                        size="sm"
+                        variant="primary"
+                        onClick={() => { setResettingPassword(false); toast({ title: 'Password updated', description: selected.username, variant: 'success' }) }}
+                        disabled={!newPw.trim()}
+                      >
+                        Set
+                      </Button>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <>
+                  <div className={styles.securityRow}>
+                    <span className={styles.metaLabel}>Authentication</span>
+                    <span className={styles.metaValue}>OIDC ({selected.provider})</span>
+                  </div>
+                  <InfoCallout variant="amber">
+                    Password managed by the identity provider.
+                  </InfoCallout>
+                </>
+              )}
+            </div>
+
+            <SectionHeader>Group membership (direct only)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {selected.directGroups.map((gId) => {
+                const g = MOCK_GROUPS.find((gr) => gr.id === gId)
+                return g ? (
+                  <Tag
+                    key={gId}
+                    label={g.name}
+                    color="success"
+                    onRemove={() => {
+                      const group = MOCK_GROUPS.find((gr) => gr.id === gId)
+                      if (group && group.directRoles.length > 0) {
+                        setRemoveGroupTarget(gId)
+                      } else {
+                        updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== gId) })
+                        toast({ title: 'Group removed', variant: 'success' })
+                      }
+                    }}
+                  />
+                ) : null
+              })}
+              {selected.directGroups.length === 0 && (
+                <span className={styles.inheritedNote}>(no groups)</span>
+              )}
+              <MultiSelect
+                options={availableGroups}
+                value={[]}
+                onChange={(ids) => {
+                  updateUser(selected.id, { directGroups: [...selected.directGroups, ...ids] })
+                  toast({ title: `${ids.length} group(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+
+            <SectionHeader>Effective roles (direct + inherited)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {effectiveRoles.map(({ role, source }) =>
+                source === 'direct' ? (
+                  <Tag
+                    key={role}
+                    label={role}
+                    color="warning"
+                    onRemove={() => {
+                      updateUser(selected.id, { directRoles: selected.directRoles.filter((r) => r !== role) })
+                      toast({ title: 'Role removed', description: role, variant: 'success' })
+                    }}
+                  />
+                ) : (
+                  <Badge
+                    key={role}
+                    label={`${role} ↑ ${source}`}
+                    color="warning"
+                    variant="dashed"
+                    className={styles.inherited}
+                  />
+                )
+              )}
+              {effectiveRoles.length === 0 && (
+                <span className={styles.inheritedNote}>(no roles)</span>
+              )}
+              <MultiSelect
+                options={availableRoles}
+                value={[]}
+                onChange={(roles) => {
+                  updateUser(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                  toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+            {effectiveRoles.some((r) => r.source !== 'direct') && (
+              <span className={styles.inheritedNote}>
+                Roles with ↑ are inherited through group membership
+              </span>
+            )}
+          </>
+        ) : null}
+        emptyMessage="Select a user to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}