Frontend: Implement Roles Page CRUD Operations

[mrveiss]

Problem

The Roles page (frontend/src/pages/Roles.tsx) currently only displays roles in read-only mode. The Create, Edit, and Delete buttons are rendered but not connected to any handlers.

Current State

• ✅ Displays list of roles from API
• ✅ Shows role name, description, permission count
• ✅ Indicates system roles with lock icon
• ❌ "Create Role" button does nothing
• ❌ Edit button (pencil icon) does nothing
• ❌ Delete button (trash icon) does nothing

Required Changes

1. Add React Query Mutations

Create hooks in useRoles.ts:

export function useCreateRole() { ... }
export function useUpdateRole() { ... }
export function useDeleteRole() { ... }

2. Add Dialog Components

• Create Role dialog with form fields:
  • Name (required)
  • Description (optional)
  • Permissions multi-select
• Edit Role dialog (same fields)
• Delete confirmation dialog

3. Wire Up Handlers

• Create button → opens create dialog
• Edit button → opens edit dialog with prefilled data
• Delete button → opens confirmation dialog
• System roles should not be editable/deletable

API Endpoints

The backend already has these endpoints:

• POST /api/v1/rbac/roles - Create role
• PUT /api/v1/rbac/roles/{role_id} - Update role
• DELETE /api/v1/rbac/roles/{role_id} - Delete role
• GET /api/v1/rbac/permissions - List available permissions

Acceptance Criteria

• Can create new roles with name, description, and permissions
• Can edit existing custom roles
• Can delete custom roles (with confirmation)
• System roles are protected from modification
• UI updates immediately after operations (React Query cache invalidation)

Related

• Part of RBAC system from Advanced RBAC and Audit Logging #8
• Related to Complete RBAC & Audit Integration Across All Endpoints #89 (RBAC integration)