User Management for Super Admin - Design Spec

Overview

Build a User Management page for Super Admin to perform full CRUD operations on all users across all organizations.

Route & Navigation

  • Route: /users
  • Sidebar Menu: “Users” item visible only to users with user:read:all permission (Super Admin)
  • Icon: TeamOutlined from Ant Design

Main List Page

Layout

┌─────────────────────────────────────────────────────────────┐
│  User Management                          [+ Create User]    │
├─────────────────────────────────────────────────────────────┤
│  [All Organizations ▼]  [🔍 Search by name or email...]     │
├─────────────────────────────────────────────────────────────┤
│  ☐  Name          │ Email            │ Role │ Org   │ Status│
│  ─────────────────────────────────────────────────────────  │
│  ☐  Nguyễn Văn A  │ admin@bentre.vn  │ Admin│ Org A │ Active│
│  ☐  Trần Thị B    │ owner@bentre.vn  │ Owner│ Org B │ Active│
│  ...                                                          │
├─────────────────────────────────────────────────────────────┤
│                                      [<] 1/5 [>]             │
└─────────────────────────────────────────────────────────────┘

Features

  • Create User Button: Primary button, opens slide-over in create mode
  • Organization Filter: Dropdown to filter by org, “All Organizations” default
  • Search: Filter by name or email, debounced 300ms
  • Table Columns:
    • Checkbox for selection
    • Avatar + Name
    • Email
    • Role (badge)
    • Organization (tag)
    • Status (Active/Suspended badge)
    • Actions (3-dot dropdown menu)

Pagination

  • Default 20 items per page
  • Page numbers bottom-right

Slide-over Panel

Width: 480px, slides from right with overlay backdrop.

Create Mode

Fields:

  • Email (input, required, validate email format)
  • Password (input, required, min 8 chars)
  • Confirm Password (input, required, must match)
  • Role (select, required) - options: Super Admin, Admin, Owner, Staff, Technical
  • Organization (select, required) - dropdown of all active organizations

Buttons: Cancel, Create

Edit Mode

Header: “Edit User - [name]”

Fields:

  • Email (readonly input, grey background)
  • Role (select, required)
  • Organization (readonly input, grey background)
  • Status Toggle: Active / Suspended

Buttons: Cancel, Save

View Mode (from 3-dot menu “View”)

Read-only display of all fields with action buttons:

  • Edit button → switches to edit mode
  • Suspend/Activate button → confirmation then action
  • Delete button → confirmation modal

Delete Confirmation

  • Modal dialog centered
  • Message: “Delete user [name]? This action cannot be undone.”
  • Buttons: Cancel, Delete (danger red)

States

  • Loading: Skeleton rows in table
  • Empty: “No users found” centered message with icon
  • Error: Toast notification with retry option

API Integration

Backend endpoints (already exist):

Method Endpoint Description
GET /api/v1/users List all users (query: orgId, search, page, limit)
POST /api/v1/users Create user
GET /api/v1/users/:id Get user details
PUT /api/v1/users/:id Update user
DELETE /api/v1/users/:id Delete user
POST /api/v1/users/:id/suspend Suspend user
POST /api/v1/users/:id/activate Activate user

Frontend service needs new methods:

  • getUsers(params) - list with filters
  • createUser(data) - create new
  • updateUser(id, data) - update
  • deleteUser(id) - delete
  • suspendUser(id) - suspend
  • activateUser(id) - activate

Component Structure

frontend/src/pages/users/
├── UsersPage.tsx              # Main list page
├── UsersPage.less              # Styles
├── components/
│   ├── UserTable.tsx           # Table with data
│   ├── UserFilters.tsx         # Filters bar
│   ├── UserSlideOver.tsx       # Slide-over panel (create/edit/view)
│   ├── UserForm.tsx            # Form inside slide-over
│   ├── DeleteConfirmModal.tsx  # Delete confirmation
│   └── UserStatusBadge.tsx     # Status badge component

RBAC

  • Permission required: user:*:all or user:*:system
  • Only accessible to Super Admin role

Acceptance Criteria

  1. Super admin can view all users across all organizations
  2. Super admin can filter users by organization
  3. Super admin can search users by name or email
  4. Super admin can create new user with email, password, role, and organization
  5. Super admin can edit user’s role and status
  6. Super admin can suspend/activate user
  7. Super admin can delete user with confirmation
  8. Slide-over panel slides from right with form
  9. Delete requires confirmation modal
  10. All actions show loading state and handle errors gracefully