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 { function getActionColor(action: string): string {
if (action.includes('delete')) return 'bg-gray-800 text-white'; if (action.includes('delete')) return 'bg-red-600 text-white';
if (action.includes('update')) return 'bg-gray-600 text-white'; if (action.includes('update')) return 'bg-blue-600 text-white';
if (action.includes('login') || action.includes('logout')) return 'bg-gray-400 text-white'; if (action.includes('login') || action.includes('logout')) return 'bg-indigo-600 text-white';
if (action.includes('create')) return 'bg-gray-300 text-gray-800'; if (action.includes('create')) return 'bg-green-600 text-white';
return 'bg-gray-200 text-gray-700'; return 'bg-gray-600 text-white';
} }
/** /**
* Obtener color de severidad (escala de grises) * Obtener color de severidad
*/ */
function getSeverityColor(severity: string): string { function getSeverityColor(severity: string): string {
switch(severity?.toLowerCase()) { switch(severity?.toLowerCase()) {
case 'critical': case 'critical':
return 'bg-gray-900 text-white'; return 'bg-red-600 text-white';
case 'high': case 'high':
return 'bg-gray-700 text-white'; return 'bg-orange-600 text-white';
case 'medium': case 'medium':
return 'bg-gray-500 text-white'; return 'bg-yellow-500 text-white';
case 'low': case 'low':
return 'bg-gray-300 text-gray-800'; return 'bg-blue-600 text-white';
default: 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 { function getStatusColor(status: string): string {
switch(status?.toLowerCase()) { switch(status?.toLowerCase()) {
case 'active': case 'active':
case 'open': case 'open':
return 'bg-gray-800 text-white'; return 'bg-blue-600 text-white';
case 'resolved': case 'resolved':
case 'closed': case 'closed':
return 'bg-gray-400 text-white'; return 'bg-green-600 text-white';
case 'investigating': case 'investigating':
return 'bg-gray-600 text-white'; return 'bg-yellow-500 text-white';
default: 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"> <div class="flex flex-wrap gap-2">
<button <button
on:click={() => changePeriod('today')} 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 Hoy
</button> </button>
<button <button
on:click={() => changePeriod('yesterday')} 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 Ayer
</button> </button>
<button <button
on:click={() => changePeriod('last7days')} 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 Últimos 7 días
</button> </button>
<button <button
on:click={() => changePeriod('last30days')} 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 Últimos 30 días
</button> </button>
<button <button
on:click={() => changePeriod('custom')} 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"> <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" /> <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} {#each Array.from({length: Math.min(5, totalPages)}, (_, i) => i + Math.max(1, Math.min(currentPage - 2, totalPages - 4))) as page}
<button <button
on:click={() => goToPage(page)} 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} {page}
</button> </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) { function getRiskColor(level: string) {
const colors: any = { const colors: any = {
safe: 'bg-gray-100 text-gray-800 border-gray-300', safe: 'bg-green-100 text-green-800 border-green-300',
low: 'bg-gray-200 text-gray-800 border-gray-400', low: 'bg-blue-100 text-blue-800 border-blue-300',
medium: 'bg-gray-400 text-white border-gray-500', medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
high: 'bg-gray-600 text-white border-gray-700', high: 'bg-orange-100 text-orange-800 border-orange-300',
critical: 'bg-gray-900 text-white border-gray-900' critical: 'bg-red-100 text-red-800 border-red-300'
}; };
return colors[level] || colors.low; return colors[level] || colors.low;
} }
/** /**
* Obtener color de severidad de amenaza (escala de grises) * Obtener color de severidad de amenaza
*/ */
function getSeverityColor(severity: string) { function getSeverityColor(severity: string) {
const colors: any = { const colors: any = {
low: 'bg-gray-200 text-gray-800', low: 'bg-blue-600 text-white',
medium: 'bg-gray-400 text-white', medium: 'bg-yellow-500 text-white',
high: 'bg-gray-600 text-white', high: 'bg-orange-600 text-white',
critical: 'bg-gray-900 text-white' critical: 'bg-red-600 text-white'
}; };
return colors[severity] || colors.low; return colors[severity] || colors.low;
} }
@@ -190,7 +190,7 @@
</div> </div>
<button <button
on:click={() => loadSecurityAnalysis()} 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"> <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" /> <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"> <div class="flex flex-wrap gap-2">
<button <button
on:click={() => changeAnalysisPeriod(24)} 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 Últimas 24 horas
</button> </button>
<button <button
on:click={() => changeAnalysisPeriod(48)} 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 Últimas 48 horas
</button> </button>
<button <button
on:click={() => changeAnalysisPeriod(168)} 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 Última semana
</button> </button>
@@ -418,7 +418,7 @@
{#if threat.affected_ips.length > 0} {#if threat.affected_ips.length > 0}
<button <button
on:click={() => openActionModal(threat, 'block_ip')} 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"> <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" /> <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} {#if threat.affected_users.length > 0}
<button <button
on:click={() => openActionModal(threat, 'force_password_reset')} 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"> <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" /> <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} {/if}
<button <button
on:click={() => openActionModal(threat, 'notify_admin')} 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"> <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" /> <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>
<button <button
on:click={executeSecurityAction} 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 Ejecutar Acción
</button> </button>