# Role Management

## Purpose
Role Management handles the configuration of user roles for Role-Based Access Control (RBAC). It allows administrators to create, edit, and manage roles that determine what permissions users have within the system. Each role can be assigned to multiple users and has specific permission sets.

## Components
- Page header with icon and title
- Statistics cards (4 metrics)
- Action bar with Create, Delete, Export, Refresh buttons
- Search input
- Search & Filter section
- Role list data table
- Business Rules section
- Create Role modal
- Edit Role modal
- Delete Confirmation modal

## Header
- **Title**: "Role Management"
- **Subtitle**: "Manage user roles and access control"
- **Page Icon**: Blue background with shield icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Roles | `totalRoles` | All configured roles |
| Admin Roles | `adminRoles` | Administrator-level roles |
| Operator Roles | `operatorRoles` | Operator-level roles |
| Custom Roles | `customRoles` | Custom-configured roles |

## Filters
| Filter | ID | Type | Options |
|--------|-----|------|---------|
| Role Name | `filterName` | text | — |
| Status | `filterStatus` | select | All Status, Active, Inactive |

## Search
- **Input ID**: `searchInput`
- **Placeholder**: "Search roles..."
- **Searches**: Role name, description

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Create Role | Opens create modal | Action bar |
| Delete Role | Deletes selected roles | Action bar |
| Export | Exports role list to CSV | Action bar |
| Refresh | Reloads role list | Action bar |
| Clear Filters | Resets all filters | Filter section |

## Forms

### Create Role Modal
| Field | ID | Type | Required | Options |
|-------|-----|------|----------|---------|
| Role Name | `roleName` | text | Yes | — |
| Description | `roleDescription` | text | Yes | — |
| Status | `roleStatus` | select | No | Active, Inactive |

**Buttons**: Cancel, Save

### Edit Role Modal
| Field | ID | Type | Required |
|-------|-----|------|----------|
| Role Name | `editRoleName` | text | Yes |
| Description | `editRoleDescription` | text | Yes |
| Status | `editRoleStatus` | select | No |

**Buttons**: Cancel, Save

### Delete Confirmation Modal
**Title**: "Are you sure?"
**Message**: "This action cannot be undone. This will permanently delete the role and remove all associated data."
**Buttons**: Cancel, Delete

## Tables

### Role List Table
| Column | Description |
|--------|-------------|
| Checkbox | Select all/individual |
| Role ID | Unique identifier |
| Role Name | Display name |
| Description | Role description |
| User Count | Number of users with this role |
| Permissions | Number of assigned permissions |
| Status | Role status (Active, Inactive) |
| Created | Creation date |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| Edit | Edit role information | Pencil |
| Delete | Delete role | Trash |
| Toggle Status | Enable/disable role | Toggle |

## Workflow
1. Admin navigates to Role Management page
2. Views statistics cards showing role counts
3. Uses search/filters to find specific roles
4. Clicks "Create Role" to open creation modal
5. Enters role name and description
6. Sets initial status (Active/Inactive)
7. Saves new role
8. Can edit existing roles via row action
9. Can enable/disable roles
10. Can delete roles (with confirmation)
11. Can export role list to CSV

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `role_management` | Role Management | Page title |
| `create_role` | Create Role | Button text |
| `edit_role` | Edit Role | Modal title |
| `delete_role` | Delete Role | Button text |
| `role_name` | Role Name | Column/field |
| `description` | Description | Column/field |
| `status` | Status | Column/filter |
| `permissions` | Permissions | Column |
| `user_count` | User Count | Column |
| `created` | Created | Column |
| `actions` | Actions | Column |
| `active` | Active | Status |
| `inactive` | Inactive | Status |
| `save` | Save | Button |
| `cancel` | Cancel | Button |
| `delete` | Delete | Button |
| `export` | Export | Button text |
| `refresh` | Refresh | Button text |
| `total_roles` | Total Roles | Stat label |
| `admin_roles` | Admin Roles | Stat label |
| `operator_roles` | Operator Roles | Stat label |
| `custom_roles` | Custom Roles | Stat label |
| `are_you_sure` | Are you sure? | Modal title |
| `delete_confirmation` | This action cannot be undone. | Modal message |

## Responsive Requirements

### Desktop (≥1024px)
- 4-column statistics grid
- Horizontal filter bar
- Full-width data table

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

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

## API Dependency
- **Roles API**: GET `/api/roles` — List all roles
- **Create Role**: POST `/api/roles` — Create new role
- **Update Role**: PUT `/api/roles/:id` — Update role
- **Delete Role**: DELETE `/api/roles/:id` — Delete role
- **Export Roles**: GET `/api/roles/export` — CSV export