Filtrar registros

Aplica filtros para encontrar accesos específicos por tipo de evento o tipo de usuario.

Pasos

1. En la sección “Registros de acceso”, localiza los selectores de filtro.
2. Filtro por tipo de evento:
   • Selecciona “Todos los eventos” — muestra login y logout
   • Selecciona “Solo inicios” — solo inicios de sesión
   • Selecciona “Solo cierres” — solo cierres de sesión
3. Filtro por tipo de usuario:
   • Selecciona “Todos los usuarios” — todos los roles
   • Selecciona un rol específico — filtra por ese tipo
4. Los resultados se actualizan automáticamente.

Filtros disponibles

Por tipo de evento

Opción	Resultado
Todos los eventos	Muestra login y logout
Solo inicios	Solo registros de inicio de sesión
Solo cierres	Solo registros de cierre de sesión

Por tipo de usuario

Opción	Resultado
Todos los usuarios	Todos los roles
Propietarios	Solo dueños de negocios
Empleados	Solo managers y empleados
Asesores	Solo asesores externos
Administradores	Solo admins de Factux
Soporte	Solo equipo de soporte

Contador de resultados

En la parte superior verás un texto como:

Mostrando 15 de 100 registros de acceso

Esto indica:

• 15 — registros que cumplen los filtros
• 100 — total de registros cargados

Como se que lo hice bien

• La tabla se actualiza inmediatamente al cambiar el filtro
• El contador muestra los resultados filtrados
• Los badges de los registros coinciden con el filtro aplicado

Consejo

Combina ambos filtros para búsquedas precisas, como “Solo inicios de Propietarios”.

Detalles técnicos — Filtrar registros

Implementación de filtros

Estado de filtros:

type EventTypeFilter = 'all' | 'login' | 'logout';
type UserTypeFilter = 'all' | 'owner' | 'manager' | 'employee' | 'advisor' | 'admin' | 'support';

const [eventTypeFilter, setEventTypeFilter] = useState<EventTypeFilter>('all');
const [userTypeFilter, setUserTypeFilter] = useState<UserTypeFilter>('all');

Lógica de filtrado:

const filteredLogs = logs.filter(log => {
  const matchesEventType = eventTypeFilter === 'all' || log.event_type === eventTypeFilter;
  const matchesUserType = userTypeFilter === 'all' || log.user_type === userTypeFilter;
  return matchesEventType && matchesUserType;
});

Componentes de UI:

// Selector de tipo de evento
<Select value={eventTypeFilter} onValueChange={(v) => setEventTypeFilter(v)}>
  <SelectTrigger>
    <SelectValue placeholder="Tipo de evento" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">Todos los eventos</SelectItem>
    <SelectItem value="login">Solo inicios</SelectItem>
    <SelectItem value="logout">Solo cierres</SelectItem>
  </SelectContent>
</Select>

// Selector de tipo de usuario
<Select value={userTypeFilter} onValueChange={(v) => setUserTypeFilter(v)}>
  <SelectTrigger>
    <SelectValue placeholder="Tipo de usuario" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">Todos los usuarios</SelectItem>
    <SelectItem value="owner">Propietarios</SelectItem>
    <SelectItem value="manager">Empleados</SelectItem>
    <SelectItem value="advisor">Asesores</SelectItem>
    <SelectItem value="admin">Administradores</SelectItem>
    <SelectItem value="support">Soporte</SelectItem>
  </SelectContent>
</Select>

Contador de resultados:

<div className="text-xs sm:text-sm text-muted-foreground">
  Mostrando {filteredLogs.length} de {logs.length} registro{logs.length !== 1 ? 's' : ''} de acceso
</div>

Rendimiento:

Los filtros se aplican en el cliente sobre los 100 registros ya cargados, evitando consultas adicionales a la base de datos. Para búsquedas más avanzadas o rangos de fechas, sería necesario implementar filtros del lado del servidor.

Posibles mejoras futuras:

// Filtros adicionales que podrían implementarse
interface AdvancedFilters {
  dateFrom?: Date;
  dateTo?: Date;
  businessId?: string;
  ipAddress?: string;
  searchEmail?: string;
}

---