Merge: Integrar Sistema de Análisis de Seguridad v1.6.0 a main
CARACTERÍSTICAS PRINCIPALES v1.6.0: - Sistema de auditoría multi-tenant completo - Análisis de seguridad con detección de amenazas en tiempo real - Panel de seguridad con 4 algoritmos de detección: * Ataques de fuerza bruta * Escalada de privilegios * Eliminaciones masivas * Cuentas comprometidas - Acciones de seguridad: bloquear IP, resetear contraseña, notificar admin - Cross-tenant viewing para ADMIN/SUPPORT_MANAGER - Frontend completamente funcional con nuevo menú Seguridad - Sistema completamente verificado y operativo Resolución de conflictos: - Versiones actualizadas a 1.6.0 en todos los package.json y pyproject.toml - Menú de seguridad integrado en Sidebar - Tickets endpoint actualizado con auditoría - Correcciones de middleware y queries SQL aplicadas
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@servicemanager/internal-frontend",
|
||||
"version": "0.1.0",
|
||||
"version": "1.6.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let open = false;
|
||||
export let title = '';
|
||||
export let size = 'lg'; // sm, md, lg, xl, 2xl
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -15,6 +16,20 @@
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropClick(e) {
|
||||
if (e.target === e.currentTarget) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'sm:max-w-sm',
|
||||
md: 'sm:max-w-md',
|
||||
lg: 'sm:max-w-lg',
|
||||
xl: 'sm:max-w-xl',
|
||||
'2xl': 'sm:max-w-2xl'
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown}/>
|
||||
@@ -23,21 +38,45 @@
|
||||
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
|
||||
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" on:click={close}></div>
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
|
||||
aria-hidden="true"
|
||||
on:click={handleBackdropClick}
|
||||
></div>
|
||||
|
||||
<!-- Center trick -->
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
<div class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
||||
{title}
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal panel -->
|
||||
<div class="inline-block w-full align-bottom bg-white rounded-lg shadow-xl transform transition-all sm:my-8 sm:align-middle {sizeClasses[size]} sm:w-full">
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold text-gray-900" id="modal-title">
|
||||
{title}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
on:click={close}
|
||||
class="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-lg p-1"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="px-6 py-4 max-h-[70vh] overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Footer (optional) -->
|
||||
{#if $$slots.footer}
|
||||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200 rounded-b-lg">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,21 @@
|
||||
name: 'Auditoría',
|
||||
href: '/audit',
|
||||
icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Seguridad',
|
||||
href: '/audit/security',
|
||||
icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return baseNavigation;
|
||||
}
|
||||
|
||||
function isCurrentPage(href: string) {
|
||||
return $page.url.pathname === href || ($page.url.pathname.startsWith(href) && href !== '/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Mobile sidebar backdrop -->
|
||||
@@ -169,5 +183,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version info -->
|
||||
<div class="px-4 py-2 border-t border-gray-100">
|
||||
<p class="text-xs text-gray-400 text-center">v1.6.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,979 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/utils/api';
|
||||
import { toast } from '$lib/stores/toast';
|
||||
import { auth } from '$lib/stores/auth';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
// Estado de carga y datos
|
||||
let logs = [];
|
||||
let stats = null;
|
||||
let users = [];
|
||||
let isLoading = false;
|
||||
let selectedLog = null;
|
||||
let showDetailModal = false;
|
||||
|
||||
// Paginación
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
let totalLogs = 0;
|
||||
const perPage = 20;
|
||||
|
||||
// Filtros básicos
|
||||
let filterUserId = '';
|
||||
let filterAction = '';
|
||||
let filterResourceType = '';
|
||||
let searchText = '';
|
||||
|
||||
// Filtro multi-tenant (solo para ADMIN/SUPPORT_MANAGER)
|
||||
let allTenants = false;
|
||||
|
||||
// Filtro de período
|
||||
let periodFilter: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'custom' = 'today';
|
||||
let customDateFrom = '';
|
||||
let customDateTo = '';
|
||||
|
||||
// Control de visibilidad de filtros avanzados
|
||||
let showAdvancedFilters = false;
|
||||
|
||||
// Usuario actual
|
||||
$: currentUser = $auth.user;
|
||||
$: canSeeAllTenants = currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'SUPPORT_MANAGER');
|
||||
|
||||
// Contador de filtros activos (excluyendo el período que es por defecto)
|
||||
$: activeFiltersCount = [filterUserId, filterAction, filterResourceType, searchText].filter(f => f && f.trim()).length;
|
||||
|
||||
// Tipos de acciones y recursos (extraídos de los logs)
|
||||
let availableActions = new Set<string>();
|
||||
let availableResourceTypes = new Set<string>();
|
||||
|
||||
/**
|
||||
* Obtener fechas según el período seleccionado
|
||||
*/
|
||||
function getDateRangeForPeriod(): { from: string; to: string } {
|
||||
// Trabajar en UTC para evitar problemas de zona horaria
|
||||
const now = new Date();
|
||||
|
||||
let from: Date;
|
||||
let to: Date;
|
||||
|
||||
switch (periodFilter) {
|
||||
case 'today':
|
||||
// Hoy desde las 00:00:00 hasta ahora en UTC
|
||||
from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
|
||||
to = new Date(); // Ahora en UTC
|
||||
break;
|
||||
case 'yesterday':
|
||||
// Ayer completo en UTC
|
||||
from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 1, 0, 0, 0));
|
||||
to = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
|
||||
break;
|
||||
case 'last7days':
|
||||
// Últimos 7 días en UTC
|
||||
from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 7, 0, 0, 0));
|
||||
to = new Date();
|
||||
break;
|
||||
case 'last30days':
|
||||
// Últimos 30 días en UTC
|
||||
from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 30, 0, 0, 0));
|
||||
to = new Date();
|
||||
break;
|
||||
case 'custom':
|
||||
// Para fechas custom, parsear como UTC
|
||||
if (!customDateFrom || !customDateTo) {
|
||||
return { from: '', to: '' };
|
||||
}
|
||||
const fromParts = customDateFrom.split('-').map(Number);
|
||||
const toParts = customDateTo.split('-').map(Number);
|
||||
from = new Date(Date.UTC(fromParts[0], fromParts[1] - 1, fromParts[2], 0, 0, 0));
|
||||
to = new Date(Date.UTC(toParts[0], toParts[1] - 1, toParts[2], 23, 59, 59));
|
||||
return {
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString()
|
||||
};
|
||||
default:
|
||||
from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
|
||||
to = new Date();
|
||||
}
|
||||
|
||||
return {
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString()
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Cambiar período y actualizar datos
|
||||
*/
|
||||
function changePeriod(period: typeof periodFilter) {
|
||||
periodFilter = period;
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Cargar estadísticas de auditoría
|
||||
*/
|
||||
async function loadStats() {
|
||||
try {
|
||||
const params: any = {};
|
||||
if (allTenants && canSeeAllTenants) {
|
||||
params.all_tenants = true;
|
||||
}
|
||||
stats = await api.get('/audit/stats', params);
|
||||
} catch (e) {
|
||||
console.error('Error cargando estadísticas:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cargar logs de auditoría con filtros
|
||||
*/
|
||||
async function loadLogs() {
|
||||
isLoading = true;
|
||||
try {
|
||||
const params: any = {
|
||||
page: currentPage,
|
||||
per_page: perPage
|
||||
};
|
||||
|
||||
// Aplicar rango de fechas según período
|
||||
const dateRange = getDateRangeForPeriod();
|
||||
if (dateRange.from) params.date_from = dateRange.from;
|
||||
if (dateRange.to) params.date_to = dateRange.to;
|
||||
|
||||
// Aplicar filtros adicionales
|
||||
if (filterUserId) params.user_id = filterUserId;
|
||||
if (filterAction) params.action = filterAction;
|
||||
if (filterResourceType) params.resource_type = filterResourceType;
|
||||
if (searchText) params.search = searchText;
|
||||
|
||||
// Aplicar filtro multi-tenant si el usuario tiene permiso
|
||||
if (allTenants && canSeeAllTenants) {
|
||||
params.all_tenants = true;
|
||||
}
|
||||
|
||||
const response = await api.get('/audit/', params);
|
||||
|
||||
logs = response.logs;
|
||||
totalLogs = response.total;
|
||||
totalPages = response.total_pages;
|
||||
currentPage = response.page;
|
||||
|
||||
// Extraer acciones y tipos de recursos únicos para los selectores
|
||||
logs.forEach((log: any) => {
|
||||
availableActions.add(log.action);
|
||||
availableResourceTypes.add(log.resource_type);
|
||||
});
|
||||
|
||||
// Convertir Sets a Arrays para bind:value
|
||||
availableActions = new Set(availableActions);
|
||||
availableResourceTypes = new Set(availableResourceTypes);
|
||||
} catch (e) {
|
||||
toast.error('Error cargando logs: ' + (e.message || 'Error desconocido'));
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cargar usuarios para el filtro
|
||||
*/
|
||||
async function loadUsers() {
|
||||
try {
|
||||
users = await api.get('/users/');
|
||||
} catch (e) {
|
||||
console.error('Error cargando usuarios:', e);
|
||||
users = [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Aplicar filtros y recargar desde página 1
|
||||
*/
|
||||
function applyFilters() {
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Limpiar todos los filtros (excepto el período)
|
||||
*/
|
||||
function clearFilters() {
|
||||
filterUserId = '';
|
||||
filterAction = '';
|
||||
filterResourceType = '';
|
||||
searchText = '';
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Filtrar por acciones críticas (vulnerabilidad)
|
||||
*/
|
||||
function filterCriticalActions() {
|
||||
// Limpiar otros filtros
|
||||
filterUserId = '';
|
||||
filterResourceType = '';
|
||||
|
||||
// Buscar acciones críticas: delete, update sensibles, etc.
|
||||
searchText = 'delete';
|
||||
|
||||
// Cambiar a hoy para ver las del día
|
||||
periodFilter = 'today';
|
||||
|
||||
// Expandir filtros avanzados para que el usuario vea lo aplicado
|
||||
showAdvancedFilters = true;
|
||||
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Cambiar página
|
||||
*/
|
||||
function goToPage(page: number) {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
currentPage = page;
|
||||
loadLogs();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ver detalle de un log
|
||||
*/
|
||||
function viewDetail(log: any) {
|
||||
selectedLog = log;
|
||||
showDetailModal = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatear fecha de manera amigable
|
||||
*/
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('es-MX', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatear fecha corta (solo hora para hoy)
|
||||
*/
|
||||
function formatDateShort(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
const isToday = date.toDateString() === today.toDateString();
|
||||
|
||||
if (isToday) {
|
||||
return date.toLocaleTimeString('es-MX', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('es-MX', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener color de badge según tipo de acción
|
||||
*/
|
||||
function getActionColor(action: string): string {
|
||||
if (action.includes('login')) return 'bg-green-100 text-green-800';
|
||||
if (action.includes('logout')) return 'bg-gray-100 text-gray-800';
|
||||
if (action.includes('create')) return 'bg-blue-100 text-blue-800';
|
||||
if (action.includes('update')) return 'bg-yellow-100 text-yellow-800';
|
||||
if (action.includes('delete')) return 'bg-red-100 text-red-800';
|
||||
if (action.includes('assign')) return 'bg-purple-100 text-purple-800';
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatear acción de forma legible
|
||||
*/
|
||||
function formatActionText(action: string): string {
|
||||
const parts = action.split('.');
|
||||
if (parts.length !== 2) return action;
|
||||
|
||||
const [resource, verb] = parts;
|
||||
|
||||
const verbMap: Record<string, string> = {
|
||||
'login': 'Inicio de sesión',
|
||||
'logout': 'Cierre de sesión',
|
||||
'create': 'Creó',
|
||||
'update': 'Actualizó',
|
||||
'delete': 'Eliminó',
|
||||
'assign': 'Asignó',
|
||||
'close': 'Cerró',
|
||||
'reopen': 'Reabrió'
|
||||
};
|
||||
|
||||
const verbText = verbMap[verb] || verb;
|
||||
return `${verbText} ${resource}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener texto del rol
|
||||
*/
|
||||
function getRoleText(role: string): string {
|
||||
const roleMap: Record<string, string> = {
|
||||
'ADMIN': 'Administrador',
|
||||
'SUPPORT_MANAGER': 'Gerente',
|
||||
'AGENT': 'Agente',
|
||||
'AUDITOR': 'Auditor',
|
||||
'CLIENT_ADMIN': 'Admin Cliente',
|
||||
'CLIENT_USER': 'Usuario'
|
||||
};
|
||||
return roleMap[role] || role;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializar datos
|
||||
*/
|
||||
onMount(() => {
|
||||
loadStats();
|
||||
loadUsers();
|
||||
loadLogs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header -->
|
||||
<div class="sm:flex sm:items-center sm:justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold text-gray-900">Auditoría del Sistema</h1>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Registro de actividades •
|
||||
<span class="font-medium text-primary-600">
|
||||
{periodFilter === 'today' ? 'Hoy' :
|
||||
periodFilter === 'yesterday' ? 'Ayer' :
|
||||
periodFilter === 'last7days' ? 'Últimos 7 días' :
|
||||
periodFilter === 'last30days' ? 'Últimos 30 días' :
|
||||
'Período personalizado'}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Período -->
|
||||
<div class="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
on:click={() => changePeriod('today')}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'today' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Hoy
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changePeriod('yesterday')}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Ayer
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changePeriod('last7days')}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Últimos 7 días
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changePeriod('last30days')}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last30days' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Últimos 30 días
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changePeriod('custom')}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'custom' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Personalizado
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Rango de fechas personalizado -->
|
||||
{#if periodFilter === 'custom'}
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
|
||||
<div>
|
||||
<label for="custom-date-from" class="block text-sm font-medium text-gray-700 mb-1">Desde</label>
|
||||
<input
|
||||
type="date"
|
||||
id="custom-date-from"
|
||||
bind:value={customDateFrom}
|
||||
on:change={applyFilters}
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="custom-date-to" class="block text-sm font-medium text-gray-700 mb-1">Hasta</label>
|
||||
<input
|
||||
type="date"
|
||||
id="custom-date-to"
|
||||
bind:value={customDateTo}
|
||||
on:change={applyFilters}
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Filtro Multi-Tenant (solo para ADMIN/SUPPORT_MANAGER) -->
|
||||
{#if canSeeAllTenants}
|
||||
<div class="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<label for="all-tenants-toggle" class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="all-tenants-toggle"
|
||||
bind:checked={allTenants}
|
||||
on:change={() => {
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
loadStats();
|
||||
}}
|
||||
class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring-primary-500 h-4 w-4 mr-3"
|
||||
/>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-900">Ver todos los clientes</span>
|
||||
<p class="text-xs text-gray-500">Mostrar registros de auditoría de todas las organizaciones</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{#if allTenants}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
|
||||
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-5a1 1 0 100 2 1 1 0 000-2z" />
|
||||
</svg>
|
||||
Multi-tenant activo
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Estadísticas Rápidas -->
|
||||
{#if stats}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="text-sm text-gray-500">Total</div>
|
||||
<div class="text-2xl font-bold text-gray-900">{stats.total_actions.toLocaleString()}</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="text-sm text-gray-500">Hoy</div>
|
||||
<div class="text-2xl font-bold text-primary-600">{stats.actions_today}</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="text-sm text-gray-500">Esta Semana</div>
|
||||
<div class="text-2xl font-bold text-green-600">{stats.actions_this_week}</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<div class="text-sm text-gray-500">Vulnerabilidad</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-2xl font-bold {stats.critical_actions_today > 10 ? 'text-red-600' : stats.critical_actions_today > 5 ? 'text-amber-600' : 'text-green-600'}">
|
||||
{stats.critical_actions_today}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-primary-50 transition-colors"
|
||||
on:click={() => filterCriticalActions()}
|
||||
title="Filtrar acciones críticas"
|
||||
>
|
||||
Ver
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Acciones críticas hoy</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Filtros Avanzados (Colapsables) -->
|
||||
<div class="bg-white shadow rounded-lg mb-6">
|
||||
<button
|
||||
on:click={() => showAdvancedFilters = !showAdvancedFilters}
|
||||
class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 rounded-lg transition-colors"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-900">Filtros Avanzados</span>
|
||||
{#if activeFiltersCount > 0}
|
||||
<span class="px-2 py-0.5 rounded-full bg-primary-100 text-primary-700 text-xs font-medium">
|
||||
{activeFiltersCount}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 transition-transform {showAdvancedFilters ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{#if showAdvancedFilters}
|
||||
<div class="px-4 pb-4 border-t">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
|
||||
<!-- Búsqueda de texto -->
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">Buscar</label>
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
bind:value={searchText}
|
||||
on:input={applyFilters}
|
||||
placeholder="Buscar en acciones..."
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por usuario -->
|
||||
<div>
|
||||
<label for="user" class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
|
||||
<select
|
||||
id="user"
|
||||
bind:value={filterUserId}
|
||||
on:change={applyFilters}
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
{#each users as user}
|
||||
<option value={user.id}>{user.first_name} {user.last_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por acción -->
|
||||
<div>
|
||||
<label for="action" class="block text-sm font-medium text-gray-700 mb-1">Acción</label>
|
||||
<select
|
||||
id="action"
|
||||
bind:value={filterAction}
|
||||
on:change={applyFilters}
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Todas</option>
|
||||
{#each Array.from(availableActions).sort() as action}
|
||||
<option value={action}>{formatActionText(action)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por tipo de recurso -->
|
||||
<div>
|
||||
<label for="resource-type" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Recurso</label>
|
||||
<select
|
||||
id="resource-type"
|
||||
bind:value={filterResourceType}
|
||||
on:change={applyFilters}
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
{#each Array.from(availableResourceTypes).sort() as resourceType}
|
||||
<option value={resourceType}>{resourceType}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if activeFiltersCount > 0}
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button
|
||||
on:click={clearFilters}
|
||||
class="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
||||
>
|
||||
Limpiar filtros
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Tabla de Logs -->
|
||||
<div class="bg-white shadow rounded-lg overflow-hidden flex flex-col" style="max-height: calc(100vh - 500px); min-height: 400px;">
|
||||
<div class="px-4 py-3 border-b border-gray-200 bg-gray-50 flex-shrink-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-900">
|
||||
Registros de Auditoría
|
||||
</h3>
|
||||
<span class="text-sm text-gray-500">{totalLogs} registros</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="flex items-center justify-center flex-1">
|
||||
<div class="text-center">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
|
||||
<p class="mt-2 text-sm text-gray-500">Cargando registros...</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if logs.length === 0}
|
||||
<div class="flex items-center justify-center flex-1">
|
||||
<div class="text-center py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">No hay registros</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{periodFilter === 'today' ? 'No hay actividad registrada hoy.' : 'No se encontraron registros para el período seleccionado.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Contenedor con scroll -->
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<!-- Vista Desktop (Tabla) -->
|
||||
<div class="hidden lg:block">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
|
||||
Hora
|
||||
</th>
|
||||
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Usuario
|
||||
</th>
|
||||
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Acción
|
||||
</th>
|
||||
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Recurso
|
||||
</th>
|
||||
<th scope="col" class="relative px-3 py-2 w-20">
|
||||
<span class="sr-only">Acciones</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{#each logs as log (log.id)}
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
|
||||
{formatDateShort(log.created_at)}
|
||||
</td>
|
||||
<td class="px-3 py-2 text-sm">
|
||||
{#if log.user_email}
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-xs font-medium text-primary-700">
|
||||
{(log.user_name || '?').charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="font-medium text-gray-900 truncate">{log.user_name || 'N/A'}</div>
|
||||
<div class="text-xs text-gray-500">{getRoleText(log.user_role)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-gray-500 italic text-sm">Sistema</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full {getActionColor(log.action)}">
|
||||
{formatActionText(log.action)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-2 text-sm">
|
||||
<div class="font-medium text-gray-900">{log.resource_type}</div>
|
||||
{#if log.ip_address}
|
||||
<div class="text-xs text-gray-500">{log.ip_address}</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap text-right text-sm">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => viewDetail(log)}
|
||||
class="text-primary-600 hover:text-primary-900 font-medium transition-colors"
|
||||
>
|
||||
Ver
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Vista Mobile/Tablet (Tarjetas) -->
|
||||
<div class="lg:hidden divide-y divide-gray-200">
|
||||
{#each logs as log (log.id)}
|
||||
<div
|
||||
class="p-4 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-start gap-3 flex-1 min-w-0">
|
||||
<!-- Avatar -->
|
||||
{#if log.user_email}
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-sm font-medium text-primary-700">
|
||||
{(log.user_name || '?').charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Contenido -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs text-gray-500">{formatDateShort(log.created_at)}</span>
|
||||
<span class="px-2 py-0.5 text-xs font-medium rounded-full {getActionColor(log.action)}">
|
||||
{formatActionText(log.action)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-medium text-gray-900 text-sm mb-1">
|
||||
{log.user_name || 'Sistema'}
|
||||
<span class="text-xs text-gray-500 font-normal ml-1">• {getRoleText(log.user_role)}</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
{log.resource_type}
|
||||
{#if log.ip_address}
|
||||
<span class="text-xs text-gray-400 ml-1">• {log.ip_address}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón Ver -->
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => viewDetail(log)}
|
||||
class="flex-shrink-0 text-primary-600 hover:text-primary-900 transition-colors p-1"
|
||||
title="Ver detalles"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paginación (Sticky al fondo) -->
|
||||
{#if totalPages > 1}
|
||||
<div class="bg-white border-t border-gray-200 px-4 py-2 flex-shrink-0 sticky bottom-0">
|
||||
<!-- Mobile -->
|
||||
<div class="flex items-center justify-between sm:hidden">
|
||||
<button
|
||||
on:click={() => goToPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Anterior
|
||||
</button>
|
||||
<span class="text-sm text-gray-700">
|
||||
Página <span class="font-medium">{currentPage}</span> de <span class="font-medium">{totalPages}</span>
|
||||
</span>
|
||||
<button
|
||||
on:click={() => goToPage(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop -->
|
||||
<div class="hidden sm:flex sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-gray-700">
|
||||
<span class="font-medium">{(currentPage - 1) * perPage + 1}</span>
|
||||
-
|
||||
<span class="font-medium">{Math.min(currentPage * perPage, totalLogs)}</span>
|
||||
de
|
||||
<span class="font-medium">{totalLogs}</span>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
||||
<!-- Botón Primera página -->
|
||||
{#if currentPage > 3}
|
||||
<button
|
||||
on:click={() => goToPage(1)}
|
||||
class="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Botón Anterior -->
|
||||
<button
|
||||
on:click={() => goToPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
class="relative inline-flex items-center px-2 py-1.5 {currentPage <= 3 ? 'rounded-l-md' : ''} border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Números de página -->
|
||||
{#each Array.from({length: Math.min(5, totalPages)}, (_, i) => i + Math.max(1, Math.min(currentPage - 2, totalPages - 4))) as page}
|
||||
<button
|
||||
on:click={() => goToPage(page)}
|
||||
class="relative inline-flex items-center px-3 py-1.5 border text-xs font-medium transition-colors {page === currentPage ? 'z-10 bg-primary-600 border-primary-600 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<!-- Botón Siguiente -->
|
||||
<button
|
||||
on:click={() => goToPage(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
class="relative inline-flex items-center px-2 py-1.5 {currentPage >= totalPages - 2 ? 'rounded-r-md' : ''} border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Botón Última página -->
|
||||
{#if currentPage < totalPages - 2}
|
||||
<button
|
||||
on:click={() => goToPage(totalPages)}
|
||||
class="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Detalle -->
|
||||
{#if showDetailModal && selectedLog}
|
||||
<Modal open={showDetailModal} size="2xl" title="Detalle del Registro de Auditoría" on:close={() => showDetailModal = false}>
|
||||
<div class="space-y-4">
|
||||
<!-- Información General -->
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Información General</h4>
|
||||
<dl class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">Fecha y Hora:</dt>
|
||||
<dd class="text-gray-900">{formatDate(selectedLog.created_at)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">Usuario:</dt>
|
||||
<dd class="text-gray-900">{selectedLog.user_name || 'Sistema'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">Email:</dt>
|
||||
<dd class="text-gray-900">{selectedLog.user_email || 'N/A'}</dd>
|
||||
</div>
|
||||
{#if selectedLog.user_role}
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">Rol:</dt>
|
||||
<dd class="text-gray-900">{getRoleText(selectedLog.user_role)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">IP:</dt>
|
||||
<dd class="text-gray-900 font-mono text-xs">{selectedLog.ip_address || 'N/A'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="font-medium text-gray-500">Correlation ID:</dt>
|
||||
<dd class="text-gray-900 font-mono text-xs truncate">{selectedLog.correlation_id || 'N/A'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Acción -->
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Acción</h4>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded-full {getActionColor(selectedLog.action)}">
|
||||
{selectedLog.action}
|
||||
</span>
|
||||
<p class="mt-2 text-sm text-gray-700">{formatActionText(selectedLog.action)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recurso -->
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Recurso Afectado</h4>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-sm">
|
||||
<div><span class="font-medium">Tipo:</span> {selectedLog.resource_type}</div>
|
||||
{#if selectedLog.resource_id}
|
||||
<div class="mt-1"><span class="font-medium">ID:</span> <code class="text-xs">{selectedLog.resource_id}</code></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Agent -->
|
||||
{#if selectedLog.user_agent}
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Navegador / Dispositivo</h4>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 break-all">
|
||||
{selectedLog.user_agent}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Valores Anteriores -->
|
||||
{#if selectedLog.old_values && Object.keys(selectedLog.old_values).length > 0}
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Valores Anteriores</h4>
|
||||
<pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.old_values, null, 2)}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Valores Nuevos -->
|
||||
{#if selectedLog.new_values && Object.keys(selectedLog.new_values).length > 0}
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Valores Nuevos</h4>
|
||||
<pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.new_values, null, 2)}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Metadata -->
|
||||
{#if selectedLog.metadata && Object.keys(selectedLog.metadata).length > 0}
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-900 mb-2">Información Adicional</h4>
|
||||
<pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.metadata, null, 2)}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div slot="footer" class="flex justify-end">
|
||||
<button
|
||||
on:click={() => showDetailModal = false}
|
||||
class="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
532
frontend-internal/src/routes/audit/security/+page.svelte
Normal file
532
frontend-internal/src/routes/audit/security/+page.svelte
Normal file
@@ -0,0 +1,532 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/utils/api';
|
||||
import { toast } from '$lib/stores/toast';
|
||||
import { auth } from '$lib/stores/auth';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
// Estado
|
||||
let isLoading = false;
|
||||
let analysis = null;
|
||||
let analysisHours = 24;
|
||||
let selectedThreat = null;
|
||||
let showActionModal = false;
|
||||
let actionType = '';
|
||||
let actionTarget = '';
|
||||
let actionReason = '';
|
||||
let actionDuration = 60;
|
||||
|
||||
// Usuario actual
|
||||
$: currentUser = $auth.user;
|
||||
$: canExecuteActions = currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'SUPPORT_MANAGER');
|
||||
|
||||
/**
|
||||
* Cargar análisis de seguridad
|
||||
*/
|
||||
async function loadSecurityAnalysis() {
|
||||
isLoading = true;
|
||||
try {
|
||||
analysis = await api.get('/audit/security/analysis', { hours: analysisHours });
|
||||
console.log('Security analysis loaded:', analysis);
|
||||
} catch (e: any) {
|
||||
toast.error('Error cargando análisis de seguridad: ' + (e.message || 'Error desconocido'));
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cambiar período de análisis
|
||||
*/
|
||||
function changeAnalysisPeriod(hours: number) {
|
||||
analysisHours = hours;
|
||||
loadSecurityAnalysis();
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener color según nivel de riesgo
|
||||
*/
|
||||
function getRiskColor(level: string) {
|
||||
const colors: any = {
|
||||
safe: 'bg-green-100 text-green-800 border-green-300',
|
||||
low: 'bg-blue-100 text-blue-800 border-blue-300',
|
||||
medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
|
||||
high: 'bg-orange-100 text-orange-800 border-orange-300',
|
||||
critical: 'bg-red-100 text-red-800 border-red-300'
|
||||
};
|
||||
return colors[level] || colors.low;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener color de severidad de amenaza
|
||||
*/
|
||||
function getSeverityColor(severity: string) {
|
||||
const colors: any = {
|
||||
low: 'bg-blue-100 text-blue-800',
|
||||
medium: 'bg-yellow-100 text-yellow-800',
|
||||
high: 'bg-orange-100 text-orange-800',
|
||||
critical: 'bg-red-100 text-red-800'
|
||||
};
|
||||
return colors[severity] || colors.low;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener icono de tipo de amenaza
|
||||
*/
|
||||
function getThreatIcon(type: string) {
|
||||
const icons: any = {
|
||||
brute_force_attack: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
|
||||
privilege_escalation: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
|
||||
mass_deletion: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
|
||||
account_compromise: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
|
||||
};
|
||||
return icons[type] || icons.account_compromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener texto legible del tipo de amenaza
|
||||
*/
|
||||
function getThreatTypeText(type: string) {
|
||||
const texts: any = {
|
||||
brute_force_attack: 'Ataque de Fuerza Bruta',
|
||||
privilege_escalation: 'Escalada de Privilegios',
|
||||
mass_deletion: 'Eliminación Masiva',
|
||||
account_compromise: 'Cuenta Comprometida'
|
||||
};
|
||||
return texts[type] || type;
|
||||
}
|
||||
|
||||
/**
|
||||
* Abrir modal para acción de seguridad
|
||||
*/
|
||||
function openActionModal(threat: any, action: string) {
|
||||
if (!canExecuteActions) {
|
||||
toast.error('No tienes permisos para ejecutar acciones de seguridad');
|
||||
return;
|
||||
}
|
||||
|
||||
selectedThreat = threat;
|
||||
actionType = action;
|
||||
|
||||
// Pre-llenar campos según el tipo de acción
|
||||
if (action === 'block_ip' && threat.affected_ips.length > 0) {
|
||||
actionTarget = threat.affected_ips[0];
|
||||
actionReason = `Bloqueo automático: ${threat.description}`;
|
||||
} else if (action === 'force_password_reset' && threat.affected_users.length > 0) {
|
||||
actionTarget = threat.affected_users[0];
|
||||
actionReason = `Reseteo de seguridad: ${threat.description}`;
|
||||
} else {
|
||||
actionTarget = '';
|
||||
actionReason = threat.description;
|
||||
}
|
||||
|
||||
showActionModal = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ejecutar acción de seguridad
|
||||
*/
|
||||
async function executeSecurityAction() {
|
||||
if (!actionTarget || !actionReason) {
|
||||
toast.error('Completa todos los campos requeridos');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await api.post('/audit/security/action', {
|
||||
action_type: actionType,
|
||||
target: actionTarget,
|
||||
reason: actionReason,
|
||||
duration_minutes: actionDuration
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
toast.success(response.message);
|
||||
showActionModal = false;
|
||||
loadSecurityAnalysis(); // Recargar análisis
|
||||
} else {
|
||||
toast.error(response.message);
|
||||
}
|
||||
} catch (e: any) {
|
||||
toast.error('Error ejecutando acción: ' + (e.message || 'Error desconocido'));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatear fecha
|
||||
*/
|
||||
function formatDate(dateString: string) {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat('es-MX', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
timeZone: 'UTC',
|
||||
timeZoneName: 'short'
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadSecurityAnalysis();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
||||
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Análisis de Seguridad
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Detección de amenazas y análisis de vulnerabilidades
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
on:click={() => loadSecurityAnalysis()}
|
||||
class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 flex items-center gap-2"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Período -->
|
||||
<div class="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700">Período de Análisis</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
on:click={() => changeAnalysisPeriod(24)}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Últimas 24 horas
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changeAnalysisPeriod(48)}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Últimas 48 horas
|
||||
</button>
|
||||
<button
|
||||
on:click={() => changeAnalysisPeriod(168)}
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
>
|
||||
Última semana
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="flex justify-center items-center py-12">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
{:else if analysis}
|
||||
<!-- Resumen de Riesgo -->
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6 border-l-4 {getRiskColor(analysis.overall_risk_level)}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Nivel de Riesgo General</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">Análisis de {analysis.analysis_period_hours} horas</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="inline-block px-4 py-2 text-2xl font-bold rounded-lg {getRiskColor(analysis.overall_risk_level)}">
|
||||
{analysis.overall_risk_level.toUpperCase()}
|
||||
</span>
|
||||
<p class="text-xs text-gray-500 mt-1">Generado: {formatDate(analysis.generated_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estadísticas Rápidas -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Amenazas Detectadas</p>
|
||||
<p class="text-2xl font-bold text-red-600">{analysis.total_threats_detected}</p>
|
||||
</div>
|
||||
<svg class="w-10 h-10 text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Intentos Fallidos</p>
|
||||
<p class="text-2xl font-bold text-orange-600">{analysis.failed_login_attempts}</p>
|
||||
</div>
|
||||
<svg class="w-10 h-10 text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">IPs Sospechosas</p>
|
||||
<p class="text-2xl font-bold text-purple-600">{analysis.suspicious_ips_count}</p>
|
||||
</div>
|
||||
<svg class="w-10 h-10 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Acciones Críticas</p>
|
||||
<p class="text-2xl font-bold text-amber-600">{analysis.critical_actions_count}</p>
|
||||
</div>
|
||||
<svg class="w-10 h-10 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recomendaciones Generales -->
|
||||
{#if analysis.recommended_actions && analysis.recommended_actions.length > 0}
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-sm font-semibold text-blue-900 mb-2">Acciones Recomendadas</h4>
|
||||
<ul class="space-y-1">
|
||||
{#each analysis.recommended_actions as action}
|
||||
<li class="text-sm text-blue-800 flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
{action}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Lista de Amenazas -->
|
||||
{#if analysis.threats && analysis.threats.length > 0}
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Amenazas Detectadas</h3>
|
||||
|
||||
{#each analysis.threats as threat}
|
||||
<div class="bg-white shadow rounded-lg p-6 border-l-4 {threat.severity === 'critical' ? 'border-red-500' : threat.severity === 'high' ? 'border-orange-500' : threat.severity === 'medium' ? 'border-yellow-500' : 'border-blue-500'}">
|
||||
<!-- Header de Amenaza -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex items-start gap-3 flex-1">
|
||||
<div class="p-2 rounded-lg {threat.severity === 'critical' ? 'bg-red-100' : threat.severity === 'high' ? 'bg-orange-100' : threat.severity === 'medium' ? 'bg-yellow-100' : 'bg-blue-100'}">
|
||||
<svg class="w-6 h-6 {threat.severity === 'critical' ? 'text-red-600' : threat.severity === 'high' ? 'text-orange-600' : threat.severity === 'medium' ? 'text-yellow-600' : 'text-blue-600'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getThreatIcon(threat.type)} />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="text-lg font-semibold text-gray-900">{getThreatTypeText(threat.type)}</h4>
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded-full {getSeverityColor(threat.severity)}">
|
||||
{threat.severity.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700">{threat.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 text-sm">
|
||||
<div>
|
||||
<span class="font-medium text-gray-600">Ocurrencias:</span>
|
||||
<span class="ml-2 text-gray-900 font-semibold">{threat.occurrences}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600">Primera detección:</span>
|
||||
<span class="ml-2 text-gray-900">{formatDate(threat.first_seen)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600">Última detección:</span>
|
||||
<span class="ml-2 text-gray-900">{formatDate(threat.last_seen)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IPs y Usuarios Afectados -->
|
||||
{#if threat.affected_ips.length > 0 || threat.affected_users.length > 0}
|
||||
<div class="mb-4 text-sm">
|
||||
{#if threat.affected_ips.length > 0}
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-gray-600">IPs involucradas:</span>
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
{#each threat.affected_ips as ip}
|
||||
<code class="px-2 py-1 bg-gray-100 rounded text-xs font-mono">{ip}</code>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if threat.affected_users.length > 0}
|
||||
<div>
|
||||
<span class="font-medium text-gray-600">Usuarios afectados:</span>
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
{#each threat.affected_users as user}
|
||||
<span class="px-2 py-1 bg-gray-100 rounded text-xs">{user}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Recomendaciones -->
|
||||
{#if threat.recommendations && threat.recommendations.length > 0}
|
||||
<div class="bg-gray-50 rounded-lg p-3 mb-4">
|
||||
<p class="text-xs font-semibold text-gray-700 mb-2">Recomendaciones:</p>
|
||||
<ul class="space-y-1">
|
||||
{#each threat.recommendations as rec}
|
||||
<li class="text-xs text-gray-600 flex items-start gap-2">
|
||||
<svg class="w-3 h-3 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
{rec}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Acciones -->
|
||||
{#if canExecuteActions}
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#if threat.affected_ips.length > 0}
|
||||
<button
|
||||
on:click={() => openActionModal(threat, 'block_ip')}
|
||||
class="px-3 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center gap-1"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
Bloquear IP
|
||||
</button>
|
||||
{/if}
|
||||
{#if threat.affected_users.length > 0}
|
||||
<button
|
||||
on:click={() => openActionModal(threat, 'force_password_reset')}
|
||||
class="px-3 py-1.5 bg-orange-600 text-white text-sm rounded hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 flex items-center gap-1"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
Resetear Contraseña
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
on:click={() => openActionModal(threat, 'notify_admin')}
|
||||
class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-1"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
Notificar Admin
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- No hay amenazas -->
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
|
||||
<svg class="w-16 h-16 text-green-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold text-green-900 mb-2">Sistema Seguro</h3>
|
||||
<p class="text-sm text-green-700">No se detectaron amenazas en el período analizado</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Modal de Acción de Seguridad -->
|
||||
{#if showActionModal}
|
||||
<Modal open={showActionModal} size="lg" title="Ejecutar Acción de Seguridad" on:close={() => showActionModal = false}>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Acción</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={actionType}
|
||||
readonly
|
||||
class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Objetivo {#if actionType === 'block_ip'}(IP){:else if actionType === 'force_password_reset'}(Email){/if}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={actionTarget}
|
||||
placeholder="IP o email del usuario"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Razón</label>
|
||||
<textarea
|
||||
bind:value={actionReason}
|
||||
rows="3"
|
||||
placeholder="Razón de la acción de seguridad"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{#if actionType === 'block_ip'}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Duración del Bloqueo (minutos)</label>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={actionDuration}
|
||||
min="1"
|
||||
max="10080"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4 border-t">
|
||||
<button
|
||||
on:click={() => showActionModal = false}
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
on:click={executeSecurityAction}
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
>
|
||||
Ejecutar Acción
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user