User Management Screen - UI Specification

Overview

The User Management Screen enables administrators to manage system users effectively. This interface provides features such as adding, editing, and enabling/disabling users, as well as assigning roles.

---

Requirements

Functional Requirements

1. View Users:

   • Display a table of users with the following columns:
     • ID: A unique numeric identifier for the user.
     • User Name: The username of the user.
     • Email: The user's email address.
     • Enabled: A boolean value (true or false) indicating whether the user is active.

2. Add New User:

   • Provide a form to input new user details:
     • Username (Required)
     • Display Name (Optional)
     • Phone (Optional)
     • Email (Required)
     • User Roles (Dropdown: Guest, Admin, SuperAdmin)
     • Enabled (Checkbox)

3. Edit Existing Users:

   • Allow administrators to modify user details by selecting a user from the table.

4. Filter Users:

   • A checkbox labeled "Hide Disabled User" to filter out inactive users from the table.

5. Save Changes:

   • A "Save User" button to save new or edited user details.

Non-Functional Requirements

1. Responsive Design: Ensure the UI adapts to different screen sizes and devices.
2. Validation: Implement validation for mandatory fields (e.g., Username, Email) and format (e.g., valid email addresses).
3. User Feedback: Provide success and error messages for user actions (e.g., saving a user).

---

UI Components and Behavior

1. User Table

• Columns: ID, User Name, Email, Enabled.
• Sorting: Allow sorting by clicking on column headers.
• Selection: Clicking a row loads the user data into the form for editing.

2. New User Form

• Fields:
  • Username: Text input, required.
  • Display Name: Text input, optional.
  • Phone: Text input, optional.
  • Email: Email input, required.
  • User Roles: Dropdown with options: Guest, Admin, SuperAdmin.
  • Enabled: Checkbox to mark the user as active/inactive.
• Behavior:
  • Clearing the form on clicking "+ New User".
  • Pre-filling the form fields when selecting a user from the table.

3. Buttons

• + New User: Clears the form for adding a new user.
• Save User: Saves the entered/edited user data.

4. Hide Disabled User Checkbox

• Filters the table to display only active users when checked.

---

Initial State

• The table displays all users.
• The "Hide Disabled User" checkbox is unchecked.
• The "New User" form is empty and ready for input.

---

Validation Rules

1. Username and Email are required fields.
2. Email must follow a valid email format.
3. At least one role must be selected from the dropdown.

---

Error Handling

• Display inline error messages for invalid input fields.
• Show a notification at the top for general errors (e.g., failed save).
• Confirm success with a message when a user is saved.

---

Development Notes

1. Use modern frameworks (React, Angular, or Vue.js) for UI implementation.
2. Ensure secure API integration for user management operations.
3. Follow accessibility standards to support diverse users.