Enhance RBAC user management UI and fix permission checks

- Add role management to "By User" tab
  - Show all users with roles and/or direct permissions
  - Add ability to assign/revoke roles from users
  - Display role chips as clickable and removable
  - Add "Assign Role" button for each user

- Fix account_id validation error in permission granting
  - Extract account_id string from Quasar q-select object
  - Apply fix to grantPermission, bulkGrantPermissions, and addRolePermission

- Fix role-based permission checking for expense submission
  - Update get_user_permissions_with_inheritance() to include role permissions
  - Ensures users with role-based permissions can submit expenses

- Improve Vue reactivity for role details dialog
  - Use spread operator to create fresh arrays
  - Add $nextTick() before showing dialog

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

Co-Authored-By: Claude <noreply@anthropic.com>

crud.py

@@ -1188,6 +1188,7 @@ async def get_user_permissions_with_inheritance(
 ) -> list[tuple["AccountPermission", Optional[str]]]:
     """
     Get all permissions for a user on an account, including inherited permissions from parent accounts.
+    Includes both direct permissions AND role-based permissions.
     Returns list of tuples: (permission, parent_account_name or None)
 
     Example:
@@ -1196,13 +1197,23 @@ async def get_user_permissions_with_inheritance(
     """
     from .models import AccountPermission, PermissionType
 
-    # Get all user's permissions of this type
+    # Get direct user permissions of this type
-    user_permissions = await get_user_permissions(user_id, permission_type)
+    direct_permissions = await get_user_permissions(user_id, permission_type)
+
+    # Get role-based permissions of this type
+    role_permissions_list = await get_user_permissions_from_roles(user_id)
+    role_perms = []
+    for role, perms in role_permissions_list:
+        # Filter for the specific permission type
+        role_perms.extend([p for p in perms if p.permission_type == permission_type])
+
+    # Combine direct and role-based permissions
+    all_permissions = list(direct_permissions) + role_perms
 
     # Find which permissions apply to this account (direct or inherited)
     applicable_permissions = []
 
-    for perm in user_permissions:
+    for perm in all_permissions:
         # Get the account for this permission
         account = await get_account(perm.account_id)
         if not account:

static/js/index.js

@@ -3,7 +3,6 @@ const mapJournalEntry = obj => {
 }
 
 window.app = Vue.createApp({
-  el: '#vue',
   mixins: [windowMixin],
   data() {
     return {

static/js/permissions.js

@@ -1,5 +1,4 @@
 window.app = Vue.createApp({
-  el: '#vue',
   mixins: [windowMixin],
   data() {
     return {
@@ -59,7 +58,42 @@ window.app = Vue.createApp({
           label: 'Manage',
           description: 'Full account management'
         }
-      ]
+      ],
+      // RBAC-related data
+      roles: [],
+      selectedRole: null,
+      roleToDelete: null,
+      editingRole: false,
+      showCreateRoleDialog: false,
+      showViewRoleDialog: false,
+      showDeleteRoleDialog: false,
+      showAssignRoleDialog: false,
+      showRevokeUserRoleDialog: false,
+      savingRole: false,
+      deletingRole: false,
+      assigningRole: false,
+      revokingUserRole: false,
+      userRoleToRevoke: null,
+      roleForm: {
+        name: '',
+        description: '',
+        is_default: false
+      },
+      assignRoleForm: {
+        user_id: '',
+        role_id: '',
+        expires_at: '',
+        notes: ''
+      },
+      roleUsersForView: [],
+      rolePermissionsForView: [],
+      userRoles: new Map(), // Map of user_id -> array of roles
+      showAddRolePermissionDialog: false,
+      rolePermissionForm: {
+        account_id: '',
+        permission_type: '',
+        notes: ''
+      }
     }
   },
 
@@ -109,6 +143,23 @@ window.app = Vue.createApp({
       return grouped
     },
 
+    // Get all unique user IDs from both direct permissions and role assignments
+    allUserIds() {
+      const userIds = new Set()
+
+      // Add users with direct permissions
+      for (const userId of this.permissionsByUser.keys()) {
+        userIds.add(userId)
+      }
+
+      // Add users with role assignments
+      for (const userId of this.userRoles.keys()) {
+        userIds.add(userId)
+      }
+
+      return Array.from(userIds).sort()
+    },
+
     permissionsByAccount() {
       const grouped = new Map()
       for (const perm of this.permissions) {
@@ -118,6 +169,25 @@ window.app = Vue.createApp({
         grouped.get(perm.account_id).push(perm)
       }
       return grouped
+    },
+
+    roleOptions() {
+      return this.roles.map(role => ({
+        value: role.id,
+        label: role.name,
+        description: role.description,
+        is_default: role.is_default
+      }))
+    },
+
+    accountOptions() {
+      return this.accounts.map(account => ({
+        value: account.id,
+        label: account.name,
+        name: account.name,
+        description: account.account_type,
+        is_virtual: account.is_virtual
+      }))
     }
   },
 
@@ -227,9 +297,14 @@ window.app = Vue.createApp({
 
       this.granting = true
       try {
+        // Extract account_id - handle both string and object cases
+        const accountId = typeof this.grantForm.account_id === 'object'
+          ? (this.grantForm.account_id.value || this.grantForm.account_id.id)
+          : this.grantForm.account_id
+
         const payload = {
           user_id: this.grantForm.user_id,
-          account_id: this.grantForm.account_id,
+          account_id: accountId,
           permission_type: this.grantForm.permission_type
         }
 
@@ -332,9 +407,14 @@ window.app = Vue.createApp({
       this.bulkGrantResults = null
 
       try {
+        // Extract account_id - handle both string and object cases
+        const accountId = typeof this.bulkGrantForm.account_id === 'object'
+          ? (this.bulkGrantForm.account_id.value || this.bulkGrantForm.account_id.id)
+          : this.bulkGrantForm.account_id
+
         const payload = {
           user_ids: this.bulkGrantForm.user_ids,
-          account_id: this.bulkGrantForm.account_id,
+          account_id: accountId,
           permission_type: this.bulkGrantForm.permission_type
         }
 
@@ -563,6 +643,460 @@ window.app = Vue.createApp({
         user_id: '',
         notes: ''
       }
+    },
+
+    // ===== RBAC ROLE MANAGEMENT METHODS =====
+
+    async loadRoles() {
+      if (!this.isSuperUser) {
+        return
+      }
+
+      try {
+        const response = await LNbits.api.request(
+          'GET',
+          '/castle/api/v1/admin/roles',
+          this.g.user.wallets[0].adminkey
+        )
+        this.roles = response.data || []
+      } catch (error) {
+        console.error('Failed to load roles:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to load roles',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      }
+    },
+
+    async viewRole(role) {
+      this.selectedRole = role
+      this.roleUsersForView = []
+      this.rolePermissionsForView = []
+
+      try {
+        const response = await LNbits.api.request(
+          'GET',
+          `/castle/api/v1/admin/roles/${role.id}`,
+          this.g.user.wallets[0].adminkey
+        )
+
+        // Create fresh arrays to ensure Vue reactivity works properly
+        this.rolePermissionsForView = [...(response.data.permissions || [])]
+        this.roleUsersForView = [...(response.data.users || [])]
+
+        // Wait for Vue to update the DOM before showing dialog
+        await this.$nextTick()
+        this.showViewRoleDialog = true
+      } catch (error) {
+        console.error('Failed to load role details:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to load role details',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      }
+    },
+
+    editRole(role) {
+      this.editingRole = true
+      this.selectedRole = role
+      this.roleForm = {
+        name: role.name,
+        description: role.description || '',
+        is_default: role.is_default || false
+      }
+      this.showCreateRoleDialog = true
+    },
+
+    async saveRole() {
+      if (!this.roleForm.name) {
+        this.$q.notify({
+          type: 'warning',
+          message: 'Please enter a role name',
+          timeout: 3000
+        })
+        return
+      }
+
+      this.savingRole = true
+      try {
+        const payload = {
+          name: this.roleForm.name,
+          description: this.roleForm.description || null,
+          is_default: this.roleForm.is_default || false
+        }
+
+        if (this.editingRole) {
+          // Update existing role
+          await LNbits.api.request(
+            'PUT',
+            `/castle/api/v1/admin/roles/${this.selectedRole.id}`,
+            this.g.user.wallets[0].adminkey,
+            payload
+          )
+
+          this.$q.notify({
+            type: 'positive',
+            message: 'Role updated successfully',
+            timeout: 3000
+          })
+        } else {
+          // Create new role
+          await LNbits.api.request(
+            'POST',
+            '/castle/api/v1/admin/roles',
+            this.g.user.wallets[0].adminkey,
+            payload
+          )
+
+          this.$q.notify({
+            type: 'positive',
+            message: 'Role created successfully',
+            timeout: 3000
+          })
+        }
+
+        this.closeRoleDialog()
+        await this.loadRoles()
+      } catch (error) {
+        console.error('Failed to save role:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: `Failed to ${this.editingRole ? 'update' : 'create'} role`,
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      } finally {
+        this.savingRole = false
+      }
+    },
+
+    confirmDeleteRole(role) {
+      this.roleToDelete = role
+      this.showDeleteRoleDialog = true
+    },
+
+    async deleteRole() {
+      if (!this.roleToDelete) return
+
+      this.deletingRole = true
+      try {
+        await LNbits.api.request(
+          'DELETE',
+          `/castle/api/v1/admin/roles/${this.roleToDelete.id}`,
+          this.g.user.wallets[0].adminkey
+        )
+
+        this.$q.notify({
+          type: 'positive',
+          message: 'Role deleted successfully',
+          timeout: 3000
+        })
+
+        this.closeDeleteRoleDialog()
+        await this.loadRoles()
+      } catch (error) {
+        console.error('Failed to delete role:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to delete role',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      } finally {
+        this.deletingRole = false
+      }
+    },
+
+    closeRoleDialog() {
+      this.showCreateRoleDialog = false
+      this.editingRole = false
+      this.selectedRole = null
+      this.resetRoleForm()
+    },
+
+    closeViewRoleDialog() {
+      this.showViewRoleDialog = false
+      this.selectedRole = null
+      this.roleUsersForView = []
+      this.rolePermissionsForView = []
+    },
+
+    closeDeleteRoleDialog() {
+      this.showDeleteRoleDialog = false
+      this.roleToDelete = null
+    },
+
+    closeAssignRoleDialog() {
+      this.showAssignRoleDialog = false
+      this.resetAssignRoleForm()
+    },
+
+    async assignRole() {
+      if (!this.assignRoleForm.user_id || !this.assignRoleForm.role_id) {
+        this.$q.notify({
+          type: 'warning',
+          message: 'Please select both a user and a role',
+          timeout: 3000
+        })
+        return
+      }
+
+      this.assigningRole = true
+      try {
+        const payload = {
+          user_id: this.assignRoleForm.user_id,
+          role_id: this.assignRoleForm.role_id
+        }
+
+        if (this.assignRoleForm.notes) {
+          payload.notes = this.assignRoleForm.notes
+        }
+
+        if (this.assignRoleForm.expires_at) {
+          payload.expires_at = new Date(this.assignRoleForm.expires_at).toISOString()
+        }
+
+        await LNbits.api.request(
+          'POST',
+          '/castle/api/v1/admin/user-roles',
+          this.g.user.wallets[0].adminkey,
+          payload
+        )
+
+        this.$q.notify({
+          type: 'positive',
+          message: 'Role assigned successfully',
+          timeout: 3000
+        })
+
+        this.closeAssignRoleDialog()
+        await this.loadRoles()
+      } catch (error) {
+        console.error('Failed to assign role:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to assign role',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      } finally {
+        this.assigningRole = false
+      }
+    },
+
+    resetRoleForm() {
+      this.roleForm = {
+        name: '',
+        description: '',
+        is_default: false
+      }
+    },
+
+    resetAssignRoleForm() {
+      this.assignRoleForm = {
+        user_id: '',
+        role_id: '',
+        expires_at: '',
+        notes: ''
+      }
+    },
+
+    // Get roles for a specific user
+    getUserRoles(userId) {
+      const userRoleAssignments = this.userRoles.get(userId) || []
+      // Map role assignments to role objects
+      return userRoleAssignments
+        .map(ur => this.roles.find(r => r.id === ur.role_id))
+        .filter(r => r) // Filter out null/undefined
+    },
+
+    // Load all user role assignments
+    async loadUserRoles() {
+      if (!this.isSuperUser) return
+      try {
+        const response = await LNbits.api.request(
+          'GET',
+          '/castle/api/v1/admin/users/roles',
+          this.g.user.wallets[0].adminkey
+        )
+
+        // Group by user_id
+        this.userRoles.clear()
+        if (response.data && Array.isArray(response.data)) {
+          response.data.forEach(userRole => {
+            if (!this.userRoles.has(userRole.user_id)) {
+              this.userRoles.set(userRole.user_id, [])
+            }
+            this.userRoles.get(userRole.user_id).push(userRole)
+          })
+        }
+      } catch (error) {
+        console.error('Failed to load user roles:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to load user role assignments',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      }
+    },
+
+    // Get user role assignments (returns UserRole objects, not Role objects)
+    getUserRoleAssignments(userId) {
+      return this.userRoles.get(userId) || []
+    },
+
+    // Get role name by ID
+    getRoleName(roleId) {
+      const role = this.roles.find(r => r.id === roleId)
+      return role ? role.name : 'Unknown Role'
+    },
+
+    // View role by ID
+    viewRoleById(roleId) {
+      const role = this.roles.find(r => r.id === roleId)
+      if (role) {
+        this.viewRole(role)
+      }
+    },
+
+    // Show assign role dialog with user pre-selected
+    showAssignRoleForUser(userId) {
+      this.assignRoleForm.user_id = userId
+      this.showAssignRoleDialog = true
+    },
+
+    // Show confirmation dialog for revoking user role
+    confirmRevokeUserRole(userRole) {
+      this.userRoleToRevoke = userRole
+      this.showRevokeUserRoleDialog = true
+    },
+
+    // Revoke user role
+    async revokeUserRole() {
+      if (!this.userRoleToRevoke) return
+
+      this.revokingUserRole = true
+      try {
+        await LNbits.api.request(
+          'DELETE',
+          `/castle/api/v1/admin/user-roles/${this.userRoleToRevoke.id}`,
+          this.g.user.wallets[0].adminkey
+        )
+
+        this.$q.notify({
+          type: 'positive',
+          message: 'Role revoked successfully',
+          timeout: 3000
+        })
+
+        // Reload data
+        await this.loadUserRoles()
+        await this.loadRoles()
+
+        // Close dialog
+        this.showRevokeUserRoleDialog = false
+        this.userRoleToRevoke = null
+      } catch (error) {
+        console.error('Failed to revoke role:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to revoke role',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      } finally {
+        this.revokingUserRole = false
+      }
+    },
+
+    // Add permission to role
+    async addRolePermission() {
+      if (!this.selectedRole || !this.rolePermissionForm.account_id || !this.rolePermissionForm.permission_type) {
+        return
+      }
+      try {
+        // Extract account_id - handle both string and object cases
+        const accountId = typeof this.rolePermissionForm.account_id === 'object'
+          ? (this.rolePermissionForm.account_id.value || this.rolePermissionForm.account_id.id)
+          : this.rolePermissionForm.account_id
+
+        const payload = {
+          role_id: this.selectedRole.id,
+          account_id: accountId,
+          permission_type: this.rolePermissionForm.permission_type,
+          notes: this.rolePermissionForm.notes || null
+        }
+        await LNbits.api.request(
+          'POST',
+          `/castle/api/v1/admin/roles/${this.selectedRole.id}/permissions`,
+          this.g.user.wallets[0].adminkey,
+          payload
+        )
+        this.closeAddRolePermissionDialog()
+        // Reload role permissions
+        await this.viewRole(this.selectedRole)
+        this.$q.notify({
+          type: 'positive',
+          message: 'Permission added to role successfully',
+          timeout: 3000
+        })
+      } catch (error) {
+        console.error('Failed to add permission to role:', error)
+        this.$q.notify({
+          type: 'negative',
+          message: 'Failed to add permission to role',
+          caption: error.message || 'Unknown error',
+          timeout: 5000
+        })
+      }
+    },
+
+    // Delete role permission
+    async deleteRolePermission(permissionId) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Are you sure you want to remove this permission from the role?',
+        cancel: true,
+        persistent: true
+      }).onOk(async () => {
+        try {
+          await LNbits.api.request(
+            'DELETE',
+            `/castle/api/v1/admin/roles/${this.selectedRole.id}/permissions/${permissionId}`,
+            this.g.user.wallets[0].adminkey
+          )
+          // Reload role permissions
+          await this.viewRole(this.selectedRole)
+          this.$q.notify({
+            type: 'positive',
+            message: 'Permission removed from role',
+            timeout: 3000
+          })
+        } catch (error) {
+          console.error('Failed to delete role permission:', error)
+          this.$q.notify({
+            type: 'negative',
+            message: 'Failed to remove permission',
+            caption: error.message || 'Unknown error',
+            timeout: 5000
+          })
+        }
+      })
+    },
+
+    // Close add role permission dialog
+    closeAddRolePermissionDialog() {
+      this.showAddRolePermissionDialog = false
+      this.rolePermissionForm = {
+        account_id: '',
+        permission_type: '',
+        notes: ''
+      }
     }
   },
 
@@ -576,7 +1110,9 @@ window.app = Vue.createApp({
         await Promise.all([
           this.loadPermissions(),
           this.loadUsers(),
-          this.loadEquityEligibleUsers()
+          this.loadEquityEligibleUsers(),
+          this.loadRoles(),
+          this.loadUserRoles()
         ])
       }
     }

templates/castle/permissions.html

@@ -65,6 +65,7 @@
         <q-tabs v-model="activeTab" class="text-primary" dense>
           <q-tab name="by-user" icon="people" label="By User"></q-tab>
           <q-tab name="by-account" icon="account_balance" label="By Account"></q-tab>
+          <q-tab name="roles" icon="badge" label="Roles"></q-tab>
           <q-tab name="equity" icon="account_balance_wallet" label="Equity Eligibility"></q-tab>
         </q-tabs>
 
@@ -77,20 +78,69 @@
               <q-spinner color="primary" size="3em"></q-spinner>
             </div>
 
-            <div v-else-if="permissionsByUser.size === 0" class="text-center q-pa-md">
+            <div v-else-if="permissionsByUser.size === 0 && userRoles.size === 0" class="text-center q-pa-md">
               <q-icon name="info" size="3em" color="grey-5"></q-icon>
-              <p class="text-grey-6">No permissions granted yet</p>
+              <p class="text-grey-6">No permissions or roles assigned yet</p>
             </div>
 
             <div v-else class="q-gutter-md">
-              <q-card v-for="[userId, userPerms] in permissionsByUser" :key="userId" flat bordered>
+              <q-card v-for="userId in allUserIds" :key="userId" flat bordered>
                 <q-card-section>
-                  <div class="text-h6 q-mb-sm">
+                  <div class="row items-center q-mb-sm">
-                    <q-icon name="person" class="q-mr-sm"></q-icon>
+                    <div class="col">
-                    User: {% raw %}{{ userId }}{% endraw %}
+                      <div class="text-h6">
+                        <q-icon name="person" class="q-mr-sm"></q-icon>
+                        User: {% raw %}{{ userId }}{% endraw %}
+                      </div>
+                    </div>
+                    <div class="col-auto">
+                      <q-btn
+                        flat
+                        dense
+                        round
+                        icon="add"
+                        color="primary"
+                        size="sm"
+                        @click="showAssignRoleForUser(userId)"
+                        :disable="!isSuperUser"
+                      >
+                        <q-tooltip>Assign role to user</q-tooltip>
+                      </q-btn>
+                    </div>
                   </div>
-                  <q-list separator>
+
-                    <q-item v-for="perm in userPerms" :key="perm.id">
+                  <!-- User Roles Section -->
+                  <div v-if="getUserRoles(userId).length > 0 || getUserRoleAssignments(userId).length > 0" class="q-mb-md">
+                    <div class="text-subtitle2 text-grey-7 q-mb-xs">
+                      <q-icon name="badge" size="xs" class="q-mr-xs"></q-icon>
+                      Assigned Roles
+                    </div>
+                    <div class="q-gutter-xs">
+                      <q-chip
+                        v-for="userRole in getUserRoleAssignments(userId)"
+                        :key="userRole.id"
+                        color="indigo-6"
+                        text-color="white"
+                        icon="badge"
+                        size="sm"
+                        removable
+                        @remove="confirmRevokeUserRole(userRole)"
+                        clickable
+                        @click="viewRoleById(userRole.role_id)"
+                      >
+                        {% raw %}{{ getRoleName(userRole.role_id) }}{% endraw %}
+                        <q-tooltip>Click to view role details | Click X to revoke</q-tooltip>
+                      </q-chip>
+                    </div>
+                  </div>
+
+                  <!-- Direct Permissions Section -->
+                  <div class="text-subtitle2 text-grey-7 q-mb-xs">
+                    <q-icon name="key" size="xs" class="q-mr-xs"></q-icon>
+                    Direct Permissions
+                  </div>
+                  <q-list v-if="(permissionsByUser.get(userId) || []).length > 0" separator>
+                    <q-item v-for="perm in (permissionsByUser.get(userId) || [])" :key="perm.id">
                       <q-item-section avatar>
                         <q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
                           <q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
@@ -102,6 +152,9 @@
                           <q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
                             {% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
                           </q-chip>
+                          <q-chip size="sm" color="grey-6" text-color="white" class="q-ml-xs">
+                            Direct
+                          </q-chip>
                         </q-item-label>
                       </q-item-section>
                       <q-item-section side>
@@ -127,6 +180,9 @@
                       </q-item-section>
                     </q-item>
                   </q-list>
+                  <div v-else class="text-grey-6 text-center q-pa-sm">
+                    No direct permissions (permissions inherited from roles)
+                  </div>
                 </q-card-section>
               </q-card>
             </div>
@@ -193,6 +249,95 @@
             </div>
           </q-tab-panel>
 
+          <!-- Roles View -->
+          <q-tab-panel name="roles">
+            <div v-if="loading" class="row justify-center q-pa-md">
+              <q-spinner color="primary" size="3em"></q-spinner>
+            </div>
+
+            <div class="row q-mb-md">
+              <div class="col">
+                <q-btn
+                  color="primary"
+                  icon="add"
+                  label="Create Role"
+                  @click="showCreateRoleDialog = true"
+                  :disable="!isSuperUser"
+                >
+                  <q-tooltip v-if="!isSuperUser">Admin access required</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+
+            <div v-if="roles.length === 0" class="text-center q-pa-md">
+              <q-icon name="info" size="3em" color="grey-5"></q-icon>
+              <p class="text-grey-6">No roles configured yet</p>
+            </div>
+
+            <div v-else class="q-gutter-md">
+              <q-card v-for="role in roles" :key="role.id" flat bordered>
+                <q-card-section>
+                  <div class="row items-center">
+                    <div class="col">
+                      <div class="text-h6">
+                        <q-icon name="badge" class="q-mr-sm" color="blue"></q-icon>
+                        {% raw %}{{ role.name }}{% endraw %}
+                        <q-chip v-if="role.is_default" size="sm" color="amber" text-color="white" icon="star" class="q-ml-sm">
+                          DEFAULT
+                        </q-chip>
+                      </div>
+                      <div class="text-caption text-grey-7 q-mt-sm" v-if="role.description">
+                        {% raw %}{{ role.description }}{% endraw %}
+                      </div>
+                      <div class="row q-mt-sm q-gutter-sm">
+                        <q-chip size="sm" color="blue-grey" text-color="white" icon="people">
+                          {% raw %}{{ role.user_count }}{% endraw %} user(s)
+                        </q-chip>
+                        <q-chip size="sm" color="blue-grey" text-color="white" icon="security">
+                          {% raw %}{{ role.permission_count }}{% endraw %} permission(s)
+                        </q-chip>
+                      </div>
+                    </div>
+                    <div class="col-auto">
+                      <q-btn-group>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          icon="visibility"
+                          color="primary"
+                          @click="viewRole(role)"
+                        >
+                          <q-tooltip>View Details</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          icon="edit"
+                          color="primary"
+                          @click="editRole(role)"
+                        >
+                          <q-tooltip>Edit Role</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          icon="delete"
+                          color="negative"
+                          @click="confirmDeleteRole(role)"
+                        >
+                          <q-tooltip>Delete Role</q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </div>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </q-tab-panel>
+
           <!-- Equity Eligibility View -->
           <q-tab-panel name="equity">
             <div v-if="loading" class="row justify-center q-pa-md">
@@ -763,4 +908,503 @@
     </q-card-actions>
   </q-card>
 </q-dialog>
+
+<!-- Create/Edit Role Dialog -->
+<q-dialog v-model="showCreateRoleDialog" position="top">
+  <q-card class="q-pa-lg" style="min-width: 500px">
+    <q-card-section>
+      <div class="text-h6">{% raw %}{{ editingRole ? 'Edit Role' : 'Create Role' }}{% endraw %}</div>
+      <div class="text-caption text-grey-7">
+        Define a role with a name and description. Permissions will be added separately.
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-gutter-md">
+      <!-- Role Name -->
+      <q-input
+        v-model="roleForm.name"
+        label="Role Name *"
+        hint="e.g., Employee, Contractor, Manager"
+        outlined
+        dense
+        :rules="[val => !!val || 'Role name is required']"
+      >
+        <template v-slot:prepend>
+          <q-icon name="badge"></q-icon>
+        </template>
+      </q-input>
+
+      <!-- Description -->
+      <q-input
+        v-model="roleForm.description"
+        label="Description"
+        hint="Brief description of this role's purpose"
+        type="textarea"
+        outlined
+        dense
+        rows="3"
+      >
+        <template v-slot:prepend>
+          <q-icon name="description"></q-icon>
+        </template>
+      </q-input>
+
+      <!-- Is Default -->
+      <q-checkbox
+        v-model="roleForm.is_default"
+        label="Set as default role (auto-assigned to new users)"
+        color="amber"
+      >
+        <q-tooltip>Only one role can be the default. Setting this will remove default status from other roles.</q-tooltip>
+      </q-checkbox>
+
+      <!-- Role Permissions Section (shown when editing) -->
+      <div v-if="editingRole && selectedRole" class="q-mt-md">
+        <q-separator></q-separator>
+        <div class="text-subtitle2 q-mt-md q-mb-sm">
+          <q-icon name="key" class="q-mr-xs"></q-icon>
+          Role Permissions
+          <q-btn
+            flat
+            dense
+            round
+            size="sm"
+            icon="add"
+            color="primary"
+            class="q-ml-sm"
+            @click="showAddRolePermissionDialog = true"
+          >
+            <q-tooltip>Add permission to role</q-tooltip>
+          </q-btn>
+        </div>
+
+        <div v-if="rolePermissionsForView.length === 0" class="text-caption text-grey-6 text-center q-pa-md">
+          No permissions assigned to this role yet
+        </div>
+
+        <q-list v-else separator dense>
+          <q-item v-for="perm in rolePermissionsForView" :key="perm.id">
+            <q-item-section avatar>
+              <q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
+                <q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
+              </q-avatar>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{% raw %}{{ getAccountName(perm.account_id) }}{% endraw %}</q-item-label>
+              <q-item-label caption>
+                <q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
+                  {% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
+                </q-chip>
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-btn
+                flat
+                round
+                dense
+                icon="delete"
+                color="negative"
+                size="sm"
+                @click="deleteRolePermission(perm.id)"
+              >
+                <q-tooltip>Remove permission</q-tooltip>
+              </q-btn>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" color="grey" @click="closeRoleDialog"></q-btn>
+      <q-btn
+        unelevated
+        :label="editingRole ? 'Update' : 'Create'"
+        color="primary"
+        @click="saveRole"
+        :loading="savingRole"
+        :disable="!roleForm.name"
+      ></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+
+<!-- Add Permission to Role Dialog -->
+<q-dialog v-model="showAddRolePermissionDialog" position="top">
+  <q-card class="q-pa-lg" style="min-width: 500px">
+    <q-card-section>
+      <div class="text-h6">Add Permission to Role</div>
+      <div class="text-caption text-grey-7">
+        Grant this role access to an account
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-gutter-md">
+      <!-- Account Selection -->
+      <q-select
+        v-model="rolePermissionForm.account_id"
+        :options="accountOptions"
+        option-value="value"
+        option-label="label"
+        emit-value
+        map-options
+        label="Account *"
+        outlined
+        dense
+        :rules="[val => !!val || 'Account is required']"
+      >
+        <template v-slot:prepend>
+          <q-icon name="account_balance"></q-icon>
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.label }}{% endraw %}</q-item-label>
+              <q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
+                🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
+              </q-item-label>
+              <q-item-label v-else caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_virtual" side>
+              <q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <!-- Permission Type -->
+      <q-select
+        v-model="rolePermissionForm.permission_type"
+        :options="permissionTypeOptions"
+        option-value="value"
+        option-label="label"
+        emit-value
+        map-options
+        label="Permission Type *"
+        outlined
+        dense
+        :rules="[val => !!val || 'Permission type is required']"
+      >
+        <template v-slot:prepend>
+          <q-icon name="key"></q-icon>
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.label }}{% endraw %}</q-item-label>
+              <q-item-label caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <!-- Notes -->
+      <q-input
+        v-model="rolePermissionForm.notes"
+        label="Notes (optional)"
+        type="textarea"
+        outlined
+        dense
+        rows="2"
+      >
+        <template v-slot:prepend>
+          <q-icon name="note"></q-icon>
+        </template>
+      </q-input>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" color="grey" @click="closeAddRolePermissionDialog"></q-btn>
+      <q-btn
+        unelevated
+        label="Add Permission"
+        color="primary"
+        @click="addRolePermission"
+        :disable="!rolePermissionForm.account_id || !rolePermissionForm.permission_type"
+      ></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+
+<!-- View Role Dialog -->
+<q-dialog v-model="showViewRoleDialog" position="top">
+  <q-card class="q-pa-lg" style="min-width: 600px; max-width: 800px">
+    <q-card-section v-if="selectedRole">
+      <div class="text-h6">
+        <q-icon name="badge" color="blue" class="q-mr-sm"></q-icon>
+        {% raw %}{{ selectedRole.name }}{% endraw %}
+        <q-chip v-if="selectedRole.is_default" size="sm" color="amber" text-color="white" icon="star" class="q-ml-sm">
+          DEFAULT
+        </q-chip>
+      </div>
+      <div class="text-caption text-grey-7 q-mt-sm" v-if="selectedRole.description">
+        {% raw %}{{ selectedRole.description }}{% endraw %}
+      </div>
+    </q-card-section>
+
+    <q-separator></q-separator>
+
+    <q-card-section v-if="selectedRole">
+      <div class="text-subtitle2 q-mb-md">
+        <q-icon name="security" class="q-mr-sm"></q-icon>
+        Role Permissions ({% raw %}{{ rolePermissionsForView.length }}{% endraw %})
+      </div>
+
+      <div v-if="rolePermissionsForView.length === 0" class="text-center text-grey q-pa-md">
+        No permissions assigned to this role yet
+      </div>
+
+      <q-list v-else separator>
+        <q-item v-for="perm in rolePermissionsForView" :key="perm.id">
+          <q-item-section avatar>
+            <q-avatar :color="getPermissionColor(perm.permission_type)" text-color="white" size="sm">
+              <q-icon :name="getPermissionIcon(perm.permission_type)"></q-icon>
+            </q-avatar>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>{% raw %}{{ getAccountName(perm.account_id) }}{% endraw %}</q-item-label>
+            <q-item-label caption>
+              <q-chip size="sm" :color="getPermissionColor(perm.permission_type)" text-color="white">
+                {% raw %}{{ getPermissionLabel(perm.permission_type) }}{% endraw %}
+              </q-chip>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+
+      <q-separator class="q-mt-md q-mb-md"></q-separator>
+
+      <div class="text-subtitle2 q-mb-md">
+        <q-icon name="people" class="q-mr-sm"></q-icon>
+        Users with this role ({% raw %}{{ roleUsersForView.length }}{% endraw %})
+      </div>
+
+      <div v-if="roleUsersForView.length === 0" class="text-center text-grey q-pa-md">
+        No users assigned to this role yet
+      </div>
+
+      <q-list v-else separator>
+        <q-item v-for="user in roleUsersForView" :key="user.id">
+          <q-item-section>
+            <q-item-label>{% raw %}{{ user.user_id }}{% endraw %}</q-item-label>
+            <q-item-label caption>
+              Granted: {% raw %}{{ formatDate(user.granted_at) }}{% endraw %}
+              <span v-if="user.expires_at"> | Expires: {% raw %}{{ formatDate(user.expires_at) }}{% endraw %}</span>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Close" color="primary" v-close-popup></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+
+<!-- Delete Role Confirmation Dialog -->
+<q-dialog v-model="showDeleteRoleDialog" persistent>
+  <q-card>
+    <q-card-section>
+      <div class="text-h6">Delete Role?</div>
+    </q-card-section>
+
+    <q-card-section v-if="roleToDelete">
+      <p>Are you sure you want to delete this role?</p>
+      <p class="text-caption text-orange-9">
+        <q-icon name="warning" class="q-mr-sm"></q-icon>
+        <strong>Warning:</strong> This will remove all permissions associated with this role
+        and revoke role assignments from all users. This action cannot be undone.
+      </p>
+      <q-list dense bordered class="rounded-borders q-mt-md">
+        <q-item>
+          <q-item-section>
+            <q-item-label caption>Role</q-item-label>
+            <q-item-label>{% raw %}{{ roleToDelete.name }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label caption>Affected Users</q-item-label>
+            <q-item-label>{% raw %}{{ roleToDelete.user_count }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label caption>Permissions</q-item-label>
+            <q-item-label>{% raw %}{{ roleToDelete.permission_count }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
+      <q-btn
+        unelevated
+        label="Delete Role"
+        color="negative"
+        @click="deleteRole"
+        :loading="deletingRole"
+      ></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+
+<!-- Revoke User Role Confirmation Dialog -->
+<q-dialog v-model="showRevokeUserRoleDialog" persistent>
+  <q-card>
+    <q-card-section>
+      <div class="text-h6">Revoke Role from User?</div>
+    </q-card-section>
+
+    <q-card-section v-if="userRoleToRevoke">
+      <p>Are you sure you want to revoke this role from the user? They will immediately lose all permissions associated with this role.</p>
+      <q-list dense bordered class="rounded-borders q-mt-md">
+        <q-item>
+          <q-item-section>
+            <q-item-label caption>User</q-item-label>
+            <q-item-label>{% raw %}{{ userRoleToRevoke.user_id }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label caption>Role</q-item-label>
+            <q-item-label>{% raw %}{{ getRoleName(userRoleToRevoke.role_id) }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-if="userRoleToRevoke.notes">
+          <q-item-section>
+            <q-item-label caption>Notes</q-item-label>
+            <q-item-label>{% raw %}{{ userRoleToRevoke.notes }}{% endraw %}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
+      <q-btn
+        unelevated
+        label="Revoke Role"
+        color="negative"
+        @click="revokeUserRole"
+        :loading="revokingUserRole"
+      ></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+
+<!-- Assign Role Dialog -->
+<q-dialog v-model="showAssignRoleDialog" position="top">
+  <q-card class="q-pa-lg" style="min-width: 500px">
+    <q-card-section>
+      <div class="text-h6">Assign User to Role</div>
+      <div class="text-caption text-grey-7">
+        Assign a user to a role to grant them all permissions associated with that role.
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-gutter-md">
+      <!-- User Selection -->
+      <q-select
+        v-model="assignRoleForm.user_id"
+        label="User *"
+        hint="Search and select a user"
+        :options="userOptions"
+        option-value="id"
+        option-label="label"
+        emit-value
+        map-options
+        use-input
+        @filter="filterUsers"
+        outlined
+        dense
+        :rules="[val => !!val || 'User is required']"
+      >
+        <template v-slot:prepend>
+          <q-icon name="person"></q-icon>
+        </template>
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No users found
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <!-- Role Selection -->
+      <q-select
+        v-model="assignRoleForm.role_id"
+        label="Role *"
+        hint="Select a role to assign"
+        :options="roleOptions"
+        option-value="id"
+        option-label="name"
+        emit-value
+        map-options
+        outlined
+        dense
+        :rules="[val => !!val || 'Role is required']"
+      >
+        <template v-slot:prepend>
+          <q-icon name="badge"></q-icon>
+        </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
+              <q-item-label caption>{% raw %}{{ scope.opt.description }}{% endraw %}</q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_default" side>
+              <q-chip size="sm" color="amber" text-color="white" icon="star">Default</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <!-- Expiration Date -->
+      <q-input
+        v-model="assignRoleForm.expires_at"
+        label="Expiration Date (Optional)"
+        hint="Leave empty for permanent assignment"
+        type="datetime-local"
+        outlined
+        dense
+      >
+        <template v-slot:prepend>
+          <q-icon name="event"></q-icon>
+        </template>
+      </q-input>
+
+      <!-- Notes -->
+      <q-input
+        v-model="assignRoleForm.notes"
+        label="Notes (Optional)"
+        hint="Optional notes for admin reference"
+        type="textarea"
+        outlined
+        dense
+        rows="3"
+      >
+        <template v-slot:prepend>
+          <q-icon name="note"></q-icon>
+        </template>
+      </q-input>
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" color="grey" v-close-popup></q-btn>
+      <q-btn
+        unelevated
+        label="Assign Role"
+        color="primary"
+        @click="assignRole"
+        :loading="assigningRole"
+        :disable="!assignRoleForm.user_id || !assignRoleForm.role_id"
+      ></q-btn>
+    </q-card-actions>
+  </q-card>
+</q-dialog>
 {% endblock %}