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}`);
+}

src/api/users.ts

@@ -0,0 +1,108 @@
+/**
+ * Users API
+ * Handles all user-related API requests
+ */
+
+import { apiClient } from './client';
+
+export interface User {
+  id: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  role_id: string;
+  role?: {
+    id: string;
+    name: string;
+    description: string;
+    permissions: Record<string, Record<string, boolean>>;
+  };
+  is_active: boolean;
+  last_login: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateUserInput {
+  email: string;
+  password: string;
+  first_name: string;
+  last_name: string;
+  role_id: number;
+  is_active?: boolean;
+}
+
+export interface UpdateUserInput {
+  email?: string;
+  first_name?: string;
+  last_name?: string;
+  role_id?: number;
+  is_active?: boolean;
+}
+
+export interface ChangePasswordInput {
+  current_password: string;
+  new_password: string;
+}
+
+export interface UserListResponse {
+  data: User[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  };
+}
+
+/**
+ * Get all users with optional filters and pagination
+ */
+export async function getAllUsers(params?: {
+  role_id?: number;
+  is_active?: boolean;
+  search?: string;
+  page?: number;
+  limit?: number;
+  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
+}): Promise<UserListResponse> {
+  return apiClient.get<UserListResponse>('/api/users', { params });
+}
+
+/**
+ * Get a single user by ID
+ */
+export async function getUserById(id: string): Promise<User> {
+  return apiClient.get<User>(`/api/users/${id}`);
+}
+
+/**
+ * Create a new user
+ */
+export async function createUser(data: CreateUserInput): Promise<User> {
+  return apiClient.post<User>('/api/users', data);
+}
+
+/**
+ * Update an existing user
+ */
+export async function updateUser(id: string, data: UpdateUserInput): Promise<User> {
+  return apiClient.put<User>(`/api/users/${id}`, data);
+}
+
+/**
+ * Delete (deactivate) a user
+ */
+export async function deleteUser(id: string): Promise<void> {
+  return apiClient.delete<void>(`/api/users/${id}`);
+}
+
+/**
+ * Change user password
+ */
+export async function changePassword(id: string, data: ChangePasswordInput): Promise<void> {
+  return apiClient.put<void>(`/api/users/${id}/password`, data);
+}

src/pages/UsersPage.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-import { Role } from "./RolesPage"; // Importa los tipos de roles
+import { getAllRoles, Role as ApiRole } from "../api/roles";
+import { createUser, getAllUsers, CreateUserInput, User as ApiUser } from "../api/users";
 
 interface User {
   id: string;
@@ -13,38 +14,177 @@ interface User {
   createdAt: string;
 }
 
+interface UserForm {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password?: string;
+  roleId: string;
+  status: "ACTIVE" | "INACTIVE";
+  createdAt: string;
+}
+
 export default function UsersPage() {
-  const initialRoles: Role[] = [
+  const [users, setUsers] = useState<User[]>([]);
-    { id: "1", name: "SUPER_ADMIN", description: "Full access", status: "ACTIVE", createdAt: "2025-12-17" },
-    { id: "2", name: "USER", description: "Regular user", status: "ACTIVE", createdAt: "2025-12-16" },
-  ];
-
-  const initialUsers: User[] = [
-    { id: "1", name: "Admin GRH", email: "grh@domain.com", roleId: "1", roleName: "SUPER_ADMIN", status: "ACTIVE", createdAt: "2025-12-17" },
-    { id: "2", name: "User CESPT", email: "cespt@domain.com", roleId: "2", roleName: "USER", status: "ACTIVE", createdAt: "2025-12-16" },
-  ];
-
-  const [users, setUsers] = useState<User[]>(initialUsers);
   const [activeUser, setActiveUser] = useState<User | null>(null);
   const [search, setSearch] = useState("");
   const [showModal, setShowModal] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [roles, setRoles] = useState<Role[]>(initialRoles);
+  const [roles, setRoles] = useState<ApiRole[]>([]);
+  const [loadingRoles, setLoadingRoles] = useState(true);
+  const [loadingUsers, setLoadingUsers] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const emptyUser: Omit<User, "id" | "roleName"> = { name: "", email: "", roleId: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
+  const emptyUser: UserForm = { firstName: "", lastName: "", email: "", roleId: "", password: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
-  const [form, setForm] = useState<Omit<User, "id" | "roleName">>(emptyUser);
+  const [form, setForm] = useState<UserForm>(emptyUser);
 
-  const handleSave = () => {
+  // Fetch roles and users from API on component mount
-    const roleName = roles.find(r => r.id === form.roleId)?.name || "";
+  useEffect(() => {
-    if (editingId) {
+    const fetchRoles = async () => {
-      setUsers(prev => prev.map(u => u.id === editingId ? { id: editingId, roleName, ...form } : u));
+      try {
-    } else {
+        setLoadingRoles(true);
-      const newId = Date.now().toString();
+        const rolesData = await getAllRoles();
-      setUsers(prev => [...prev, { id: newId, roleName, ...form }]);
+        console.log('Roles fetched:', rolesData);
+        setRoles(rolesData);
+      } catch (error) {
+        console.error('Failed to fetch roles:', error);
+      } finally {
+        setLoadingRoles(false);
       }
+    };
+
+    const fetchUsers = async () => {
+      try {
+        setLoadingUsers(true);
+        const usersResponse = await getAllUsers();
+        console.log('Users API response:', usersResponse);
+        
+        // Map API users to UI format
+        const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({
+          id: apiUser.id,
+          name: `${apiUser.first_name} ${apiUser.last_name}`,
+          email: apiUser.email,
+          roleId: apiUser.role_id,
+          roleName: apiUser.role?.name || '',
+          status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
+          createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
+        }));
+        
+        console.log('Mapped users:', mappedUsers);
+        setUsers(mappedUsers);
+      } catch (error) {
+        console.error('Failed to fetch users:', error);
+        // Keep empty array on error
+        setUsers([]);
+      } finally {
+        setLoadingUsers(false);
+      }
+    };
+
+    fetchRoles();
+    fetchUsers();
+  }, []);
+
+  const handleSave = async () => {
+    setError(null);
+    
+    // Validation
+    if (!form.firstName || !form.lastName || !form.email || !form.roleId) {
+      setError("Please fill in all required fields");
+      return;
+    }
+
+    if (!editingId && !form.password) {
+      setError("Password is required for new users");
+      return;
+    }
+
+    if (form.password && form.password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    try {
+      setSaving(true);
+      
+      if (editingId) {
+        // TODO: Implement update user
+        const roleName = roles.find(r => r.id === form.roleId)?.name || "";
+        const fullName = `${form.firstName} ${form.lastName}`;
+        setUsers(prev => prev.map(u => u.id === editingId ? { 
+          id: editingId, 
+          name: fullName,
+          email: form.email,
+          roleId: form.roleId,
+          roleName, 
+          status: form.status,
+          createdAt: form.createdAt
+        } : u));
+      } else {
+        // Create new user
+        const roleIdNum = parseInt(form.roleId, 10);
+        
+        if (isNaN(roleIdNum)) {
+          setError("Please select a valid role");
+          return;
+        }
+
+        const createData: CreateUserInput = {
+          email: form.email,
+          password: form.password!,
+          first_name: form.firstName,
+          last_name: form.lastName,
+          role_id: roleIdNum,
+          is_active: form.status === "ACTIVE",
+        };
+
+        const newUser = await createUser(createData);
+        const roleName = roles.find(r => r.id === form.roleId)?.name || "";
+        
+        // Add the new user to the list
+        const apiUser: ApiUser = newUser;
+        setUsers(prev => [...prev, {
+          id: apiUser.id,
+          name: `${apiUser.first_name} ${apiUser.last_name}`,
+          email: apiUser.email,
+          roleId: apiUser.role_id,
+          roleName: roleName,
+          status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
+          createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
+        }]);
+      }
+      
       setShowModal(false);
       setEditingId(null);
       setForm(emptyUser);
+    } catch (err) {
+      console.error('Failed to save user:', err);
+      setError(err instanceof Error ? err.message : 'Failed to save user');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRefresh = async () => {
+    try {
+      setLoadingUsers(true);
+      const usersResponse = await getAllUsers();
+      const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({
+        id: apiUser.id,
+        name: `${apiUser.first_name} ${apiUser.last_name}`,
+        email: apiUser.email,
+        roleId: apiUser.role_id,
+        roleName: apiUser.role?.name || '',
+        status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
+        createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
+      }));
+      setUsers(mappedUsers);
+    } catch (error) {
+      console.error('Failed to refresh users:', error);
+    } finally {
+      setLoadingUsers(false);
+    }
   };
 
   const handleDelete = () => {
@@ -61,8 +201,8 @@ export default function UsersPage() {
       <div className="w-72 bg-white rounded-xl shadow p-4">
         <h3 className="text-xs font-semibold text-gray-500 mb-3">Project Information</h3>
         <p className="text-sm text-gray-700">Usuarios disponibles y sus roles.</p>
-        <select value={form.roleId} onChange={e => setForm({...form, roleId: e.target.value})} className="w-full border px-3 py-2 rounded mt-2">
+        <select value={form.roleId} onChange={e => setForm({...form, roleId: e.target.value})} className="w-full border px-3 py-2 rounded mt-2" disabled={loadingRoles}>
-          <option value="">Select Role</option>
+          <option value="">{loadingRoles ? "Loading roles..." : "Select Role"}</option>
           {roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
         </select>
       </div>
@@ -78,9 +218,23 @@ export default function UsersPage() {
           </div>
           <div className="flex gap-3">
             <button onClick={() => { setForm(emptyUser); setEditingId(null); setShowModal(true); }} className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"><Plus size={16} /> Add</button>
-            <button onClick={() => { if(!activeUser) return; setEditingId(activeUser.id); setForm({...activeUser}); setShowModal(true); }} disabled={!activeUser} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Pencil size={16}/> Edit</button>
+            <button onClick={() => { 
+              if(!activeUser) return; 
+              const [firstName = "", lastName = ""] = activeUser.name.split(" ");
+              setEditingId(activeUser.id); 
+              setForm({
+                firstName,
+                lastName,
+                email: activeUser.email,
+                roleId: activeUser.roleId,
+                status: activeUser.status,
+                createdAt: activeUser.createdAt,
+                password: ""
+              }); 
+              setShowModal(true); 
+            }} disabled={!activeUser} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Pencil size={16}/> Edit</button>
             <button onClick={handleDelete} disabled={!activeUser} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Trash2 size={16}/> Delete</button>
-            <button onClick={() => setUsers([...users])} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"><RefreshCcw size={16}/> Refresh</button>
+            <button onClick={handleRefresh} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg" disabled={loadingUsers}><RefreshCcw size={16}/> Refresh</button>
           </div>
         </div>
 
@@ -88,6 +242,11 @@ export default function UsersPage() {
         <input className="bg-white rounded-lg shadow px-4 py-2 text-sm" placeholder="Search user..." value={search} onChange={e => setSearch(e.target.value)} />
 
         {/* TABLE */}
+        {loadingUsers ? (
+          <div className="bg-white rounded-xl shadow p-8 text-center">
+            <p className="text-gray-500">Loading users...</p>
+          </div>
+        ) : (
           <MaterialTable
             title="Users"
             columns={[
@@ -101,6 +260,7 @@ export default function UsersPage() {
             onRowClick={(_, rowData) => setActiveUser(rowData as User)}
             options={{ actionsColumnIndex: -1, search: false, paging: true, sorting: true, rowStyle: rowData => ({ backgroundColor: activeUser?.id === (rowData as User).id ? "#EEF2FF" : "#FFFFFF" }) }}
           />
+        )}
       </div>
 
       {/* MODAL */}
@@ -108,17 +268,82 @@ export default function UsersPage() {
         <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
           <div className="bg-white rounded-xl p-6 w-96 space-y-3">
             <h2 className="text-lg font-semibold">{editingId ? "Edit User" : "Add User"}</h2>
-            <input className="w-full border px-3 py-2 rounded" placeholder="Name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
+            
-            <input className="w-full border px-3 py-2 rounded" placeholder="Email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
+            {error && (
-            <select value={form.roleId} onChange={e => setForm({...form, roleId: e.target.value})} className="w-full border px-3 py-2 rounded mt-2">
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded text-sm">
-              <option value="">Select Role</option>
+                {error}
+              </div>
+            )}
+            
+            <input 
+              className="w-full border px-3 py-2 rounded" 
+              placeholder="First Name *" 
+              value={form.firstName} 
+              onChange={e => setForm({...form, firstName: e.target.value})}
+              disabled={saving}
+            />
+            
+            <input 
+              className="w-full border px-3 py-2 rounded" 
+              placeholder="Last Name *" 
+              value={form.lastName} 
+              onChange={e => setForm({...form, lastName: e.target.value})}
+              disabled={saving}
+            />
+            
+            <input 
+              className="w-full border px-3 py-2 rounded" 
+              type="email"
+              placeholder="Email *" 
+              value={form.email} 
+              onChange={e => setForm({...form, email: e.target.value})}
+              disabled={saving}
+            />
+            
+            {!editingId && (
+              <input 
+                className="w-full border px-3 py-2 rounded" 
+                type="password"
+                placeholder="Password * (min 8 characters)" 
+                value={form.password || ""} 
+                onChange={e => setForm({...form, password: e.target.value})}
+                disabled={saving}
+              />
+            )}
+            
+            <select 
+              value={form.roleId} 
+              onChange={e => setForm({...form, roleId: e.target.value})} 
+              className="w-full border px-3 py-2 rounded" 
+              disabled={loadingRoles || saving}
+            >
+              <option value="">Select Role *</option>
               {roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
             </select>
-            <button onClick={() => setForm({...form, status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE"})} className="w-full border rounded px-3 py-2">Status: {form.status}</button>
+            
-            <input type="date" className="w-full border px-3 py-2 rounded" value={form.createdAt} onChange={e => setForm({...form, createdAt: e.target.value})} />
+            <button 
+              onClick={() => setForm({...form, status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE"})} 
+              className="w-full border rounded px-3 py-2"
+              disabled={saving}
+            >
+              Status: {form.status}
+            </button>
+            
             <div className="flex justify-end gap-2 pt-3">
-              <button onClick={() => setShowModal(false)}>Cancel</button>
+              <button 
-              <button onClick={handleSave} className="bg-[#4c5f9e] text-white px-4 py-2 rounded">Save</button>
+                onClick={() => { setShowModal(false); setError(null); }} 
+                className="px-4 py-2"
+                disabled={saving}
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleSave} 
+                className="bg-[#4c5f9e] text-white px-4 py-2 rounded disabled:opacity-50"
+                disabled={saving || loadingRoles}
+              >
+                {saving ? "Saving..." : "Save"}
+              </button>
             </div>
           </div>
         </div>