User Management Interface
The User Management interface provides administrators with a comprehensive set of tools to view and manage users within Pyra. This document breaks down each section of the interface with visual references.
Interface Overview
The User Management page is divided into several key functional areas:
┌─────────────────────────────────────────────────────────┐
│ Header Section │
├─────────────────────────────────────────────────────────┤
│ Search and Filter Bar │
├─────────────────────────────────────────────────────────┤
│ User List Table │
│ │
│ │
│ │
├─────────────────────────────────────────────────────────┤
│ Pagination Controls │
└─────────────────────────────────────────────────────────┘
Header Section
The header section contains:
┌─────────────────────────────────────────────────────────┐
│ User Management [Add User] │
│ Manage system users, permissions, and access │
└─────────────────────────────────────────────────────────┘
- Page Title: "User Management" displayed prominently
- Page Description: Brief explanation of the page purpose
- Add User Button: Button to create new users in the system
Search and Filter Section
┌─────────────────────────────────────────────────────────┐
│ [Search by name or email... 🔍] [All Roles ▼] [Clear] │
└─────────────────────────────────────────────────────────┘
- Search Box: Allows searching for users by name or email
- Role Filter: Dropdown to filter users by specific roles
- Clear Button: Resets all applied filters
User List Table
The main component of the interface displaying user information in a tabular format:
┌─────────┬───────────────┬──────────┬───────────────┬─────────┬─────────┐
│ Name ▼ │ Email │ Role │ Organization │ Created │ Actions │
├─────────┼───────────────┼──────────┼───────────────┼─────────┼─────────┤
│ John... │ john@mail.com │ 🟢 Emp.. │ Mountain Ret. │ 04/15/25│ 👁️ ✏️ 🗑️ │
│ Sarah...│ sarah@mail.com│ 🔵 Man.. │ Urban Stays │ 04/12/25│ 👁️ ✏️ 🗑️ │
│ Admin...│ admin@mail.com│ 🔴 Sys.. │ (None) │ 04/10/25│ 👁️ ✏️ │
└─────────┴───────────────┴──────────┴───────────────┴─────────┴─────────┘
Table Columns
- Name: User's full name (sortable)
- Email: User's email address (sortable)
- Role: User's role with color-coded badge (sortable)
- 🔴 Sys Admin: System administrator
- 🟠 Org Admin: Organization administrator
- 🔵 Manager: Organization manager
- 🟢 Employee: Regular employee
- Organization: The organization the user belongs to
- Created: Account creation date (sortable)
- Actions: Interactive buttons
- 👁️ View Details: Opens detailed user information
- ✏️ Edit: Modify user information
- 🗑️ Delete: Remove user (not available for your own account)
Sorting
- Click any column header with a sort indicator to sort by that column
- Click again to toggle between ascending (▲) and descending (▼) order
- Current sort column and direction is indicated with an arrow
Modal Windows
The interface uses modal windows for detailed interactions:
Add User Modal
┌─────────────────────────────────────────────────┐
│ Add New User [X] │
├─────────────────────────────────────────────────┤
│ Name: │
│ [ ] │
│ │
│ Email: │
│ [ ] │
│ │
│ Password: │
│ [ ] │
│ │
│ ℹ️ Note: New users are created with the default │
│ ORG_EMPLOYEE role. Admin-level role │
│ assignment requires admin action after user │
│ creation. │
│ │
│ [Cancel] [Create User] │
└─────────────────────────────────────────────────┘
User Details Modal
┌─────────────────────────────────────────────────┐
│ User Details [X] │
├─────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────────────┐│
│ │ [J] │ │ Organization ││
│ │ John Smith │ │ Mountain Retreats ││
│ │ john@example.com│ │ Plan: Premium ││
│ │ 🟢 Employee │ │ ││
│ │ │ │ Account Details ││
│ │ User ID │ │ Created: 04/15/2025 ││
│ │ abc123... │ │ Updated: 04/20/2025 ││
│ └─────────────────┘ │ ││
│ │ ││
│ │ [Edit User] [Delete] ││
│ └─────────────────────────┘│
└─────────────────────────────────────────────────┘
Edit User Modal
┌─────────────────────────────────────────────────┐
│ Edit User: John Smith [X] │
├─────────────────────────────────────────────────┤
│ ⚠️ Limited Editing Capability │
│ Currently, only name and email fields can │
│ be updated. │
│ │
│ User ID: │
│ [abc123def456... (disabled) ] │
│ │
│ Name: │
│ [John Smith ] │
│ │
│ Email: │
│ [john@example.com ] │
│ │
│ Role: │
│ [ORG_EMPLOYEE (disabled) ] 🟢 Employee │
│ ℹ️ Role cannot be changed at this time │
│ │
│ Organization: │
│ [Mountain Retreats (disabled) ] │
│ ℹ️ Organization cannot be changed at this time │
│ │
│ ℹ️ Password changes must be handled separately │
│ through the reset password process. │
│ │
│ [Cancel] [Update John Smith] │
└─────────────────────────────────────────────────┘
Delete Confirmation Modal
┌─────────────────────────────────────────────────┐
│ ⚠️ Confirm Delete [X] │
├─────────────────────────────────────────────────┤
│ You are about to delete user: │
│ ┌─────────────────────────────────────────────┐ │
│ │ John Smith │ │
│ │ john@example.com │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ This action cannot be undone. This will │
│ permanently delete the user and remove their │
│ data from our servers. │
│ │
│ [Cancel] [Delete User] │
└─────────────────────────────────────────────────┘
Access Control Based on User Role
Access to the User Management interface and its features is controlled based on the user's role:
System Administrators (SYSTEM_ADMIN)
- Full access to all aspects of user management
- Can view and manage all users across all organizations
- Can see and modify System Administrators
Organization Administrators (ORG_ADMIN)
- Limited to users within their own organization
- Cannot see users from other organizations
- Cannot modify System Administrators
Organization Managers (ORG_MANAGER)
- May have read-only access to user management within their organization
- Limited administrative capabilities
Organization Employees (ORG_EMPLOYEE)
- No access to user management features
- Will be redirected if attempting to access this page
Responsive Design
The User Management interface is fully responsive and adapts to different screen sizes:
Desktop View
- Full table with all columns visible
- Horizontal layout for search and filter controls
- Larger buttons and more spacious layout
Tablet View
- Table may scroll horizontally for all columns
- Adjusted column widths for readability
- Slightly condensed layout
Mobile View
- Vertically stacked controls
- Full-width buttons
- Highly optimized table for small screens
- Some columns may be hidden (e.g., Created date)
User Interface Tips
- Hover States: Most interactive elements have hover states for better usability
- Keyboard Navigation: The interface supports keyboard navigation for accessibility
- Error Handling: Form validation provides clear error messages
- Loading States: Operations show loading indicators during processing
- Success/Error Notifications: Toast notifications appear for successful or failed operations