User Management

Overview

The User Management module provides comprehensive control over user accounts, roles, departments, and access permissions. Located at /configuracion/User, this feature enables administrators to maintain secure and organized access to the GIMA platform.

User CRUD Operations

Create, view, edit, and delete user accounts with intuitive modal-based workflows

Role-Based Access

Assign roles and permissions to control what users can access and modify

Department Organization

Organize users by department for streamlined management and reporting

Status Tracking

Monitor user availability and active status in real-time

User Interface

The user management interface is implemented in src/app/configuracion/User/page.tsx and renders the UserTable component:

import UserTable from '@/components/user/UserTable';

export default function GestionUsuariosPage(){
  return <UserTable/>;
}

UserTable Component

The main component at src/components/user/UserTable.tsx provides a full-featured user management interface:

<div className="bg-gray-50">
  <div className="p-6">
    <div className="mb-8">
      <h1 className="text-2xl font-bold text-gray-900">Gestión de usuarios</h1>
      <p className="text-gray-600">Administración de permisos y personal</p>
    </div>
    {/* Search and action buttons */}
    {/* User table */}
  </div>
</div>

User Data Structure

Users are defined by the User type in src/types/user.ts:

export type UserEstado = 'available' | 'unavailable';

export interface User {
  id: string;
  iniciales: string;
  name: string;
  email: string;
  rol: string;
  department: string;
  status: UserEstado;
}

Example User Data

The system includes mock users from src/utils/mockUsers.ts:

export const mockUsers: User[] = [
  {
    id: '1',
    iniciales: 'FC',
    name: 'Frank Chacon',
    email:'[email protected]',
    rol: 'Engineer',
    department: 'frontend',
    status: 'unavailable',
  },
  {
    id: '2',
    iniciales: 'NE',
    name: 'Nour Ehab',
    email: '[email protected]',
    rol: 'Doctor',
    department: 'cardiology',
    status: 'available',
  },
  // Additional users...
];

The example data shows diverse roles (Engineer, Doctor, Graduated) and departments (frontend, cardiology, Vet, pediatrics), demonstrating GIMA’s flexibility for different organizational structures.

Managing Users

Access User Management

Navigate to /configuracion/User from the configuration menuThe page displays “Gestión de usuarios” with subtitle “Administración de permisos y personal”

Search for Users

Use the search bar to filter users:

const usuariosFiltrados = users.filter(user =>
  user.name.toLowerCase().includes(busqueda.toLowerCase()) ||
  user.email.toLowerCase().includes(busqueda.toLowerCase()) ||
  user.department.toLowerCase().includes(busqueda.toLowerCase())
);

Search matches against name, email, and department fields.

Create New User

Click the ”+ Nuevo usuario” button to open the creation modal:

<button
  onClick={abrirModalNuevo}
  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
  + Nuevo usuario
</button>

Edit User Details

Click the edit icon on any user row to modify their information:

const abrirModalEditar = (user: User) => {
  setUsuarioEditando(user);
  setModalAbierto(true);
};

Delete Users

Remove users by clicking the delete icon:

const eliminarUsuario = (id: string) => {
  const nuevosUsuarios = users.filter(user => user.id !== id);
  setUsers(nuevosUsuarios);
};

Table Structure

The user table displays key information with styled headers:

<table className="min-w-full divide-y divide-gray-200">
  <thead style={{ backgroundColor: "#F0FDFA" }}>
    <tr>
      <th className="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider" 
          style={{ color: "#0B2545" }}>
        USUARIO
      </th>
      <th className="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider" 
          style={{ color: "#0B2545" }}>
        ROL/CARGO
      </th>
      <th className="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider" 
          style={{ color: "#0B2545" }}>
        DEPARTAMENTO
      </th>
      <th className="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider" 
          style={{ color: "#0B2545" }}>
        ESTADO
      </th>
      <th className="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider" 
          style={{ color: "#0B2545" }}>
        ACCIÓN
      </th>
    </tr>
  </thead>
  <tbody className="divide-y divide-gray-200">
    {usuariosFiltrados.map(user => (
      <UserRow
        key={user.id}
        user={user}
        onEliminar={eliminarUsuario}
        onEditar={abrirModalEditar}
      />
    ))}
  </tbody>
</table>

Table Columns

Usuario
Rol/Cargo
Departamento
Estado
Acción

User InformationDisplays:

User initials in a circular avatar
Full name
Email address

The initials are extracted from the iniciales field and displayed prominently for quick visual identification.

Availability StatusTwo possible states:

available: User is active and available
unavailable: User is inactive or away

Displayed with color-coded indicators:

Green for available
Red/gray for unavailable

The UserModal component (referenced at src/components/user/UserModal.tsx) handles user creation and editing:

<UserModal
  isOpen={modalAbierto}
  onClose={cerrarModal}
  onSave={guardarUsuario}
  user={usuarioEditando}
/>

Create Mode

When user prop is null, the modal operates in creation mode:

const abrirModalNuevo = () => {
  setUsuarioEditando(null);
  setModalAbierto(true);
};

The modal presents empty fields for entering new user data.

Edit Mode

When user prop contains a User object, the modal pre-fills fields:

const abrirModalEditar = (user: User) => {
  setUsuarioEditando(user);
  setModalAbierto(true);
};

Users can modify existing values and save changes.

Save Handler

The save function handles both creation and updates:

const guardarUsuario = (userData: any) => {
  if (usuarioEditando) {
    // Update existing user
    setUsers(users.map(u =>
      u.id === usuarioEditando.id
        ? { ...userData, id: usuarioEditando.id }
        : u
    ));
  } else {
    // Create new user
    const nuevoUsuario: User = {
      ...userData,
      id: Date.now().toString(),
    };
    setUsers([...users, nuevoUsuario]);
  }
  cerrarModal();
};

State Management

The UserTable component uses React hooks for comprehensive state management:

// User list state
const [users, setUsers] = useState<User[]>(mockUsers);

// Search functionality
const [busqueda, setBusqueda] = useState('');

// Modal control
const [modalAbierto, setModalAbierto] = useState(false);
const [usuarioEditando, setUsuarioEditando] = useState<User | null>(null);

Key State Variables

users

Array of User objects representing all users in the system

busqueda

Current search term for filtering users

modalAbierto

Boolean controlling modal visibility

usuarioEditando

User object being edited, or null for new user creation

Search Functionality

The search bar provides real-time filtering with a clean interface:

<div className="flex justify-between items-center mb-6">
  <div className="relative">
    <input
      type="text"
      placeholder="Buscar usuario..."
      className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      value={busqueda}
      onChange={(e) => setBusqueda(e.target.value)}
    />
    <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
      🔍
    </div>
  </div>
  {/* New user button */}
</div>

The search is case-insensitive and searches across multiple fields (name, email, department), making it easy to find users regardless of which detail you remember.

User Roles & Permissions

While the current implementation shows flexible role assignment, typical GIMA roles include:

Administrator
Manager
Engineer/Technician
Viewer

Full System AccessPermissions:

Manage all users
Configure system settings
Access all reports
Manage all assets and categories
Override all restrictions

Use case: IT managers and system administrators

Best Practices

Unique Emails

Ensure each user has a unique email address for authentication and notifications

Meaningful Roles

Assign roles that accurately reflect user responsibilities and required permissions

Department Consistency

Use consistent department naming conventions across your organization

Regular Audits

Periodically review user accounts to remove inactive users and update roles

Status Updates

Keep user availability status current for accurate team visibility

Secure Deletions

Consider deactivating instead of deleting users to preserve historical data integrity

When deleting users, ensure you have a backup of their associated data (created assets, maintenance records, reports) to maintain audit trails and data integrity.

UserRow Component

Individual user rows are rendered by the UserRow component at src/components/user/UserRow.tsx:

<UserRow
  key={user.id}
  user={user}
  onEliminar={eliminarUsuario}
  onEditar={abrirModalEditar}
/>

This component:

Displays user information in table cells
Handles row hover effects
Manages action button states
Triggers edit and delete callbacks

Styling & Design

The user management interface uses a clean, professional design:

Color Scheme

Header Background: #F0FDFA (light cyan)
Header Text: #0B2545 (navy blue)
Primary Blue: #3B82F6 (blue-600)
Background: #F9FAFB (gray-50)

Interactive Elements

// Button hover effects
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"

// Input focus states
className="focus:ring-2 focus:ring-blue-500 focus:border-blue-500"

// Table row dividers
className="divide-y divide-gray-200"

The design uses rounded corners (rounded-lg) and subtle borders for a modern, approachable interface that matches GIMA’s overall aesthetic.

Integration Points

Dashboard: User status affects team availability metrics
Maintenance: User roles determine maintenance task assignments
Reports: User departments filter report access and visibility
AI Diagnostics: User roles control AI feature access
Asset Management: User permissions control asset modification rights

Future Enhancements

Potential improvements to user management:

Multi-factor Authentication: Enhanced security for sensitive accounts
Password Management: Self-service password reset and policies
User Groups: Organize users into custom groups beyond departments
Activity Logs: Track user actions for audit and compliance
Bulk Operations: Import/export users and perform batch updates
Advanced Permissions: Granular permission control per feature

Dashboard - Role-based dashboard views
Reports - User activity and access reports
Asset Management - Permission-controlled asset operations
Maintenance - Role-based maintenance assignments

Get Started

Core Features

Configuration

Guides

User Management

Overview

User CRUD Operations

Role-Based Access

Department Organization

Status Tracking

User Interface

UserTable Component

User Data Structure

Example User Data

Managing Users

Table Structure

Table Columns

State Management

Key State Variables

users

busqueda

modalAbierto

usuarioEditando

Search Functionality

User Roles & Permissions

Best Practices

Unique Emails

Meaningful Roles

Department Consistency

Regular Audits

Status Updates

Secure Deletions

UserRow Component

Styling & Design

Color Scheme

Interactive Elements

Integration Points

Future Enhancements

Build docs developers (and LLMs) love

Get Started

Core Features

Configuration

Guides

​Overview

User CRUD Operations

Role-Based Access

Department Organization

Status Tracking

​User Interface

​UserTable Component

​User Data Structure

​Example User Data

​Managing Users

​Table Structure

​Table Columns

​User Modal Component

​Modal Functionality

​State Management

​Key State Variables

users

busqueda

modalAbierto

usuarioEditando

​Search Functionality

​User Roles & Permissions

​Best Practices

Unique Emails

Meaningful Roles

Department Consistency

Regular Audits

Status Updates

Secure Deletions

​UserRow Component

​Styling & Design

​Color Scheme

​Interactive Elements

​Integration Points

​Future Enhancements

​Related Features

Build docs developers (and LLMs) love

Overview

User Interface

UserTable Component

User Data Structure

Example User Data

Managing Users

Table Structure

Table Columns

User Modal Component

Modal Functionality

State Management

Key State Variables

Search Functionality

User Roles & Permissions

Best Practices

UserRow Component

Styling & Design

Color Scheme

Interactive Elements

Integration Points

Future Enhancements

Related Features