# User Management

## Purpose
User Management handles CRUD operations for internal admin users and system operators. This page is exclusively for managing internal staff accounts — not agents, merchants, or external users. It provides user creation, editing, password resets, and account status management.

## Components
- Page header with icon and title
- Statistics cards (6 metrics)
- Action bar with Create, Delete, Export, Refresh buttons
- Search input
- Search & Filter section with multiple filter fields
- User list data table
- Business Rules section
- Create User modal
- Edit User modal
- View User modal
- Reset Password modal

## Header
- **Title**: "User Management"
- **Subtitle**: "Manage all internal administrators and system operators"
- **Page Icon**: Purple background with user icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Users | `totalUsers` | All registered admin users |
| Active Users | `activeUsers` | Currently active accounts |
| Online Users | `onlineUsers` | Users currently logged in |
| Disabled Users | `disabledUsers` | Disabled accounts |
| Super Admins | `superAdmins` | Users with Super Admin role |
| Operations Team | `opsTeam` | Users in Operations department |

## Filters
| Filter | ID | Type | Options |
|--------|-----|------|---------|
| User ID | `filterId` | text | — |
| Full Name | `filterName` | text | — |
| Role | `filterRole` | select | All Roles, Super Admin, Operations, Finance, Customer Support |
| Department | `filterDepartment` | select | All Departments, Operations, Finance, Customer Support, Management |
| Status | `filterStatus` | select | All Status, Active, Inactive, Disabled |
| Date From | `filterDateFrom` | date | — |
| Date To | `filterDateTo` | date | — |

## Search
- **Input ID**: `searchInput`
- **Placeholder**: "Search users..."
- **Searches**: Name, email, username, role

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Create User | Opens create modal | Action bar |
| Delete User | Deletes selected users | Action bar |
| Export | Exports user list to CSV | Action bar |
| Refresh | Reloads user list | Action bar |
| Clear Filters | Resets all filters | Filter section |
| Search | Applies search query | Search bar |

## Forms

### Create User Modal (`createModal`)
| Field | ID | Type | Required | Options |
|-------|-----|------|----------|---------|
| User ID | `newUserId` | text | No (auto) | Auto-generated, readonly |
| Full Name | `newFullName` | text | Yes | — |
| Username | `newUsername` | text | Yes | — |
| Email | `newEmail` | email | Yes | — |
| Phone Number | `newPhone` | tel | No | — |
| Role | `newRole` | select | Yes | Select Role, Super Admin, Operations, Finance, Customer Support |
| Department | `newDepartment` | select | No | Select Department, Operations, Finance, Customer Support, Management |
| Administrator | `newAdministrator` | text | No | — |
| Account Status | `newStatus` | select | No | Active, Inactive, Disabled |
| Password | `newPassword` | password | Yes | — |
| Confirm Password | `newConfirmPassword` | password | Yes | Must match password |
| Two Factor Authentication | `newTwoFactor` | toggle | No | Enable 2FA |

**Buttons**: Reset, Save User

### Edit User Modal (`editModal`)
| Field | ID | Type | Required |
|-------|-----|------|----------|
| Full Name | `editFullName` | text | Yes |
| Email | `editEmail` | email | Yes |
| Phone Number | `editPhone` | tel | No |
| Role | `editRole` | select | No |
| Department | `editDepartment` | select | No |
| Administrator | `editAdministrator` | text | No |
| Account Status | `editStatus` | select | No |

**Hidden**: `editUserId`
**Buttons**: Cancel, Save Changes

### View User Modal (`viewModal`)
**Title**: "User Details"
**Displayed Fields**: User ID, Full Name, Username, Email, Phone, Role, Department, Administrator, Last Login, Status, 2FA, Created
**Button**: Close

### Reset Password Modal (`resetPasswordModal`)
| Field | ID | Type | Required |
|-------|-----|------|----------|
| User | `resetUserName` | text | No (readonly) |
| New Password | `newPasswordInput` | password | Yes |
| Confirm Password | `confirmPasswordInput` | password | Yes |

**Hidden**: `resetUserId`
**Buttons**: Cancel, Reset Password

## Tables

### User List Table
| Column | Description |
|--------|-------------|
| Checkbox | Select all/individual |
| User ID | Unique identifier |
| Full Name | User's full name |
| Username | Login username |
| Email | Email address |
| Phone | Phone number |
| Role | User role (Super Admin, Operations, Finance, Customer Support) |
| Department | Department assignment |
| Administrator | Administrator name |
| Last Login | Last login timestamp |
| Status | Account status (Active, Inactive, Disabled) |
| Created | Account creation date |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| View | View user details | Eye |
| Edit | Edit user information | Pencil |
| Reset Password | Reset user password | Key |
| Disable/Enable | Toggle account status | Toggle |
| Delete | Delete user account | Trash |

## Workflow
1. Admin navigates to User Management page
2. Views statistics cards showing user counts
3. Uses search/filters to find specific users
4. Clicks "Create User" to open creation modal
5. Fills in required fields (name, username, email, role, password)
6. Optionally enables 2FA
7. Saves new user
8. Can edit existing users via row action
9. Can reset passwords for users
10. Can disable/enable user accounts
11. Can export user list to CSV
12. Can delete selected users (with confirmation)

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `user_management` | User Management | Page title |
| `manage_all_internal_administrators` | Manage all internal administrators and system operators | Subtitle |
| `create_user` | Create User | Button text |
| `delete_user` | Delete User | Button text |
| `export` | Export | Button text |
| `refresh` | Refresh | Button text |
| `clear_filters` | Clear Filters | Button text |
| `search_users` | Search users... | Placeholder |
| `total_users` | Total Users | Stat label |
| `active_users` | Active Users | Stat label |
| `online_users` | Online Users | Stat label |
| `disabled_users` | Disabled Users | Stat label |
| `super_admins` | Super Admins | Stat label |
| `operations_team` | Operations Team | Stat label |
| `user_id` | User ID | Column/filter |
| `full_name` | Full Name | Column/filter |
| `username` | Username | Column |
| `email` | Email | Column |
| `phone` | Phone | Column |
| `role` | Role | Column/filter |
| `department` | Department | Column/filter |
| `administrator` | Administrator | Column |
| `last_login` | Last Login | Column |
| `status` | Status | Column/filter |
| `created` | Created | Column |
| `actions` | Actions | Column |
| `active` | Active | Status |
| `inactive` | Inactive | Status |
| `disabled` | Disabled | Status |
| `view` | View | Action |
| `edit` | Edit | Action |
| `reset_password` | Reset Password | Action |
| `disable` | Disable | Action |
| `enable` | Enable | Action |
| `save` | Save | Button |
| `cancel` | Cancel | Button |
| `reset` | Reset | Button |
| `two_factor_authentication` | Two Factor Authentication | Label |
| `enable_2fa` | Enable 2FA | Toggle label |

## Responsive Requirements

### Desktop (≥1024px)
- 6-column statistics grid
- Horizontal filter bar
- Full-width data table
- Side-by-side modal fields

### Tablet (768px–1023px)
- 3-column statistics grid
- Stacked filter fields
- Horizontally scrollable table
- Stacked modal fields

### Mobile (<768px)
- 2-column statistics grid
- Full-width stacked filters
- Horizontally scrollable table
- Full-width modal fields

## API Dependency
- **Users API**: GET `/api/users` — List all users
- **Create User**: POST `/api/users` — Create new user
- **Update User**: PUT `/api/users/:id` — Update user
- **Delete User**: DELETE `/api/users/:id` — Delete user
- **Reset Password**: POST `/api/users/:id/reset-password` — Reset password
- **Export Users**: GET `/api/users/export` — CSV export