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

style: Reemplazar escala de grises por colores semánticos en auditoría

Browse Source 
- Estadísticas de auditoría con colores apropiados:
  * Total: Negro (neutro)
  * Hoy: Azul (actividad actual)
  * Esta Semana: Indigo (período reciente)
  * Incidentes Críticos: Rojo (alerta máxima)

- Estadísticas de seguridad con colores semánticos:
  * Amenazas Detectadas: Rojo (peligro alto)
  * Intentos Fallidos: Naranja (advertencia)
  * IPs Sospechosas: Amarillo (precaución)
  * Acciones Críticas: Rojo (crítico)

- Recomendaciones de seguridad con esquema azul (informativo)

- Actualizado safelist de Tailwind con nuevos colores:
  * text-blue-600, text-indigo-600, text-red-600
  * text-orange-600, text-yellow-600
  * text-*-400 para iconos
  * bg-blue-50, bg-red-50 para fondos
  * hover:text-red-700, hover:bg-red-50

Mejora significativa en la visualización y jerarquía visual de la información.
This commit is contained in:
icamarillo
2026-02-16 13:09:54 -07:00
parent ae0bfc9d62
commit 42a5bb54cc
3 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -629,26 +629,26 @@
</div> </div>
<div class="bg-white rounded-lg shadow p-4"> <div class="bg-white rounded-lg shadow p-4">
<div class="text-sm text-gray-500">Hoy</div> <div class="text-sm text-gray-500">Hoy</div>
<div class="text-2xl font-bold text-gray-600">{stats.actions_today}</div> <div class="text-2xl font-bold text-blue-600">{stats.actions_today}</div>
</div> </div>
<div class="bg-white rounded-lg shadow p-4"> <div class="bg-white rounded-lg shadow p-4">
<div class="text-sm text-gray-500">Esta Semana</div> <div class="text-sm text-gray-500">Esta Semana</div>
<div class="text-2xl font-bold text-gray-600">{stats.actions_this_week}</div> <div class="text-2xl font-bold text-indigo-600">{stats.actions_this_week}</div>
</div> </div>
<div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow"> <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 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" /> <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> </svg>
<div class="text-sm text-gray-500">Incidentes Criticos</div> <div class="text-sm text-gray-500">Incidentes Criticos</div>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="text-2xl font-bold text-gray-800"> <div class="text-2xl font-bold text-red-600">
{stats.critical_actions_today || 0} {stats.critical_actions_today || 0}
</div> </div>
<button <button
type="button" type="button"
class="text-xs text-gray-600 hover:text-gray-800 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 transition-colors" class="text-xs text-red-600 hover:text-red-700 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-red-50 transition-colors"
on:click={() => filterCriticalActions()} on:click={() => filterCriticalActions()}
title="Ver incidentes críticos" title="Ver incidentes críticos"
> >

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

@@ -257,9 +257,9 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-sm text-gray-500">Amenazas Detectadas</p> <p class="text-sm text-gray-500">Amenazas Detectadas</p>
<p class="text-2xl font-bold text-gray-800">{analysis.total_threats_detected}</p> <p class="text-2xl font-bold text-red-600">{analysis.total_threats_detected}</p>
</div> </div>
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-10 h-10 text-red-400" 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" /> <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> </svg>
</div> </div>
@@ -269,9 +269,9 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-sm text-gray-500">Intentos Fallidos</p> <p class="text-sm text-gray-500">Intentos Fallidos</p>
<p class="text-2xl font-bold text-gray-700">{analysis.failed_login_attempts}</p> <p class="text-2xl font-bold text-orange-600">{analysis.failed_login_attempts}</p>
</div> </div>
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-10 h-10 text-orange-400" 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" /> <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> </svg>
</div> </div>
@@ -281,9 +281,9 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-sm text-gray-500">IPs Sospechosas</p> <p class="text-sm text-gray-500">IPs Sospechosas</p>
<p class="text-2xl font-bold text-gray-700">{analysis.suspicious_ips_count}</p> <p class="text-2xl font-bold text-yellow-600">{analysis.suspicious_ips_count}</p>
</div> </div>
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-10 h-10 text-yellow-400" 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" /> <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> </svg>
</div> </div>
@@ -293,9 +293,9 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-sm text-gray-500">Acciones Críticas</p> <p class="text-sm text-gray-500">Acciones Críticas</p>
<p class="text-2xl font-bold text-gray-700">{analysis.critical_actions_count}</p> <p class="text-2xl font-bold text-red-600">{analysis.critical_actions_count}</p>
</div> </div>
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-10 h-10 text-red-400" 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" /> <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> </svg>
</div> </div>
@@ -304,17 +304,17 @@
<!-- Recomendaciones Generales --> <!-- Recomendaciones Generales -->
{#if analysis.recommended_actions && analysis.recommended_actions.length > 0} {#if analysis.recommended_actions && analysis.recommended_actions.length > 0}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6"> <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<svg class="w-6 h-6 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <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> </svg>
<div class="flex-1"> <div class="flex-1">
<h4 class="text-sm font-semibold text-gray-900 mb-2">Acciones Recomendadas</h4> <h4 class="text-sm font-semibold text-blue-900 mb-2">Acciones Recomendadas</h4>
<ul class="space-y-1"> <ul class="space-y-1">
{#each analysis.recommended_actions as action} {#each analysis.recommended_actions as action}
<li class="text-sm text-gray-700 flex items-start gap-2"> <li class="text-sm text-blue-800 flex items-start gap-2">
<svg class="w-4 h-4 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg> </svg>
{action} {action}

16
frontend-internal/tailwind.config.js
View File

@@ -9,8 +9,10 @@ export default {
'bg-indigo-600', 'bg-indigo-600',
'bg-orange-600', 'bg-orange-600',
'bg-yellow-500', 'bg-yellow-500',
'bg-yellow-600',
'bg-gray-600', 'bg-gray-600',
// Colores de severidad/riesgo // Colores de severidad/riesgo
'bg-red-50',
'bg-red-100', 'bg-red-100',
'bg-red-800', 'bg-red-800',
'bg-orange-100', 'bg-orange-100',
@@ -21,6 +23,7 @@ export default {
'bg-yellow-100', 'bg-yellow-100',
'bg-yellow-300', 'bg-yellow-300',
'bg-yellow-800', 'bg-yellow-800',
'bg-blue-50',
'bg-blue-100', 'bg-blue-100',
'bg-blue-300', 'bg-blue-300',
'bg-blue-800', 'bg-blue-800',
@@ -29,27 +32,38 @@ export default {
'bg-green-800', 'bg-green-800',
// Bordes // Bordes
'border-red-300', 'border-red-300',
'border-blue-200',
'border-orange-300', 'border-orange-300',
'border-yellow-300', 'border-yellow-300',
'border-blue-300', 'border-blue-300',
'border-green-300', 'border-green-300',
// Text colors // Text colors
'text-red-400',
'text-red-600', 'text-red-600',
'text-red-700',
'text-red-800', 'text-red-800',
'text-orange-400',
'text-orange-600', 'text-orange-600',
'text-orange-800', 'text-orange-800',
'text-yellow-400',
'text-yellow-600',
'text-yellow-800', 'text-yellow-800',
'text-blue-400',
'text-blue-600', 'text-blue-600',
'text-blue-800', 'text-blue-800',
'text-blue-900',
'text-green-600', 'text-green-600',
'text-green-800', 'text-green-800',
'text-indigo-600',
'text-white', 'text-white',
// Hover states // Hover states
'hover:bg-red-50',
'hover:bg-red-700', 'hover:bg-red-700',
'hover:bg-orange-700', 'hover:bg-orange-700',
'hover:bg-blue-700', 'hover:bg-blue-700',
'hover:bg-indigo-700',
'hover:bg-indigo-50', 'hover:bg-indigo-50',
'hover:bg-indigo-700',
'hover:text-red-700',
// Focus rings // Focus rings
'focus:ring-red-500', 'focus:ring-red-500',
'focus:ring-orange-500', 'focus:ring-orange-500',