feat: comprehensive User Management UI implementation

Author: hemanandr

.claude/settings.local.json

@@ -14,7 +14,8 @@
       "Bash(ping:*)",
       "Bash(findstr:*)",
       "Bash(npx eslint:*)",
-      "Read(//c/ProgramData/ThingConnect.Pulse/logs/**)"
+      "Read(//c/ProgramData/ThingConnect.Pulse/logs/**)",
+      "WebSearch"
     ],
     "deny": [],
     "ask": []

ThingConnect.Pulse.Server/Controllers/UserManagementController.cs

@@ -187,7 +187,7 @@ public async Task<ActionResult<UserInfoDto>> CreateUserAsync([FromBody] CreateUs
             _logger.LogInformation("User created: {Username} (ID: {UserId}) by admin {AdminId}",
                 user.UserName, user.Id, currentUser?.Id);
 
-            return CreatedAtAction(nameof(GetUserByIdAsync), new { id = user.Id }, new UserInfoDto
+            var userDto = new UserInfoDto
             {
                 Id = user.Id,
                 Username = user.UserName,
@@ -196,7 +196,11 @@ public async Task<ActionResult<UserInfoDto>> CreateUserAsync([FromBody] CreateUs
                 CreatedAt = user.CreatedAt,
                 LastLoginAt = user.LastLoginAt,
                 IsActive = user.IsActive
-            });
+            };
+
+            // Return Ok for now to avoid routing issues
+            // TODO: Fix location header generation
+            return Ok(userDto);
         }
         catch (Exception ex)
         {

thingconnect.pulse.client/obj/Debug/package.g.props

@@ -27,6 +27,7 @@
     <PackageJsonDependenciesNextThemes Condition="$(PackageJsonDependenciesNextThemes) == ''">^0.4.6</PackageJsonDependenciesNextThemes>
     <PackageJsonDependenciesReact Condition="$(PackageJsonDependenciesReact) == ''">^19.1.1</PackageJsonDependenciesReact>
     <PackageJsonDependenciesReactDom Condition="$(PackageJsonDependenciesReactDom) == ''">^19.1.1</PackageJsonDependenciesReactDom>
+    <PackageJsonDependenciesReactHookForm Condition="$(PackageJsonDependenciesReactHookForm) == ''">^7.62.0</PackageJsonDependenciesReactHookForm>
     <PackageJsonDependenciesReactIcons Condition="$(PackageJsonDependenciesReactIcons) == ''">^5.5.0</PackageJsonDependenciesReactIcons>
     <PackageJsonDependenciesReactRouterDom Condition="$(PackageJsonDependenciesReactRouterDom) == ''">^7.8.1</PackageJsonDependenciesReactRouterDom>
     <PackageJsonDependenciesZod Condition="$(PackageJsonDependenciesZod) == ''">^4.0.17</PackageJsonDependenciesZod>

thingconnect.pulse.client/package-lock.json

@@ -28,6 +28,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.1",
     "zod": "^4.0.17"

thingconnect.pulse.client/package.json

@@ -0,0 +1,95 @@
+import { apiClient } from '../client';
+import type {
+  UserInfo,
+  CreateUserRequest,
+  UpdateUserRequest,
+  ChangeRoleRequest,
+  ResetPasswordRequest,
+  UsersListParams,
+  PagedResult,
+} from '../types';
+
+export class UserManagementService {
+  /**
+   * Get paginated list of users with optional filtering
+   */
+  static async getUsers(params: UsersListParams = {}): Promise<PagedResult<UserInfo>> {
+    const searchParams = new URLSearchParams();
+
+    if (params.page) {
+      searchParams.append('page', params.page.toString());
+    }
+
+    if (params.pageSize) {
+      searchParams.append('pageSize', params.pageSize.toString());
+    }
+
+    if (params.search) {
+      searchParams.append('search', params.search);
+    }
+
+    if (params.role) {
+      searchParams.append('role', params.role);
+    }
+
+    if (params.isActive !== undefined) {
+      searchParams.append('isActive', params.isActive.toString());
+    }
+
+    const queryString = searchParams.toString();
+    const url = `/api/UserManagement${queryString ? `?${queryString}` : ''}`;
+
+    return apiClient.get<PagedResult<UserInfo>>(url);
+  }
+
+  /**
+   * Get a single user by ID
+   */
+  static async getUserById(id: string): Promise<UserInfo> {
+    return apiClient.get<UserInfo>(`/api/UserManagement/${encodeURIComponent(id)}`);
+  }
+
+  /**
+   * Create a new user (admin only)
+   */
+  static async createUser(request: CreateUserRequest): Promise<UserInfo> {
+    return apiClient.post<UserInfo>('/api/UserManagement', request);
+  }
+
+  /**
+   * Update user details
+   */
+  static async updateUser(id: string, request: UpdateUserRequest): Promise<UserInfo> {
+    return apiClient.put<UserInfo>(`/api/UserManagement/${encodeURIComponent(id)}`, request);
+  }
+
+  /**
+   * Delete a user
+   */
+  static async deleteUser(id: string): Promise<void> {
+    return apiClient.delete<void>(`/api/UserManagement/${encodeURIComponent(id)}`);
+  }
+
+  /**
+   * Change user role
+   */
+  static async changeUserRole(id: string, request: ChangeRoleRequest): Promise<UserInfo> {
+    return apiClient.put<UserInfo>(`/api/UserManagement/${encodeURIComponent(id)}/role`, request);
+  }
+
+  /**
+   * Reset user password (admin only)
+   */
+  static async resetUserPassword(id: string, request: ResetPasswordRequest): Promise<void> {
+    return apiClient.post<void>(`/api/UserManagement/${encodeURIComponent(id)}/reset-password`, request);
+  }
+
+  /**
+   * Toggle user active status
+   */
+  static async toggleUserStatus(id: string, isActive: boolean): Promise<UserInfo> {
+    return apiClient.put<UserInfo>(`/api/UserManagement/${encodeURIComponent(id)}`, {
+      isActive,
+    });
+  }
+}

thingconnect.pulse.client/src/api/services/user-management.service.ts

@@ -182,3 +182,51 @@ export interface ValidationErrorsDto {
   message: string;
   errors: ValidationError[];
 }
+
+// User Management Types
+export interface UserInfo {
+  id: string;
+  username: string;
+  email: string;
+  role: 'User' | 'Administrator';
+  createdAt: string;
+  lastLoginAt?: string | null;
+  isActive: boolean;
+}
+
+export interface CreateUserRequest {
+  username: string;
+  email: string;
+  password: string;
+  role: 'User' | 'Administrator';
+}
+
+export interface UpdateUserRequest {
+  username?: string;
+  email?: string;
+  isActive?: boolean;
+}
+
+export interface ChangeRoleRequest {
+  role: 'User' | 'Administrator';
+}
+
+export interface ResetPasswordRequest {
+  newPassword: string;
+}
+
+export interface UsersListParams {
+  page?: number;
+  pageSize?: number;
+  search?: string;
+  role?: string;
+  isActive?: boolean;
+}
+
+export interface PagedResult<T> {
+  items: T[];
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  totalPages: number;
+}

thingconnect.pulse.client/src/api/types.ts

@@ -1,6 +1,6 @@
 import { Box, VStack, Text, Icon, Image, HStack, Badge, Button } from '@chakra-ui/react';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
-import { Wifi, Activity, LogOut } from 'lucide-react';
+import { Wifi, Activity, LogOut, Users } from 'lucide-react';
 import thingConnectIcon from '@/assets/ThingConnectPulseLogo.svg';
 import { Clock, Wrench, Settings, Info, Dashboard, Help } from '@/icons';
 import { useAuth } from '@/features/auth/context/AuthContext';
@@ -11,15 +11,18 @@ interface NavigationProps {
 const navigationItems = [
   { label: 'Dashboard', path: '/', icon: Dashboard },
   { label: 'History', path: '/history', icon: Clock },
-  { label: 'Configuration', path: '/configuration', icon: Wrench },
-  { label: 'Settings', path: '/settings', icon: Settings },
+  { label: 'Configuration', path: '/configuration', icon: Wrench, adminOnly: true },
+  { label: 'User Management', path: '/users', icon: Users, adminOnly: true },
+  { label: 'Settings', path: '/settings', icon: Settings, adminOnly: true },
   { label: 'Help', path: 'https://docs.thingconnect.io/pulse/', icon: Help, external: true },
   { label: 'About', path: '/about', icon: Info },
 ];
 
 export function Navigation({ onItemClick }: NavigationProps) {
   const location = useLocation();
-  const { logout } = useAuth();
+  const { logout, user } = useAuth();
+
+  const isAdmin = user?.role === 'Administrator';
 
   const isActiveRoute = (path: string) =>
     path === '/' ? location.pathname === '/' : location.pathname.startsWith(path);
@@ -51,7 +54,9 @@ export function Navigation({ onItemClick }: NavigationProps) {
         />
       </Box>
       <VStack gap={2} p={4} flex='1' align='stretch' data-testid='navigation-items'>
-        {navigationItems.map(item => {
+        {navigationItems
+          .filter(item => !item.adminOnly || isAdmin)
+          .map(item => {
           const isActive = !item.external && isActiveRoute(item.path);
           const ItemContent = (
             <HStack