Admin Console UI Specification

1. Overview

The Admin Console is a comprehensive administration interface for managing identity, users, roles, clients, and system settings. It provides a unified experience for administrators to manage identity providers and their associated resources.

1.1 Design Principles

• Clean and Professional: Use flat cards (no shadows) to reduce visual noise
• Consistent Layout: All pages follow a standard structure with header, content area, and optional footer
• Progressive Disclosure: Show summary information first, details on demand
• Responsive: Support desktop and tablet viewports

1.2 Target Users

• System administrators
• Identity administrators
• DevOps engineers

2. Global Layout Structure

2.1 Page Template

Every Admin page follows this structure:

┌─────────────────────────────────────────────────────────┐
│ SxSection (Header - Background2)                        │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ SxPageBox                                           │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ SxStack Horizontal                              │ │ │
│ │ │ [Icon] [Title + Description]                    │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ SxSection (Content - Fill)                              │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ SxPageBox                                           │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ SxStack Vertical                                │ │ │
│ │ │ [Cards / Content]                               │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

2.2 Header Section

• Background: var(--sx-colorNeutralBackground2)
• Gutter Size: ControlSize.None
• Content:
  • Icon: font-size: 2rem; color: var(--sx-colorBrandForeground1)
  • Title: TypographyVariant.H3
  • Description: TypographyVariant.Body

2.3 Content Section

• Gutter Size: ControlSize.Large
• Fill: true
• Padding: ControlSize.Large

2.4 Card Usage

All cards in Admin Console MUST use Flat="true" parameter:

<SxCard Flat="true">
    <Header>...</Header>
    <ChildContent>...</ChildContent>
</SxCard>

3. Page Specifications

3.1 Overview Page (/admin or /admin/overview)

Purpose: Dashboard showing system status and quick actions.

Sections:

1. Administrator Status Card

   • Current user avatar, name, email
   • Role badges (admin badge uses BadgeAppearance.Brand)

2. Quick Stats Grid (3 columns)

   • Active Servers count
   • Total Users count
   • System Health percentage

3. Quick Actions Card

   • Navigation buttons to all admin pages
   • Use ButtonAppearance.Outline for all buttons
   • Each button has an icon and label

4. Recent Activity Card

   • List of recent system events
   • Each item: Icon + Description + Timestamp
   • Use SxDivider between items

3.2 Users Page (/admin/users)

Purpose: Manage users in the selected identity server.

Sections:

1. Server Selector Card

   • SxAdminServerSelector component
   • Width: 300px

2. User Statistics Grid (4 columns)

   • Total Users
   • Active Users
   • Admins
   • Disabled Users
   • Each shows loading state with SxProgressRing

3. User List Card

   • SxAdminUserListConnected component
   • PageSize: 20

3.3 Roles Page (/admin/roles)

Purpose: Manage roles in the selected identity server.

Content:

• Uses SxAdminRoleListConnected component
• HeaderText: "Realm Roles"

3.4 Clients Page (/admin/clients)

Purpose: Manage OAuth/OIDC clients.

Sections:

1. Server Selector Card
2. Client Statistics Grid (4 columns)
   • Total Clients
   • Active clients
   • Confidential clients
   • Public clients
3. Client List Card
   • SxAdminClientListConnected component

3.5 Servers Page (/admin/servers)

Purpose: Configure identity provider connections.

Sections:

1. Server List Card

   • SxAdminServerList component
   • Callbacks for add, edit, delete, test connection

2. Help Section Grid (2 columns)

   • Supported Providers card
   • Quick Start guide card

3.6 Profiles Page (/admin/profiles)

Purpose: Manage SharedProfile data.

Sections:

1. Server Status Card

   • Server name
   • Connection status badge
   • Refresh button

2. Profiles List Card

   • Search input
   • Create Profile button
   • DataGrid with columns: Avatar, User ID, Display Name, Language, Theme, Updated, Actions

3. Profile Statistics Grid (4 columns)

   • Total Profiles
   • Light Theme users
   • Dark Theme users
   • Language count

3.7 Groups Page (/admin/groups)

Purpose: Organize users into groups.

Layout: 3-column grid

1. Groups Tree Card (span 1)

   • Hierarchical group display
   • Add button in header

2. Group Details Card (span 2)

   • Tabs: Members, Roles, Settings
   • Edit and Delete buttons when group selected

3.8 Sessions Page (/admin/sessions)

Purpose: Monitor and manage active sessions.

Sections:

1. Statistics Grid (4 columns)

   • Active Sessions
   • Unique Users
   • Desktop Sessions
   • Mobile Sessions

2. Session List Card

   • Search input
   • Device filter dropdown
   • Refresh and Terminate All buttons
   • DataGrid with session details

3. Recent Activity Card

   • Timeline of session events

3.9 User Detail Page (`/admin/users/

Purpose: View and manage individual user.

Sections:

1. Breadcrumb Navigation
2. Profile Information Card
3. Roles & Permissions Card
4. Active Sessions Card
5. Actions Card

4. Component Requirements

4.1 Required NextUI Components

4.2 Badge Appearance Guide

4.3 Icon Usage

All icons use FontAwesome names:

• Users: users, user, user-plus, user-check, user-xmark
• Roles: shield-halved, shield
• Servers: server
• Clients: window-restore
• Sessions: clock-rotate-left, desktop, mobile-screen
• Actions: pen, trash, plus, arrows-rotate

5. Interaction Patterns

5.1 CRUD Operations

1. Create: Opens dialog with form
2. Read: Data displayed in DataGrid or card
3. Update: Opens edit dialog, pre-filled
4. Delete: Confirmation dialog with warning

5.2 Dialog Structure

<SxDialog @bind-Visible="_dialogOpen" Title="Dialog Title">
    <ChildContent>
        <!-- Form content -->
    </ChildContent>
    <Footer>
        <SxButton Appearance="ButtonAppearance.Outline">Cancel</SxButton>
        <SxButton Appearance="ButtonAppearance.Accent">Confirm</SxButton>
    </Footer>
</SxDialog>

5.3 Loading States

• Use SxProgressRing Size="ControlSize.Small" inline with text
• Disable interactive elements during loading
• Show loading indicator for async operations

5.4 Error Handling

• Display errors using SxMessageBar Intent="MessageIntent.Error"
• Include dismissible option where appropriate
• Clear errors when operation succeeds

6. Authorization

6.1 Access Control

All Admin pages require the admin role:

<SxAuthGuard Roles="@(new[] { "admin" })" RedirectToLogin="false">
    <ChildContent>
        <!-- Authorized content -->
    </ChildContent>
    <UnauthorizedContent>
        <!-- Access denied message -->
    </UnauthorizedContent>
</SxAuthGuard>

6.2 Unauthorized Content

Show a centered message with:

• Large muted icon
• "Access Denied" heading
• Explanation text
• Login button (if not authenticated)
• Current user info (if authenticated but lacking role)

7. Accessibility Requirements

7.1 Keyboard Navigation

• All interactive elements must be focusable
• Tab order follows visual layout
• Enter/Space activates buttons
• Escape closes dialogs

7.2 Screen Readers

• All images/icons have appropriate labels
• Form fields have associated labels
• Status changes are announced
• DataGrid has proper table semantics

7.3 Visual

• Minimum contrast ratio: 4.5:1 for text
• Focus indicators visible
• Color not sole indicator of status (use icons + text)

8. Design Token Usage

8.1 Colors

8.2 Spacing

9. Revision History