Auditoria funcionando

frontend-internal/src/lib/components/Modal.svelte

@@ -1,7 +1,6 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte';
   
-  export let open = false;
   export let title = '';
   
   const dispatch = createEventDispatcher();
@@ -11,7 +10,7 @@
   }
 
   function handleKeydown(e) {
-    if (e.key === 'Escape' && open) {
+    if (e.key === 'Escape') {
       close();
     }
   }
@@ -19,8 +18,7 @@
 
 <svelte:window on:keydown={handleKeydown}/>
 
-{#if open}
-  <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+<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>
@@ -38,7 +36,11 @@
             </div>
           </div>
         </div>
+        {#if $$slots.footer}
+          <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
+            <slot name="footer" />
+          </div>
+        {/if}
       </div>
     </div>
   </div>
-{/if}

frontend-internal/src/lib/stores/auth.ts

@@ -1,6 +1,9 @@
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 
+// API Configuration
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+
 // Types
 export interface InternalUser {
   id: string;
@@ -95,7 +98,7 @@ function createAuthStore() {
       update(state => ({ ...state, isLoading: true }));
       
       try {
-        const response = await fetch('/api/v1/auth/login', {
+        const response = await fetch(`${API_URL}/v1/auth/login`, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -147,7 +150,7 @@ function createAuthStore() {
         update (state => ({ ...state, isLoading: true }));
 
         try {
-            const response = await fetch('/api/v1/auth/refresh', {
+            const response = await fetch(`${API_URL}/v1/auth/refresh`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

frontend-internal/src/routes/audit/+page.svelte

@@ -0,0 +1,704 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  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
+  let filterUserId = '';
+  let filterAction = '';
+  let filterResourceType = '';
+  let filterDateFrom = '';
+  let filterDateTo = '';
+  let searchText = '';
+
+  // Contador de filtros activos
+  $: activeFiltersCount = [filterUserId, filterAction, filterResourceType, filterDateFrom, filterDateTo, 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>();
+
+  /**
+   * Cargar estadísticas de auditoría
+   */
+  async function loadStats() {
+    try {
+      stats = await api.get('/audit/stats');
+    } 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
+      };
+
+      if (filterUserId) params.user_id = filterUserId;
+      if (filterAction) params.action = filterAction;
+      if (filterResourceType) params.resource_type = filterResourceType;
+      if (filterDateFrom) params.date_from = filterDateFrom;
+      if (filterDateTo) params.date_to = filterDateTo;
+      if (searchText) params.search = searchText;
+
+      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
+   */
+  function clearFilters() {
+    filterUserId = '';
+    filterAction = '';
+    filterResourceType = '';
+    filterDateFrom = '';
+    filterDateTo = '';
+    searchText = '';
+    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'
+    });
+  }
+
+  /**
+   * 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 con información del rol del usuario
+   */
+  function formatActionWithRole(log: any): string {
+    const actionParts = log.action.split('.');
+    if (actionParts.length !== 2) return log.action;
+
+    const [resource, verb] = actionParts;
+    
+    const verbMap: Record<string, string> = {
+      'login': 'inició sesión',
+      'logout': 'cerró sesión',
+      'create': 'creó',
+      'update': 'actualizó',
+      'delete': 'eliminó',
+      'assign': 'asignó',
+      'close': 'cerró',
+      'reopen': 'reabrió'
+    };
+
+    const roleMap: Record<string, string> = {
+      'ADMIN': 'Administrador',
+      'SUPPORT_MANAGER': 'Gerente de Soporte',
+      'AGENT': 'Agente',
+      'AUDITOR': 'Auditor',
+      'CLIENT_ADMIN': 'Admin de Cliente',
+      'CLIENT_USER': 'Usuario de Cliente'
+    };
+
+    const verbText = verbMap[verb] || verb;
+    const resourceText = resource;
+    
+    // Si hay rol de usuario, incluirlo
+    if (log.user_role) {
+      const roleText = roleMap[log.user_role] || log.user_role;
+      return `${verbText} ${resourceText} (${roleText})`;
+    }
+    
+    return `${verbText} ${resourceText}`;
+  }
+
+  /**
+   * 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">
+    <div>
+      <h1 class="text-2xl font-semibold text-gray-900">Auditoría</h1>
+      <p class="mt-2 text-sm text-gray-700">
+        Registro completo de todas las acciones realizadas en el sistema
+      </p>
+    </div>
+  </div>
+
+  <!-- Estadísticas -->
+  {#if stats}
+    <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="p-5">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+              </svg>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dl>
+                <dt class="text-sm font-medium text-gray-500 truncate">Total de Acciones</dt>
+                <dd class="text-lg font-semibold text-gray-900">{stats.total_actions.toLocaleString()}</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="p-5">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <svg class="h-6 w-6 text-blue-400" 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>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dl>
+                <dt class="text-sm font-medium text-gray-500 truncate">Hoy</dt>
+                <dd class="text-lg font-semibold text-gray-900">{stats.actions_today}</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="p-5">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <svg class="h-6 w-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dl>
+                <dt class="text-sm font-medium text-gray-500 truncate">Esta Semana</dt>
+                <dd class="text-lg font-semibold text-gray-900">{stats.actions_this_week}</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="p-5">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <svg class="h-6 w-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dl>
+                <dt class="text-sm font-medium text-gray-500 truncate">Acción más Común</dt>
+                <dd class="text-sm font-semibold text-gray-900 truncate">
+                  {#if stats.top_actions && Object.keys(stats.top_actions).length > 0}
+                    {Object.keys(stats.top_actions)[0]}
+                  {:else}
+                    N/A
+                  {/if}
+                </dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Filtros -->
+  <div class="mt-6 bg-white shadow rounded-lg p-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-lg font-medium text-gray-900">Filtros</h3>
+      {#if activeFiltersCount > 0}
+        <button
+          on:click={clearFilters}
+          class="text-sm text-primary-600 hover:text-primary-700 font-medium"
+        >
+          Limpiar ({activeFiltersCount})
+        </button>
+      {/if}
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <!-- Búsqueda de texto -->
+      <div>
+        <label for="search" class="block text-sm font-medium text-gray-700">Buscar</label>
+        <input
+          type="text"
+          id="search"
+          bind:value={searchText}
+          on:input={applyFilters}
+          placeholder="Buscar en acciones..."
+          class="mt-1 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">Usuario</label>
+        <select
+          id="user"
+          bind:value={filterUserId}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        >
+          <option value="">Todos los usuarios</option>
+          {#each users as user}
+            <option value={user.id}>{user.first_name} {user.last_name} ({user.email})</option>
+          {/each}
+        </select>
+      </div>
+
+      <!-- Filtro por acción -->
+      <div>
+        <label for="action" class="block text-sm font-medium text-gray-700">Acción</label>
+        <select
+          id="action"
+          bind:value={filterAction}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        >
+          <option value="">Todas las acciones</option>
+          {#each Array.from(availableActions).sort() as action}
+            <option value={action}>{action}</option>
+          {/each}
+        </select>
+      </div>
+
+      <!-- Filtro por tipo de recurso -->
+      <div>
+        <label for="resource-type" class="block text-sm font-medium text-gray-700">Tipo de Recurso</label>
+        <select
+          id="resource-type"
+          bind:value={filterResourceType}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        >
+          <option value="">Todos los tipos</option>
+          {#each Array.from(availableResourceTypes).sort() as resourceType}
+            <option value={resourceType}>{resourceType}</option>
+          {/each}
+        </select>
+      </div>
+
+      <!-- Fecha desde -->
+      <div>
+        <label for="date-from" class="block text-sm font-medium text-gray-700">Desde</label>
+        <input
+          type="date"
+          id="date-from"
+          bind:value={filterDateFrom}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        />
+      </div>
+
+      <!-- Fecha hasta -->
+      <div>
+        <label for="date-to" class="block text-sm font-medium text-gray-700">Hasta</label>
+        <input
+          type="date"
+          id="date-to"
+          bind:value={filterDateTo}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabla de Logs -->
+  <div class="mt-6 bg-white shadow rounded-lg overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h3 class="text-lg font-medium text-gray-900">
+        Logs de Auditoría
+        <span class="text-sm text-gray-500 font-normal">({totalLogs} registros)</span>
+      </h3>
+    </div>
+
+    {#if isLoading}
+      <div class="flex items-center justify-center h-64">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    {:else if logs.length === 0}
+      <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+        <h3 class="mt-2 text-sm font-medium text-gray-900">No hay logs</h3>
+        <p class="mt-1 text-sm text-gray-500">No se encontraron registros con los filtros aplicados.</p>
+      </div>
+    {:else}
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Fecha/Hora
+              </th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Usuario
+              </th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Acción
+              </th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Recurso
+              </th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                IP
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <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">
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                  {formatDate(log.created_at)}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                  {#if log.user_email}
+                    <div>
+                      <div class="font-medium text-gray-900">{log.user_name || 'N/A'}</div>
+                      <div class="text-gray-500">{log.user_email}</div>
+                      {#if log.user_role}
+                        <div class="text-xs text-gray-400 mt-1">
+                          {log.user_role === 'ADMIN' ? 'Administrador' :
+                           log.user_role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
+                           log.user_role === 'AGENT' ? 'Agente' :
+                           log.user_role === 'AUDITOR' ? 'Auditor' :
+                           log.user_role === 'CLIENT_ADMIN' ? 'Admin de Cliente' :
+                           log.user_role === 'CLIENT_USER' ? 'Usuario de Cliente' :
+                           log.user_role}
+                        </div>
+                      {/if}
+                    </div>
+                  {:else}
+                    <span class="text-gray-500 italic">Sistema</span>
+                  {/if}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {getActionColor(log.action)}">
+                    {formatActionWithRole(log)}
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                  <div>
+                    <div class="font-medium">{log.resource_type}</div>
+                    {#if log.resource_id}
+                      <div class="text-gray-500 text-xs truncate max-w-xs">{log.resource_id}</div>
+                    {/if}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {log.ip_address || 'N/A'}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <button
+                    on:click={() => viewDetail(log)}
+                    class="text-primary-600 hover:text-primary-900"
+                  >
+                    Ver detalle
+                  </button>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Paginación -->
+      {#if totalPages > 1}
+        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+          <div class="flex-1 flex justify-between sm:hidden">
+            <button
+              on:click={() => goToPage(currentPage - 1)}
+              disabled={currentPage === 1}
+              class="relative inline-flex items-center px-4 py-2 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>
+            <button
+              on:click={() => goToPage(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              class="ml-3 relative inline-flex items-center px-4 py-2 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>
+          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+              <p class="text-sm text-gray-700">
+                Mostrando
+                <span class="font-medium">{(currentPage - 1) * perPage + 1}</span>
+                a
+                <span class="font-medium">{Math.min(currentPage * perPage, totalLogs)}</span>
+                de
+                <span class="font-medium">{totalLogs}</span>
+                resultados
+              </p>
+            </div>
+            <div>
+              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                <button
+                  on:click={() => goToPage(currentPage - 1)}
+                  disabled={currentPage === 1}
+                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <span class="sr-only">Anterior</span>
+                  <svg class="h-5 w-5" 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>
+                
+                {#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-4 py-2 border text-sm font-medium {page === currentPage ? 'z-10 bg-primary-50 border-primary-500 text-primary-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'}"
+                  >
+                    {page}
+                  </button>
+                {/each}
+
+                <button
+                  on:click={() => goToPage(currentPage + 1)}
+                  disabled={currentPage === totalPages}
+                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <span class="sr-only">Siguiente</span>
+                  <svg class="h-5 w-5" 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>
+              </nav>
+            </div>
+          </div>
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<!-- Modal de Detalle -->
+{#if showDetailModal && selectedLog}
+  <Modal title="Detalle del Log 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">ID:</dt>
+            <dd class="text-gray-900 font-mono text-xs">{selectedLog.id}</dd>
+          </div>
+          <div>
+            <dt class="font-medium text-gray-500">Fecha:</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">
+                {selectedLog.user_role === 'ADMIN' ? 'Administrador' :
+                 selectedLog.user_role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
+                 selectedLog.user_role === 'AGENT' ? 'Agente' :
+                 selectedLog.user_role === 'AUDITOR' ? 'Auditor' :
+                 selectedLog.user_role === 'CLIENT_ADMIN' ? 'Admin de Cliente' :
+                 selectedLog.user_role === 'CLIENT_USER' ? 'Usuario de Cliente' :
+                 selectedLog.user_role}
+              </dd>
+            </div>
+          {/if}
+          <div>
+            <dt class="font-medium text-gray-500">IP:</dt>
+            <dd class="text-gray-900">{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">{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">{formatActionWithRole(selectedLog)}</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">User Agent</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}
+        <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}
+        <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}
+        <div>
+          <h4 class="text-sm font-medium text-gray-900 mb-2">Metadata 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}

frontend-internal/src/routes/categories/+page.svelte

@@ -145,7 +145,8 @@
   </div>
 </div>
 
-<Modal open={showModal} title={editingCategory ? 'Editar Categoría' : 'Nueva Categoría'} on:close={() => showModal = false}>
+{#if showModal}
+<Modal title={editingCategory ? 'Editar Categoría' : 'Nueva Categoría'} on:close={() => showModal = false}>
   <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     <div>
       <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
@@ -182,3 +183,4 @@
     </div>
   </form>
 </Modal>
+{/if}

frontend-internal/src/routes/systems/+page.svelte

@@ -118,7 +118,8 @@
   </div>
 </div>
 
-<Modal open={showModal} title={editingSystem ? 'Editar Sistema' : 'Nuevo Sistema'} on:close={() => showModal = false}>
+{#if showModal}
+<Modal title={editingSystem ? 'Editar Sistema' : 'Nuevo Sistema'} on:close={() => showModal = false}>
   <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     <div>
       <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
@@ -145,3 +146,4 @@
     </div>
   </form>
 </Modal>
+{/if}

frontend-internal/src/routes/tenants/+page.svelte

@@ -126,7 +126,8 @@
   </div>
 </div>
 
-<Modal open={showModal} title={editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'} on:close={() => showModal = false}>
+{#if showModal}
+<Modal title={editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'} on:close={() => showModal = false}>
   <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     <div>
       <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
@@ -164,3 +165,4 @@
     </div>
   </form>
 </Modal>
+{/if}

frontend-internal/src/routes/tickets/+page.svelte

@@ -522,7 +522,8 @@
 </div>
 
 <!-- Modal Crear Ticket -->
-<Modal open={showModal} title="Nuevo Ticket" on:close={() => showModal = false}>
+{#if showModal}
+<Modal title="Nuevo Ticket" on:close={() => showModal = false}>
   <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     <div>
       <label for="subject" class="block text-sm font-medium text-gray-700">Asunto *</label>
@@ -608,9 +609,11 @@
     </div>
   </form>
 </Modal>
+{/if}
 
 <!-- Modal Editar Ticket -->
-<Modal open={showEditModal} title="Editar Ticket #{selectedTicket?.ticket_number || ''}" on:close={() => showEditModal = false}>
+{#if showEditModal}
+<Modal title="Editar Ticket #{selectedTicket?.ticket_number || ''}" on:close={() => showEditModal = false}>
   <form on:submit|preventDefault={handleUpdate} class="space-y-4">
     <div>
       <label for="editStatus" class="block text-sm font-medium text-gray-700">Estado</label>
@@ -674,9 +677,11 @@
     </div>
   </form>
 </Modal>
+{/if}
 
 <!-- Modal Eliminar Ticket -->
-<Modal open={showDeleteModal} title="Eliminar Ticket" on:close={() => showDeleteModal = false}>
+{#if showDeleteModal}
+<Modal title="Eliminar Ticket" on:close={() => showDeleteModal = false}>
   <div class="space-y-4">
     <div class="bg-red-50 border border-red-200 rounded-md p-4">
       <div class="flex">
@@ -718,4 +723,5 @@
       </button>
     </div>
   </div>
-</Modal>
+</Modal>
+{/if}

frontend-internal/src/routes/users/+page.svelte

@@ -172,7 +172,8 @@
   </div>
 </div>
 
-<Modal open={showModal} title={editingUser ? 'Editar Usuario' : 'Nuevo Usuario'} on:close={() => showModal = false}>
+{#if showModal}
+<Modal title={editingUser ? 'Editar Usuario' : 'Nuevo Usuario'} on:close={() => showModal = false}>
   <form on:submit|preventDefault={handleSubmit} class="space-y-4">
     <div class="grid grid-cols-2 gap-4">
       <div>
@@ -229,3 +230,4 @@
     </div>
   </form>
 </Modal>
+{/if}