Frontend: Implement Service Accounts Page CRUD & Key Management

[mrveiss]

Problem

The Service Accounts page (frontend/src/pages/ServiceAccounts.tsx) currently only displays accounts in read-only mode. The Create and Manage Keys buttons are rendered but not connected to any handlers.

Current State

• ✅ Displays list of service accounts from API
• ✅ Shows username, description, status, role, owner
• ✅ Shows API key count and expiration date
• ❌ "Create Service Account" button does nothing
• ❌ "Manage Keys" button does nothing
• ❌ No edit or delete functionality visible

Required Changes

1. Add React Query Mutations

Create/update hooks in useServiceAccounts.ts:

export function useCreateServiceAccount() { ... }
export function useUpdateServiceAccount() { ... }
export function useDeleteServiceAccount() { ... }
export function useServiceAccountKeys(accountId: string) { ... }
export function useCreateApiKey() { ... }
export function useRevokeApiKey() { ... }

2. Add Dialog Components

Create Service Account Dialog

• Username (required)
• Description (optional)
• Role selection
• Expiration date (optional)

Manage Keys Dialog

• List existing API keys with:
  • Key prefix (masked)
  • Created date
  • Last used date
  • Revoke button
• Create new API key button
• Show newly created key (only shown once)

Delete Service Account Confirmation

3. Wire Up Handlers

• Create button → opens create dialog
• Manage Keys button → opens keys management dialog
• Add Edit/Delete buttons to each account row

API Endpoints

The backend should have these endpoints:

• POST /api/v1/rbac/service-accounts - Create service account
• PUT /api/v1/rbac/service-accounts/{id} - Update service account
• DELETE /api/v1/rbac/service-accounts/{id} - Delete service account
• GET /api/v1/rbac/service-accounts/{id}/keys - List API keys
• POST /api/v1/rbac/service-accounts/{id}/keys - Create API key
• DELETE /api/v1/rbac/service-accounts/{id}/keys/{key_id} - Revoke key

Acceptance Criteria

• Can create new service accounts
• Can edit service account details
• Can delete service accounts (with confirmation)
• Can view list of API keys for an account
• Can create new API keys (key shown only once after creation)
• Can revoke existing API keys
• UI updates immediately after operations

Security Notes

• New API keys should only be displayed once at creation time
• Keys should be masked in the list view (show only prefix)
• Revoked keys should be immediately invalid

Related

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