Version con fallas

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { auth } from '$lib/stores/auth.js';
+;
 
   export let toggleSidebar: () => void;
 

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

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

@@ -62,16 +62,7 @@
           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'
-        }
-      );
-    }
-
-    return baseNavigation;
-  }
-
-  function isCurrentPage(href: string) {
-    return $page.url.pathname === href || ($page.url.pathname.startsWith(href) && href !== '/');
-  }
+}
 </script>
 
 <!-- Mobile sidebar backdrop -->

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

@@ -1,9 +1,6 @@
 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;
@@ -98,7 +95,7 @@ function createAuthStore() {
       update(state => ({ ...state, isLoading: true }));
       
       try {
-        const response = await fetch(`${API_URL}/v1/auth/login`, {
+        const response = await fetch('/api/v1/auth/login', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -150,7 +147,7 @@ function createAuthStore() {
         update (state => ({ ...state, isLoading: true }));
 
         try {
-            const response = await fetch(`${API_URL}/v1/auth/refresh`, {
+            const response = await fetch('/api/v1/auth/refresh', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

frontend-internal/src/lib/utils/api.ts

@@ -25,15 +25,11 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
 
   const authState = get(auth);
   const token = authState.token || (typeof window !== 'undefined' ? localStorage.getItem('internal_auth_token') : null);
-  const user = authState.user || (typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('internal_auth_user') || 'null') : null);
 
   const headers = new Headers(init.headers);
   if (token) {
     headers.set('Authorization', `Bearer ${token}`);
   }
-  if (user && user.tenant_id) {
-    headers.set('X-Tenant-ID', user.tenant_id);
-  }
   if (!headers.has('Content-Type')) {
     headers.set('Content-Type', 'application/json');
   }
@@ -69,15 +65,11 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
 async function downloadFile(endpoint: string, filename: string): Promise<void> {
   const authState = get(auth);
   const token = authState.token || (typeof window !== 'undefined' ? localStorage.getItem('internal_auth_token') : null);
-  const user = authState.user || (typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('internal_auth_user') || 'null') : null);
 
   const headers = new Headers();
   if (token) {
     headers.set('Authorization', `Bearer ${token}`);
   }
-  if (user && user.tenant_id) {
-    headers.set('X-Tenant-ID', user.tenant_id);
-  }
 
   const response = await fetch(`${API_BASE}${endpoint}`, {
     method: 'GET',

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

@@ -1,704 +0,0 @@
-<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,8 +145,7 @@
   </div>
 </div>
 
-{#if showModal}
-<Modal title={editingCategory ? 'Editar Categoría' : 'Nueva Categoría'} on:close={() => showModal = false}>
+<Modal open={showModal} 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>
@@ -183,4 +182,3 @@
     </div>
   </form>
 </Modal>
-{/if}

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

@@ -118,8 +118,7 @@
   </div>
 </div>
 
-{#if showModal}
-<Modal title={editingSystem ? 'Editar Sistema' : 'Nuevo Sistema'} on:close={() => showModal = false}>
+<Modal open={showModal} 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>
@@ -146,4 +145,3 @@
     </div>
   </form>
 </Modal>
-{/if}

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

@@ -126,8 +126,7 @@
   </div>
 </div>
 
-{#if showModal}
-<Modal title={editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'} on:close={() => showModal = false}>
+<Modal open={showModal} 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>
@@ -165,4 +164,3 @@
     </div>
   </form>
 </Modal>
-{/if}

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

@@ -9,7 +9,6 @@
   let categories = [];
   let systems = [];
   let users = [];
-  let tenants = []; // Nueva lista de tenants
   let isLoading = false;
   let showModal = false;
   let showEditModal = false;
@@ -19,15 +18,6 @@
   // Filtros
   let filterStatus = '';
   let filterPriority = '';
-  let filterTenant = ''; // Nuevo filtro por cliente/tenant
-  let filterCategory = ''; // Filtro por categoría
-  let filterAssignedTo = ''; // Filtro por asignado a
-  let searchText = ''; // Búsqueda por texto
-  let filterDateFrom = ''; // Fecha desde
-  let filterDateTo = ''; // Fecha hasta
-  
-  // Estado de filtros
-  $: activeFiltersCount = [filterTenant, filterStatus, filterPriority, filterCategory, filterAssignedTo, searchText, filterDateFrom, filterDateTo].filter(f => f && f.trim()).length;
   
   // Form para editar
   let editFormData = {
@@ -60,34 +50,25 @@
     { value: 'URGENT', label: 'Urgente', color: 'red' }
   ];
 
-  // Ajustar la función loadData para usar el endpoint administrativo con filtros
+  // Ajustar la función loadData para asegurar que los filtros se envíen correctamente
   async function loadData() {
     isLoading = true;
     try {
-      // Preparar parámetros filtrando valores vacíos
-      const ticketParams = {};
-      if (filterStatus) ticketParams.status_filter = filterStatus;
-      if (filterPriority) ticketParams.priority_filter = filterPriority;
-      if (filterTenant) ticketParams.tenant_id_filter = filterTenant;
-      if (filterCategory) ticketParams.category_filter = filterCategory;
-      if (filterAssignedTo) ticketParams.assigned_to_filter = filterAssignedTo;
-      if (searchText) ticketParams.search = searchText;
-      if (filterDateFrom) ticketParams.date_from = filterDateFrom;
-      if (filterDateTo) ticketParams.date_to = filterDateTo;
-
-      const [ticketsData, categoriesData, systemsData, usersData, tenantsData] = await Promise.all([
-        // Usar el nuevo endpoint administrativo
-        api.get('/tickets/admin/all', ticketParams),
+      const [ticketsData, categoriesData, systemsData, usersData] = await Promise.all([
+        api.get('/tickets/', {
+          params: {
+            status: filterStatus || undefined,
+            priority: filterPriority || undefined
+          }
+        }),
         api.get('/categories/'),
         api.get('/systems/'),
-        api.get('/users/'),
-        api.get('/tenants/') // Cargar lista de tenants
+        api.get('/users/')
       ]);
       tickets = ticketsData;
       categories = categoriesData;
       systems = systemsData;
       users = usersData;
-      tenants = tenantsData;
     } catch (e) {
       toast.error('Error cargando datos: ' + (e.message || 'Error desconocido'));
     } finally {
@@ -99,28 +80,6 @@
   function applyFilters() {
     loadData();
   }
-  
-  // Limpiar todos los filtros
-  function clearFilters() {
-    filterStatus = '';
-    filterPriority = '';
-    filterTenant = '';
-    filterCategory = '';
-    filterAssignedTo = '';
-    searchText = '';
-    filterDateFrom = '';
-    filterDateTo = '';
-    applyFilters();
-  }
-  
-  // Búsqueda en tiempo real (debounced)
-  let searchTimeout;
-  function handleSearchInput() {
-    clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => {
-      applyFilters();
-    }, 500);
-  }
 
   function openCreateModal() {
     selectedTicket = null;
@@ -260,31 +219,12 @@
 </script>
 
 <div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
-  <div class="sm:flex sm:items-center sm:justify-between">
+  <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
       <h1 class="text-xl font-semibold text-gray-900">Tickets de Soporte</h1>
-      <p class="mt-2 text-sm text-gray-700">
-        Gestión de tickets del sistema de mesa de ayuda.
-        {#if activeFiltersCount > 0}
-          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 ml-2">
-            {activeFiltersCount} filtro{activeFiltersCount !== 1 ? 's' : ''} activo{activeFiltersCount !== 1 ? 's' : ''}
-          </span>
-        {/if}
-      </p>
+      <p class="mt-2 text-sm text-gray-700">Gestión de tickets del sistema de mesa de ayuda.</p>
     </div>
-    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none space-x-3">
-      {#if activeFiltersCount > 0}
-        <button
-          type="button"
-          on:click={clearFilters}
-          class="inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
-        >
-          <svg class="w-4 h-4 mr-2" 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>
-          Limpiar filtros
-        </button>
-      {/if}
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
       <button
         type="button"
         on:click={openCreateModal}
@@ -295,139 +235,46 @@
     </div>
   </div>
 
-  <!-- Filtros Avanzados -->
-  <div class="mt-6 bg-white shadow sm:rounded-lg">
-    <div class="px-4 py-5 sm:p-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Filtros</h3>
-      
-      <!-- Primera fila - Búsqueda y Filtros principales -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-4 mb-4">
-        <!-- Búsqueda por texto -->
-        <div class="sm:col-span-2">
-          <label for="searchText" class="block text-sm font-medium text-gray-700 mb-1">Búsqueda</label>
-          <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <input
-              type="text"
-              id="searchText"
-              bind:value={searchText}
-              on:input={handleSearchInput}
-              placeholder="Buscar en título o descripción..."
-              class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-            />
-          </div>
-        </div>
-        
-        <!-- Cliente/Empresa -->
-        <div>
-          <label for="filterTenant" class="block text-sm font-medium text-gray-700 mb-1">Cliente/Empresa</label>
-          <select
-            id="filterTenant"
-            bind:value={filterTenant}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos los clientes</option>
-            {#each tenants as tenant}
-              <option value={tenant.id}>{tenant.name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Estado -->
-        <div>
-          <label for="filterStatus" class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
-          <select
-            id="filterStatus"
-            bind:value={filterStatus}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos</option>
-            {#each STATUSES as status}
-              <option value={status.value}>{status.label}</option>
-            {/each}
-          </select>
-        </div>
+  <!-- Filtros -->
+  <div class="mt-6 bg-white shadow sm:rounded-lg p-4">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      <div>
+        <label for="filterStatus" class="block text-sm font-medium text-gray-700">Estado</label>
+        <select
+          id="filterStatus"
+          bind:value={filterStatus}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
+        >
+          <option value="">Todos</option>
+          {#each STATUSES as status}
+            <option value={status.value}>{status.label}</option>
+          {/each}
+        </select>
       </div>
       
-      <!-- Segunda fila - Filtros secundarios -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-5">
-        <!-- Prioridad -->
-        <div>
-          <label for="filterPriority" class="block text-sm font-medium text-gray-700 mb-1">Prioridad</label>
-          <select
-            id="filterPriority"
-            bind:value={filterPriority}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todas</option>
-            {#each PRIORITIES as priority}
-              <option value={priority.value}>{priority.label}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Categoría -->
-        <div>
-          <label for="filterCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
-          <select
-            id="filterCategory"
-            bind:value={filterCategory}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todas</option>
-            {#each categories as category}
-              <option value={category.id}>{category.name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Asignado a -->
-        <div>
-          <label for="filterAssignedTo" class="block text-sm font-medium text-gray-700 mb-1">Asignado a</label>
-          <select
-            id="filterAssignedTo"
-            bind:value={filterAssignedTo}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos</option>
-            {#each users.filter(u => u.role === 'AGENT' || u.role === 'SUPPORT_MANAGER' || u.role === 'ADMIN') as user}
-              <option value={user.id}>{user.first_name} {user.last_name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Fecha desde -->
-        <div>
-          <label for="filterDateFrom" class="block text-sm font-medium text-gray-700 mb-1">Desde</label>
-          <input
-            type="date"
-            id="filterDateFrom"
-            bind:value={filterDateFrom}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          />
-        </div>
-        
-        <!-- Fecha hasta -->
-        <div>
-          <label for="filterDateTo" class="block text-sm font-medium text-gray-700 mb-1">Hasta</label>
-          <input
-            type="date"
-            id="filterDateTo"
-            bind:value={filterDateTo}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          />
-        </div>
+      <div>
+        <label for="filterPriority" class="block text-sm font-medium text-gray-700">Prioridad</label>
+        <select
+          id="filterPriority"
+          bind:value={filterPriority}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
+        >
+          <option value="">Todas</option>
+          {#each PRIORITIES as priority}
+            <option value={priority.value}>{priority.label}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="flex items-end">
+        <button
+          on:click={loadData}
+          class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          Actualizar
+        </button>
       </div>
     </div>
   </div>
@@ -441,13 +288,12 @@
             <thead class="bg-gray-50">
               <tr>
                 <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Ticket</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Cliente/Empresa</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asunto</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Prioridad</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Creado por</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Categoría</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asignado a</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Fecha</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Creado</th>
                 <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                   <span class="sr-only">Acciones</span>
                 </th>
@@ -455,9 +301,9 @@
             </thead>
             <tbody class="divide-y divide-gray-200 bg-white">
               {#if isLoading}
-                <tr><td colspan="9" class="text-center py-4">Cargando...</td></tr>
+                <tr><td colspan="8" class="text-center py-4">Cargando...</td></tr>
               {:else if tickets.length === 0}
-                <tr><td colspan="9" class="text-center py-4">No hay tickets registrados</td></tr>
+                <tr><td colspan="8" class="text-center py-4">No hay tickets registrados</td></tr>
               {:else}
                 {#each tickets as ticket}
                   <tr 
@@ -467,10 +313,6 @@
                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                       {ticket.ticket_number || ticket.id.substring(0, 8)}
                     </td>
-                    <td class="px-3 py-4 text-sm text-gray-900">
-                      <div class="font-medium text-indigo-600">{ticket.tenant?.name || 'N/A'}</div>
-                      <div class="text-xs text-gray-500">{ticket.tenant?.contact_email || ''}</div>
-                    </td>
                     <td class="px-3 py-4 text-sm text-gray-900">
                       <div class="font-medium">{ticket.subject}</div>
                       <div class="text-gray-500 truncate max-w-xs">{ticket.description}</div>
@@ -485,10 +327,8 @@
                         {getPriorityBadge(ticket.priority).label}
                       </span>
                     </td>
-                    <td class="px-3 py-4 text-sm text-gray-900">
-                      <div class="font-medium">{ticket.created_by_user?.first_name} {ticket.created_by_user?.last_name}</div>
-                      <div class="text-xs text-gray-500">{ticket.created_by_user?.email}</div>
-                      <div class="text-xs text-indigo-600">{ticket.created_by_user?.role || ''}</div>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {getCategoryName(ticket.category_id)}
                     </td>
                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                       {getUserName(ticket.assigned_to)}
@@ -522,8 +362,7 @@
 </div>
 
 <!-- Modal Crear Ticket -->
-{#if showModal}
-<Modal title="Nuevo Ticket" on:close={() => showModal = false}>
+<Modal open={showModal} 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>
@@ -609,11 +448,9 @@
     </div>
   </form>
 </Modal>
-{/if}
 
 <!-- Modal Editar Ticket -->
-{#if showEditModal}
-<Modal title="Editar Ticket #{selectedTicket?.ticket_number || ''}" on:close={() => showEditModal = false}>
+<Modal open={showEditModal} 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>
@@ -677,11 +514,9 @@
     </div>
   </form>
 </Modal>
-{/if}
 
 <!-- Modal Eliminar Ticket -->
-{#if showDeleteModal}
-<Modal title="Eliminar Ticket" on:close={() => showDeleteModal = false}>
+<Modal open={showDeleteModal} 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">
@@ -723,5 +558,4 @@
       </button>
     </div>
   </div>
-</Modal>
-{/if}
+</Modal>

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

@@ -172,8 +172,7 @@
   </div>
 </div>
 
-{#if showModal}
-<Modal title={editingUser ? 'Editar Usuario' : 'Nuevo Usuario'} on:close={() => showModal = false}>
+<Modal open={showModal} 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>
@@ -230,4 +229,3 @@
     </div>
   </form>
 </Modal>
-{/if}