Add users and roles API integration to UsersPage

Created API modules for users and roles management:
- Added src/api/roles.ts with getAllRoles, getRoleById, createRole, etc.
- Added src/api/users.ts with getAllUsers, createUser, updateUser, etc.

Updated UsersPage to fetch data from backend:
- Fetch roles from /api/roles endpoint on mount
- Fetch users from /api/users endpoint on mount
- Integrated createUser API call with form submission
- Added proper validation and error handling
- Split name field into firstName and lastName for API compatibility
- Added loading states and refresh functionality

src/api/roles.ts

@@ -0,0 +1,68 @@
+/**
+ * Roles API
+ * Handles all role-related API requests
+ */
+
+import { apiClient } from './client';
+
+export interface Role {
+  id: string;
+  name: string;
+  description: string;
+  permissions: Record<string, Record<string, boolean>>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface RoleListResponse {
+  success: boolean;
+  message: string;
+  data: Role[];
+}
+
+/**
+ * Get all roles
+ */
+export async function getAllRoles(): Promise<Role[]> {
+  const response = await apiClient.get<Role[]>('/api/roles');
+  return response;
+}
+
+/**
+ * Get a single role by ID
+ */
+export async function getRoleById(id: string): Promise<Role> {
+  return apiClient.get<Role>(`/api/roles/${id}`);
+}
+
+/**
+ * Create a new role
+ */
+export async function createRole(data: {
+  name: string;
+  description: string;
+  permissions?: Record<string, Record<string, boolean>>;
+}): Promise<Role> {
+  return apiClient.post<Role>('/api/roles', data);
+}
+
+/**
+ * Update an existing role
+ */
+export async function updateRole(
+  id: string,
+  data: {
+    name?: string;
+    description?: string;
+    permissions?: Record<string, Record<string, boolean>>;
+  }
+): Promise<Role> {
+  return apiClient.put<Role>(`/api/roles/${id}`, data);
+}
+
+/**
+ * Delete a role
+ */
+export async function deleteRole(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/roles/${id}`);
+}