RFC: Dashboard Enhancements #525
Description
RFC: Dashboard Enhancements
Phase: 6 — Developer Experience & Polish
Priority: P2 — Medium
Estimated Effort: High
Problem Statement
The admin dashboard (`web/dashboard/`, React + Chakra UI) needs UI for all the new features introduced in Phases 1-5. Currently it manages users, webhooks, and email templates. As Authorizer adds audit logs, permissions, M2M apps, API keys, organizations, SAML, SCIM, and metrics — the dashboard must surface these capabilities to admins.
Proposed Enhancements
1. Audit Log Viewer
- Search: Full-text search across actor, action, resource, IP
- Filters: By actor type, action type, resource type, date range, organization
- Timeline view: Chronological event timeline with expandable details
- Export: CSV/JSON export for compliance teams
- Real-time: Auto-refresh for live monitoring (polling or WebSocket)
2. Metrics Dashboard
- Login activity: Success/failure rate chart (time series)
- Signup trends: New registrations over time
- Active sessions: Current session count gauge
- Auth methods breakdown: Pie chart of login methods (password, social, passkey, etc.)
- Failed login heatmap: Time-of-day × day-of-week matrix showing failure patterns
- Top IPs: Most active IPs with failed attempts (credential stuffing indicator)
- Pulls data from Prometheus metrics endpoint or audit log aggregations
3. Application Management (M2M)
- List applications: Table with name, client_id, scopes, last used, status
- Create application: Form with name, description, scopes picker, org selector
- Secret display: Modal showing client_secret once on creation (with copy button)
- Rotate secret: Confirmation dialog + new secret display
- Application details: Usage stats, recent token issuance, rate limit status
4. API Key Management
- Per-user API keys: View keys created by any user
- Revoke keys: Admin can revoke any API key
- Usage stats: Last used time, IP, request count
5. Organization Management
- List organizations: Table with name, slug, domain, member count, status
- Create organization: Form with name, slug, domain, logo, settings
- Organization detail: Members list, invitations, SSO config, SCIM status, audit logs
- Member management: Add/remove members, change roles
- Invitation management: Send invites, view pending, resend/revoke
- Org settings: MFA policy, password policy, allowed auth methods toggles
6. Permission Designer
- Visual role-permission matrix: Rows = roles, Columns = permissions, Cells = checkboxes
- Permission CRUD: Create/edit/delete permissions with
resource:actionnaming helper - Role expansion: Click role to see all assigned permissions
- Drag-and-drop: Drag permissions onto roles for assignment
7. SAML/SCIM Configuration
- SAML connections: List, create, edit per organization
- IdP metadata upload: Drag-and-drop XML upload or URL input
- SP metadata download: One-click SP metadata XML download
- SSO test: Button to test SAML flow end-to-end
- SCIM connections: Enable/disable per org, generate tokens, view sync status
- Directory sync log: Recent provisioning events
8. Session Explorer
- Per-user sessions: View all active sessions for any user
- Session details: Device, IP, location, login method, last active
- Bulk revoke: Revoke all sessions for a user
- Current sessions count: Dashboard widget
Technical Approach
- Stack: React 18 + Chakra UI + Vite (existing stack)
- Data fetching: GraphQL queries to Authorizer admin API
- Charts: Recharts or Chart.js for metrics visualization
- Tables: React Table for sortable/filterable data grids
- Real-time: Polling with configurable interval (WebSocket as future enhancement)
- Routing: React Router with lazy loading for new sections
Navigation Structure
Dashboard
├── Overview (metrics summary)
├── Users
│ ├── List
│ └── User Detail (sessions, API keys, audit log)
├── Organizations
│ ├── List
│ └── Org Detail (members, SSO, SCIM, settings)
├── Applications (M2M)
│ ├── List
│ └── App Detail
├── Permissions
│ ├── Permission List
│ └── Role-Permission Matrix
├── Audit Logs
├── Security
│ ├── IP Rules
│ ├── Rate Limiting Status
│ └── Risk Events
├── Webhooks
├── Email Templates
└── Settings