ADUANASOFT/service_manager
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Restaurar esquema de colores en páginas de auditoría

Browse Source 
- Cambiar funciones de color de grayscale a colores semánticos:
  * getActionColor: delete (red), update (blue), login (indigo), create (green)
  * getSeverityColor: critical (red), high (orange), medium (yellow), low (blue)
  * getStatusColor: active (blue), resolved (green), investigating (yellow)
  * getRiskColor: safe (green), low (blue), medium (yellow), high (orange), critical (red)

- Actualizar botones a esquema indigo del proyecto:
  * Botones de período de análisis: bg-indigo-600
  * Paginación: bg-indigo-600 para página actual
  * Botón actualizar: bg-indigo-600
  * Botón ejecutar acción: bg-indigo-600

- Botones de acción con colores apropiados:
  * Bloquear IP: bg-red-600 (acción crítica)
  * Resetear contraseña: bg-orange-600 (acción importante)
  * Notificar admin: bg-blue-600 (acción informativa)

Mantiene consistencia con el estilo visual del proyecto.
This commit is contained in:
icamarillo
2026-02-16 12:53:26 -07:00
parent be762585d2
commit 0bc4caf65d
2 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend-internal/src/routes/audit/+page.svelte
View File

@@ -353,49 +353,49 @@
}
/**
* Obtener color de badge según tipo de acción (solo escala de grises)
* Obtener color de badge según tipo de acción
*/
function getActionColor(action: string): string {
if (action.includes('delete')) return 'bg-gray-800 text-white';
if (action.includes('update')) return 'bg-gray-600 text-white';
if (action.includes('login') || action.includes('logout')) return 'bg-gray-400 text-white';
if (action.includes('create')) return 'bg-gray-300 text-gray-800';
return 'bg-gray-200 text-gray-700';
if (action.includes('delete')) return 'bg-red-600 text-white';
if (action.includes('update')) return 'bg-blue-600 text-white';
if (action.includes('login') || action.includes('logout')) return 'bg-indigo-600 text-white';
if (action.includes('create')) return 'bg-green-600 text-white';
return 'bg-gray-600 text-white';
}
/**
* Obtener color de severidad (escala de grises)
* Obtener color de severidad
*/
function getSeverityColor(severity: string): string {
switch(severity?.toLowerCase()) {
case 'critical':
return 'bg-gray-900 text-white';
return 'bg-red-600 text-white';
case 'high':
return 'bg-gray-700 text-white';
return 'bg-orange-600 text-white';
case 'medium':
return 'bg-gray-500 text-white';
return 'bg-yellow-500 text-white';
case 'low':
return 'bg-gray-300 text-gray-800';
return 'bg-blue-600 text-white';
default:
return 'bg-gray-200 text-gray-700';
return 'bg-gray-600 text-white';
}
}
/**
* Obtener color de estado (escala de grises)
* Obtener color de estado
*/
function getStatusColor(status: string): string {
switch(status?.toLowerCase()) {
case 'active':
case 'open':
return 'bg-gray-800 text-white';
return 'bg-blue-600 text-white';
case 'resolved':
case 'closed':
return 'bg-gray-400 text-white';
return 'bg-green-600 text-white';
case 'investigating':
return 'bg-gray-600 text-white';
return 'bg-yellow-500 text-white';
default:
return 'bg-gray-200 text-gray-700';
return 'bg-gray-600 text-white';
}
}
@@ -525,31 +525,31 @@
<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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'today' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Hoy
</button>
<button
on:click={() => changePeriod('yesterday')}
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Ayer
</button>
<button
on:click={() => changePeriod('last7days')}
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Ú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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last30days' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Ú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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'custom' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
<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" />
@@ -1115,7 +1115,7 @@
{#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-gray-700 border-gray-700 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
class="relative inline-flex items-center px-3 py-1.5 border text-xs font-medium transition-colors {page === currentPage ? 'z-10 bg-indigo-600 border-indigo-600 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
>
{page}
</button>

38
frontend-internal/src/routes/audit/security/+page.svelte
View File

@@ -44,28 +44,28 @@
}
/**
* Obtener color según nivel de riesgo (escala de grises)
* Obtener color según nivel de riesgo
*/
function getRiskColor(level: string) {
const colors: any = {
safe: 'bg-gray-100 text-gray-800 border-gray-300',
low: 'bg-gray-200 text-gray-800 border-gray-400',
medium: 'bg-gray-400 text-white border-gray-500',
high: 'bg-gray-600 text-white border-gray-700',
critical: 'bg-gray-900 text-white border-gray-900'
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 (escala de grises)
* Obtener color de severidad de amenaza
*/
function getSeverityColor(severity: string) {
const colors: any = {
low: 'bg-gray-200 text-gray-800',
medium: 'bg-gray-400 text-white',
high: 'bg-gray-600 text-white',
critical: 'bg-gray-900 text-white'
low: 'bg-blue-600 text-white',
medium: 'bg-yellow-500 text-white',
high: 'bg-orange-600 text-white',
critical: 'bg-red-600 text-white'
};
return colors[severity] || colors.low;
}
@@ -190,7 +190,7 @@
</div>
<button
on:click={() => loadSecurityAnalysis()}
class="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-2"
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-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" />
@@ -211,19 +211,19 @@
<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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Ú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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Ú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-gray-700 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
>
Última semana
</button>
@@ -418,7 +418,7 @@
{#if threat.affected_ips.length > 0}
<button
on:click={() => openActionModal(threat, 'block_ip')}
class="px-3 py-1.5 bg-gray-800 text-white text-sm rounded hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
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" />
@@ -429,7 +429,7 @@
{#if threat.affected_users.length > 0}
<button
on:click={() => openActionModal(threat, 'force_password_reset')}
class="px-3 py-1.5 bg-gray-600 text-white text-sm rounded hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
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" />
@@ -439,7 +439,7 @@
{/if}
<button
on:click={() => openActionModal(threat, 'notify_admin')}
class="px-3 py-1.5 bg-gray-500 text-white text-sm rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 flex items-center gap-1"
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" />
@@ -522,7 +522,7 @@
</button>
<button
on:click={executeSecurityAction}
class="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500"
class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
Ejecutar Acción
</button>