Descarga de archivos implementada

backend/app/api/v1/endpoints/tickets.py

@@ -865,10 +865,16 @@ async def download_attachment(
     current_tenant: Tenant = Depends(get_current_tenant)
 ):
     """Descargar un archivo adjunto"""
+    import logging
+    logger = logging.getLogger(__name__)
+    
+    logger.info(f"Download request - ticket_id: {ticket_id}, attachment_id: {attachment_id}")
+    
     try:
         ticket_uuid = uuid.UUID(ticket_id)
         attachment_uuid = uuid.UUID(attachment_id)
     except ValueError:
+        logger.error(f"Invalid UUID format - ticket_id: {ticket_id}, attachment_id: {attachment_id}")
         raise HTTPException(status_code=400, detail="ID inválido")
     
     # Verificar ticket
@@ -878,6 +884,7 @@ async def download_attachment(
     ticket = result.scalar_one_or_none()
     
     if not ticket:
+        logger.error(f"Ticket not found - ticket_id: {ticket_id}")
         raise HTTPException(status_code=404, detail="Ticket no encontrado")
     
     # Obtener attachment
@@ -888,12 +895,26 @@ async def download_attachment(
     attachment = result.scalar_one_or_none()
     
     if not attachment:
+        logger.error(f"Attachment not found - attachment_id: {attachment_id}")
         raise HTTPException(status_code=404, detail="Adjunto no encontrado")
     
+    logger.info(f"Attachment found - file_path: {attachment.file_path}, original_filename: {attachment.original_filename}")
+    
     # Obtener path del archivo
-    file_path = file_handler.get_file_path(attachment.file_path)
+    try:
+        file_path = file_handler.get_file_path(attachment.file_path)
+        logger.info(f"Absolute file path: {file_path}")
+        
+        if not file_path.exists():
+            logger.error(f"File does not exist at path: {file_path}")
+            raise HTTPException(status_code=404, detail="Archivo no encontrado en el sistema")
+            
+    except Exception as e:
+        logger.error(f"Error getting file path: {str(e)}")
+        raise
     
     # Retornar archivo
+    logger.info(f"Returning file: {attachment.original_filename}")
     return FileResponse(
         path=file_path,
         filename=attachment.original_filename,

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

@@ -2,20 +2,20 @@
   import { onMount } from 'svelte';
   import { auth } from '$lib/stores/auth.js';
   import Icon from './Icon.svelte';
-  
+
   export let showLogo = true;
   export let showNavigation = true;
-  
+
   let isMenuOpen = false;
-  
+
   onMount(() => {
     auth.init();
   });
-  
+
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
-  
+
   function handleLogout() {
     auth.logout();
     isMenuOpen = false;
@@ -43,10 +43,16 @@
       <!-- Navigation -->
       {#if showNavigation && $auth.isAuthenticated}
         <nav class="hidden md:flex space-x-8">
-          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Mis Tickets
           </a>
-          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets/new"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Crear Ticket
           </a>
         </nav>
@@ -60,7 +66,7 @@
               on:click={toggleMenu}
               class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-2"
               tabindex="0"
-              on:keydown={(e) => e.key === 'Enter' && toggleMenu()}
+              on:keydown={e => e.key === 'Enter' && toggleMenu()}
             >
               <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                 <span class="text-primary-600 text-sm font-medium">
@@ -68,13 +74,16 @@
                 </span>
               </div>
               <span class="hidden sm:block text-sm">
-                {$auth.user?.first_name} {$auth.user?.last_name}
+                {$auth.user?.first_name}
+                {$auth.user?.last_name}
               </span>
               <Icon name="chevronDown" size="w-4 h-4" />
             </button>
 
             {#if isMenuOpen}
-              <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+              <div
+                class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
+              >
                 <div class="py-1">
                   <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                     {$auth.user?.email}
@@ -82,7 +91,7 @@
                   <a
                     href="/profile"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    on:click={() => isMenuOpen = false}
+                    on:click={() => (isMenuOpen = false)}
                   >
                     Mi Perfil
                   </a>
@@ -91,7 +100,7 @@
                     class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                     role="button"
                     tabindex="0"
-                    on:keydown={(e) => e.key === 'Enter' && handleLogout()}
+                    on:keydown={e => e.key === 'Enter' && handleLogout()}
                   >
                     Cerrar Sesión
                   </button>
@@ -100,10 +109,7 @@
             {/if}
           </div>
         {:else}
-          <a
-            href="/login"
-            class="text-gray-700 hover:text-primary-600 text-sm font-medium"
-          >
+          <a href="/login" class="text-gray-700 hover:text-primary-600 text-sm font-medium">
             Iniciar Sesión
           </a>
         {/if}
@@ -114,10 +120,16 @@
     {#if showNavigation && $auth.isAuthenticated}
       <div class="md:hidden border-t border-gray-200 py-2">
         <nav class="flex space-x-4">
-          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Mis Tickets
           </a>
-          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets/new"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Crear Ticket
           </a>
         </nav>
@@ -128,8 +140,5 @@
 
 <!-- Backdrop for mobile menu -->
 {#if isMenuOpen}
-  <div 
-    class="fixed inset-0 z-40 md:hidden" 
-    on:click={() => isMenuOpen = false}
-  ></div>
-{/if}
+  <div class="fixed inset-0 z-40 md:hidden" on:click={() => (isMenuOpen = false)} />
+{/if}

frontend-client/src/lib/stores/tickets.ts

@@ -328,6 +328,39 @@ function createTicketsStore() {
         comments: [],
         attachments: []
       }));
+    },
+
+    // Download attachment
+    downloadAttachment: async (ticketId: string, attachmentId: string, filename: string) => {
+      const authState = get(auth);
+
+      if (!authState.token || !authState.user) {
+        throw new Error('Not authenticated');
+      }
+
+      const response = await fetch(`/api/v1/tickets/${ticketId}/attachments/${attachmentId}/download`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${authState.token}`,
+          'X-Tenant-ID': authState.user.tenant_id
+        }
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ detail: 'Download failed' }));
+        throw new Error(error.detail || 'Download failed');
+      }
+
+      // Crear blob y descargar
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
     }
   };
 }

frontend-client/src/routes/+page.svelte

@@ -4,14 +4,14 @@
   import { tickets } from '$lib/stores/tickets.js';
   import { goto } from '$app/navigation';
   import Icon from '$lib/components/Icon.svelte';
-  
+
   onMount(() => {
     // Redirect if not authenticated
     if (!$auth.isAuthenticated) {
       goto('/login');
       return;
     }
-    
+
     // Load user's tickets
     tickets.loadTickets();
   });
@@ -26,102 +26,108 @@
   <div class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white mb-8">
     <div class="max-w-3xl">
       <h1 class="text-3xl font-bold mb-2">
-        Bienvenido, {$auth.user?.first_name} {$auth.user?.last_name}
+        Bienvenido, {$auth.user?.first_name}
+        {$auth.user?.last_name}
       </h1>
       <p class="text-primary-100 text-lg">
-        Gestiona tus tickets de soporte de manera eficiente. Crea nuevos tickets, 
-        da seguimiento a los existentes y mantente actualizado con el estado de tus solicitudes.
+        Gestiona tus tickets de soporte de manera eficiente. Crea nuevos tickets, da seguimiento a
+        los existentes y mantente actualizado con el estado de tus solicitudes.
       </p>
     </div>
   </div>
-  
+
   <!-- Quick Actions -->
   <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-    <a 
-      href="/tickets/new" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+    <a href="/tickets/new" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors"
+        >
           <Icon name="plus" size="w-6 h-6" className="text-primary-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Crear Ticket</h3>
-        <p class="text-gray-600 text-sm">
-          Reporta un problema o solicita soporte técnico
-        </p>
+        <p class="text-gray-600 text-sm">Reporta un problema o solicita soporte técnico</p>
       </div>
     </a>
-    
-    <a 
-      href="/tickets" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+
+    <a href="/tickets" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors"
+        >
           <Icon name="ticket" size="w-6 h-6" className="text-blue-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Mis Tickets</h3>
-        <p class="text-gray-600 text-sm">
-          Consulta el estado de todos tus tickets
-        </p>
+        <p class="text-gray-600 text-sm">Consulta el estado de todos tus tickets</p>
       </div>
     </a>
-    
-    <a 
-      href="/profile" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+
+    <a href="/profile" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors"
+        >
           <Icon name="user" size="w-6 h-6" className="text-green-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Mi Perfil</h3>
-        <p class="text-gray-600 text-sm">
-          Actualiza tu información personal
-        </p>
+        <p class="text-gray-600 text-sm">Actualiza tu información personal</p>
       </div>
     </a>
   </div>
-  
+
   <!-- Recent Tickets -->
   <div class="card">
     <div class="card-header">
       <h2 class="text-xl font-semibold text-gray-900">Tickets Recientes</h2>
       <p class="text-gray-600 mt-1">Últimos tickets que has creado o actualizado</p>
     </div>
-    
+
     <div class="card-content">
       {#if $tickets.isLoading}
         <div class="text-center py-8">
-          <div class="spinner w-8 h-8 mx-auto mb-4"></div>
+          <div class="spinner w-8 h-8 mx-auto mb-4" />
           <p class="text-gray-600">Cargando tickets...</p>
         </div>
       {:else if $tickets.error}
         <div class="text-center py-8">
-          <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+          <div
+            class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4"
+          >
             <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
           </div>
           <p class="text-gray-600 mb-4">Error al cargar los tickets</p>
-          <button 
-            on:click={() => tickets.loadTickets()}
-            class="btn-primary px-4 py-2"
-          >
+          <button on:click={() => tickets.loadTickets()} class="btn-primary px-4 py-2">
             Reintentar
           </button>
         </div>
       {:else if $tickets.tickets.length === 0}
         <div class="text-center py-8">
-          <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-            <svg class="w-6 h-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 2v10a2 2 0 002 2h8a2 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" />
+          <div
+            class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4"
+          >
+            <svg
+              class="w-6 h-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 2v10a2 2 0 002 2h8a2 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>
           <p class="text-gray-600 mb-4">No tienes tickets creados</p>
-          <a href="/tickets/new" class="btn-primary px-4 py-2">
-            Crear tu primer ticket
-          </a>
+          <a href="/tickets/new" class="btn-primary px-4 py-2"> Crear tu primer ticket </a>
         </div>
       {:else}
         <div class="space-y-4">
@@ -144,17 +150,23 @@
                 </div>
                 <div class="ml-4">
                   <span class="badge-{ticket.status.toLowerCase().replace('_', '-')}">
-                    {ticket.status === 'NEW' ? 'Nuevo' : 
-                     ticket.status === 'IN_PROGRESS' ? 'En Progreso' :
-                     ticket.status === 'WAITING_FOR_CLIENT' ? 'Esperando Cliente' :
-                     ticket.status === 'RESOLVED' ? 'Resuelto' :
-                     ticket.status === 'CLOSED' ? 'Cerrado' : 'Reabierto'}
+                    {ticket.status === 'NEW'
+                      ? 'Nuevo'
+                      : ticket.status === 'IN_PROGRESS'
+                      ? 'En Progreso'
+                      : ticket.status === 'WAITING_FOR_CLIENT'
+                      ? 'Esperando Cliente'
+                      : ticket.status === 'RESOLVED'
+                      ? 'Resuelto'
+                      : ticket.status === 'CLOSED'
+                      ? 'Cerrado'
+                      : 'Reabierto'}
                   </span>
                 </div>
               </div>
             </div>
           {/each}
-          
+
           {#if $tickets.tickets.length > 5}
             <div class="text-center pt-4 border-t border-gray-200">
               <a href="/tickets" class="btn-secondary px-4 py-2">
@@ -176,4 +188,4 @@
     overflow: hidden;
     line-clamp: 2; /* Propiedad estándar para compatibilidad */
   }
-</style>
+</style>

frontend-client/src/routes/login/+page.svelte

@@ -4,7 +4,7 @@
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
   import Icon from '$lib/components/Icon.svelte';
-  
+
   let email = '';
   let password = '';
   let totpCode = '';
@@ -12,23 +12,23 @@
   let showTwoFactor = false;
   let errorMessage = '';
   let showPassword = false;
-  
+
   onMount(() => {
     // Redirect if already authenticated
     if ($auth.isAuthenticated) {
       goto('/');
     }
   });
-  
+
   async function handleLogin() {
     if (!email || !password) {
       errorMessage = 'Por favor completa todos los campos';
       return;
     }
-    
+
     isLoading = true;
     errorMessage = '';
-    
+
     try {
       await auth.login({
         email,
@@ -36,12 +36,12 @@
         tenant_slug: 'aduanasoft', // Default tenant for now
         totp_code: totpCode || undefined
       });
-      
+
       toast.success('¡Bienvenido! Has iniciado sesión correctamente');
       goto('/');
     } catch (error: any) {
       console.error('Login error:', error);
-      
+
       // Check if 2FA is required
       if (error.message.includes('two-factor') || error.message.includes('2FA')) {
         showTwoFactor = true;
@@ -54,7 +54,7 @@
       isLoading = false;
     }
   }
-  
+
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       handleLogin();
@@ -62,182 +62,213 @@
   }
 </script>
 
-
 <div class="min-h-screen flex font-sans bg-white overflow-hidden">
-  
   <!-- Left Side: Hero Image & Overlay (55% width) -->
   <div class="hidden lg:flex w-[55%] relative bg-gray-900">
     <!-- Background Image -->
-    <div 
-        class="absolute inset-0 bg-cover bg-center z-0" 
-        style="background-image: url('/images/SOPORTE.webp'); opacity: 1;"
-    ></div>
-    
+    <div
+      class="absolute inset-0 bg-cover bg-center z-0"
+      style="background-image: url('/images/SOPORTE.webp'); opacity: 1;"
+    />
+
     <!-- Gradient Overlay -->
-    <div class="absolute inset-0 bg-gradient-to-br from-[#1e3a8a]/75 to-[#172554]/75 z-10"></div>
-    <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent z-10"></div>
+    <div class="absolute inset-0 bg-gradient-to-br from-[#1e3a8a]/75 to-[#172554]/75 z-10" />
+    <div
+      class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent z-10"
+    />
 
     <!-- Content -->
     <div class="relative z-20 w-full h-full flex flex-col justify-between p-16 text-white">
-        <!-- Top Logo (Left) -->
-        <div class="flex flex-col">
-            <img src="/images/Logo%20AS%20blanco(1).png" alt="AduanaSoft" class="h-32 w-auto object-contain self-start drop-shadow-lg" />
-        </div>
+      <!-- Top Logo (Left) -->
+      <div class="flex flex-col">
+        <img
+          src="/images/Logo%20AS%20blanco(1).png"
+          alt="AduanaSoft"
+          class="h-32 w-auto object-contain self-start drop-shadow-lg"
+        />
+      </div>
 
-        <!-- Main Hero Text -->
-        <div class="space-y-4 mb-12">
-            <h2 class="text-5xl font-extrabold tracking-tight drop-shadow-xl leading-tight">
-                Control Total <br/>
-                de Servicios de TI
-            </h2>
-            <p class="text-lg text-blue-100/90 font-light max-w-lg leading-relaxed drop-shadow-md">
-                Portal de atención a clientes. Genere tickets de soporte técnico para nuestros sistemas y reciba asistencia especializada para garantizar la continuidad de su operación.
-            </p>
-        </div>
+      <!-- Main Hero Text -->
+      <div class="space-y-4 mb-12">
+        <h2 class="text-5xl font-extrabold tracking-tight drop-shadow-xl leading-tight">
+          Control Total <br />
+          de Servicios de TI
+        </h2>
+        <p class="text-lg text-blue-100/90 font-light max-w-lg leading-relaxed drop-shadow-md">
+          Portal de atención a clientes. Genere tickets de soporte técnico para nuestros sistemas y
+          reciba asistencia especializada para garantizar la continuidad de su operación.
+        </p>
+      </div>
 
-        <!-- Bottom Footer -->
-        <div class="text-xs font-bold tracking-[0.2em] text-blue-200/60 uppercase">
-            ServiceManager Enterprise Platform
-        </div>
+      <!-- Bottom Footer -->
+      <div class="text-xs font-bold tracking-[0.2em] text-blue-200/60 uppercase">
+        ServiceManager Enterprise Platform
+      </div>
     </div>
   </div>
 
   <!-- Right Side: Login Form (45% width) -->
-  <div class="w-full lg:w-[45%] flex flex-col justify-center items-center p-8 lg:p-16 bg-white relative">
-    
+  <div
+    class="w-full lg:w-[45%] flex flex-col justify-center items-center p-8 lg:p-16 bg-white relative"
+  >
     <div class="w-full max-w-md space-y-8">
-        <!-- Logo & Header -->
-        <div class="text-center space-y-2">
-            <h2 class="text-3xl font-bold text-gray-900">Bienvenido</h2>
-            <p class="text-gray-500 text-sm">Ingrese a su cuenta corporativa</p>
+      <!-- Logo & Header -->
+      <div class="text-center space-y-2">
+        <h2 class="text-3xl font-bold text-gray-900">Bienvenido</h2>
+        <p class="text-gray-500 text-sm">Ingrese a su cuenta corporativa</p>
+      </div>
+
+      <!-- Form -->
+      <form on:submit|preventDefault={handleLogin} class="space-y-6 mt-8">
+        {#if errorMessage}
+          <div
+            class="p-3 rounded-md bg-red-50 border border-red-100 flex items-center gap-3 animate-fade-in text-sm text-red-600"
+          >
+            <Icon name="alert-circle" class="w-4 h-4 flex-shrink-0" />
+            {errorMessage}
+          </div>
+        {/if}
+
+        {#if !showTwoFactor}
+          <div class="space-y-5">
+            <!-- Email Input -->
+            <div class="space-y-1.5">
+              <label for="email" class="block text-sm font-semibold text-gray-700"
+                >Correo Electrónico</label
+              >
+              <div class="relative group">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Icon
+                    name="mail"
+                    class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors"
+                  />
+                </div>
+                <input
+                  id="email"
+                  type="email"
+                  bind:value={email}
+                  on:keydown={handleKeyDown}
+                  class="block w-full pl-10 pr-3 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                  placeholder="admin@aduanasoft.com"
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+
+            <!-- Password Input -->
+            <div class="space-y-1.5">
+              <label for="password" class="block text-sm font-semibold text-gray-700"
+                >Contraseña</label
+              >
+              <div class="relative group">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Icon
+                    name="lock"
+                    class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors"
+                  />
+                </div>
+                {#if showPassword}
+                  <input
+                    id="password"
+                    type="text"
+                    bind:value={password}
+                    on:keydown={handleKeyDown}
+                    class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                    placeholder="••••••••"
+                    required
+                    disabled={isLoading}
+                  />
+                {:else}
+                  <input
+                    id="password"
+                    type="password"
+                    bind:value={password}
+                    on:keydown={handleKeyDown}
+                    class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                    placeholder="••••••••"
+                    required
+                    disabled={isLoading}
+                  />
+                {/if}
+                <button
+                  type="button"
+                  class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray-400 hover:text-gray-600 focus:outline-none"
+                  on:click={() => (showPassword = !showPassword)}
+                >
+                  <Icon name={showPassword ? 'eye-off' : 'eye'} class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer"
+                />
+                <label
+                  for="remember-me"
+                  class="ml-2 block text-sm text-gray-500 cursor-pointer select-none"
+                  >Recordar en este equipo</label
+                >
+              </div>
+              <a
+                href="/forgot-password"
+                class="text-sm font-medium text-blue-600 hover:text-blue-500"
+              >
+                Olvide mi clave
+              </a>
+            </div>
+          </div>
+        {:else}
+          <!-- 2FA Input -->
+          <div class="space-y-4 animate-slide-up">
+            <label for="code" class="block text-sm font-medium text-gray-700 text-center"
+              >Código de Verificación (2FA)</label
+            >
+            <p class="text-xs text-center text-gray-500 mb-4">Ingrese el código de 6 dígitos</p>
+
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Icon name="shield-check" class="w-5 h-5 text-blue-500" />
+              </div>
+              <input
+                id="code"
+                type="text"
+                bind:value={totpCode}
+                on:keydown={handleKeyDown}
+                class="block w-full pl-10 py-3 text-center tracking-[0.5em] font-mono text-lg border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+                placeholder="000000"
+                maxlength="6"
+                required
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+        {/if}
+
+        <div class="pt-2">
+          <button
+            type="submit"
+            class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+            disabled={isLoading}
+          >
+            {#if isLoading}
+              <Icon name="loader-2" class="w-5 h-5 animate-spin mr-2" />
+              Procesando...
+            {:else}
+              {showTwoFactor ? 'Verificar Acceso' : 'Acceder al Portal'}
+            {/if}
+          </button>
         </div>
 
-        <!-- Form -->
-        <form on:submit|preventDefault={handleLogin} class="space-y-6 mt-8">
-           {#if errorMessage}
-             <div class="p-3 rounded-md bg-red-50 border border-red-100 flex items-center gap-3 animate-fade-in text-sm text-red-600">
-               <Icon name="alert-circle" class="w-4 h-4 flex-shrink-0" />
-               {errorMessage}
-             </div>
-           {/if}
-
-           {#if !showTwoFactor}
-             <div class="space-y-5">
-               <!-- Email Input -->
-               <div class="space-y-1.5">
-                 <label for="email" class="block text-sm font-semibold text-gray-700">Correo Electrónico</label>
-                 <div class="relative group">
-                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                     <Icon name="mail" class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors" />
-                   </div>
-                   <input
-                     id="email"
-                     type="email"
-                     bind:value={email}
-                     on:keydown={handleKeyDown}
-                     class="block w-full pl-10 pr-3 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                     placeholder="admin@aduanasoft.com"
-                     required
-                     disabled={isLoading}
-                   />
-                 </div>
-               </div>
-
-               <!-- Password Input -->
-               <div class="space-y-1.5">
-                 <label for="password" class="block text-sm font-semibold text-gray-700">Contraseña</label>
-                 <div class="relative group">
-                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                     <Icon name="lock" class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors" />
-                   </div>
-                   {#if showPassword}
-                     <input
-                       id="password"
-                       type="text"
-                       bind:value={password}
-                       on:keydown={handleKeyDown}
-                       class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                       placeholder="••••••••"
-                       required
-                       disabled={isLoading}
-                     />
-                   {:else}
-                     <input
-                       id="password"
-                       type="password"
-                       bind:value={password}
-                       on:keydown={handleKeyDown}
-                       class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                       placeholder="••••••••"
-                       required
-                       disabled={isLoading}
-                     />
-                   {/if}
-                   <button 
-                     type="button"
-                     class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray-400 hover:text-gray-600 focus:outline-none"
-                     on:click={() => showPassword = !showPassword}
-                   >
-                     <Icon name={showPassword ? 'eye-off' : 'eye'} class="w-5 h-5" />
-                   </button>
-                 </div>
-               </div>
-               
-               <div class="flex items-center justify-between">
-                 <div class="flex items-center">
-                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer">
-                    <label for="remember-me" class="ml-2 block text-sm text-gray-500 cursor-pointer select-none">Recordar en este equipo</label>
-                 </div>
-                 <a href="/forgot-password" class="text-sm font-medium text-blue-600 hover:text-blue-500">
-                    Olvide mi clave
-                 </a>
-               </div>
-             </div>
-           
-           {:else}
-             <!-- 2FA Input -->
-             <div class="space-y-4 animate-slide-up">
-               <label for="code" class="block text-sm font-medium text-gray-700 text-center">Código de Verificación (2FA)</label>
-               <p class="text-xs text-center text-gray-500 mb-4">Ingrese el código de 6 dígitos</p>
-               
-               <div class="relative">
-                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                   <Icon name="shield-check" class="w-5 h-5 text-blue-500" />
-                 </div>
-                 <input
-                   id="code"
-                   type="text"
-                   bind:value={totpCode}
-                   on:keydown={handleKeyDown}
-                   class="block w-full pl-10 py-3 text-center tracking-[0.5em] font-mono text-lg border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
-                   placeholder="000000"
-                   maxlength="6"
-                   required
-                   disabled={isLoading}
-                 />
-               </div>
-             </div>
-           {/if}
-
-           <div class="pt-2">
-             <button
-               type="submit"
-               class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-               disabled={isLoading}
-             >
-               {#if isLoading}
-                 <Icon name="loader-2" class="w-5 h-5 animate-spin mr-2" />
-                 Procesando...
-               {:else}
-                 {showTwoFactor ? 'Verificar Acceso' : 'Acceder al Portal'}
-               {/if}
-             </button>
-           </div>
-           
-           <div class="mt-8 text-center text-xs text-gray-400">
-             © 2026 Aduanasoft. Acceso exclusivo autorizado.
-           </div>
-        </form>
+        <div class="mt-8 text-center text-xs text-gray-400">
+          © 2026 Aduanasoft. Acceso exclusivo autorizado.
+        </div>
+      </form>
     </div>
   </div>
-</div>
+</div>

frontend-client/src/routes/profile/+page.svelte

@@ -430,7 +430,11 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isUpdatingProfile}>
+              <button
+                type="submit"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors"
+                disabled={isUpdatingProfile}
+              >
                 {#if isUpdatingProfile}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />
@@ -624,7 +628,9 @@
               <h3 class="font-medium text-gray-900 mb-4">Representantes</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label class="form-label" for="company_representative">Encargado/Representante</label>
+                  <label class="form-label" for="company_representative"
+                    >Encargado/Representante</label
+                  >
                   <input
                     id="company_representative"
                     type="text"
@@ -979,7 +985,11 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isChangingPassword}>
+              <button
+                type="submit"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors"
+                disabled={isChangingPassword}
+              >
                 {#if isChangingPassword}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />
@@ -1081,7 +1091,7 @@
     border-color: #d1d5db;
     color: #2563eb;
   }
-  
+
   .form-checkbox:focus {
     ring-color: #3b82f6;
     border-color: #3b82f6;

frontend-client/src/routes/tickets/[id]/+page.svelte

@@ -5,7 +5,7 @@
   import { tickets } from '$lib/stores/tickets.js';
   import { toast } from '$lib/stores/toast.js';
   import { goto } from '$app/navigation';
-  
+
   let ticketId: string;
   let newComment = '';
   let isSubmittingComment = false;
@@ -15,16 +15,16 @@
   let fileInput: HTMLInputElement;
   let isUploading = false;
   let pollingInterval: any = null;
-  let showAttachments = true; // Variable para controlar la visibilidad de attachments 
-  
+  let showAttachments = true; // Variable para controlar la visibilidad de attachments
+
   async function loadComments() {
-  try {
-    await tickets.reloadComments(ticketId);
-  } catch (error) {
-    // No mostrar error en polling silencioso
-    console.error('Error recargando comentarios:', error);
+    try {
+      await tickets.reloadComments(ticketId);
+    } catch (error) {
+      // No mostrar error en polling silencioso
+      console.error('Error recargando comentarios:', error);
+    }
   }
-}
 
   onMount(() => {
     // Redirect if not authenticated
@@ -32,25 +32,25 @@
       goto('/login');
       return;
     }
-    
+
     ticketId = $page.params.id;
     if (ticketId) {
       tickets.loadTicket(ticketId);
-      
-    // Polling cada 3 segundos
-    pollingInterval = setInterval(() => {
-      loadComments();
-    }, 3000);
-  }
-  
-  // Cleanup cuando se desmonte el componente
-  return () => {
-    if (pollingInterval) {
-      clearInterval(pollingInterval);
+
+      // Polling cada 3 segundos
+      pollingInterval = setInterval(() => {
+        loadComments();
+      }, 3000);
     }
-  };
-});
-  
+
+    // Cleanup cuando se desmonte el componente
+    return () => {
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+      }
+    };
+  });
+
   // Format date
   function formatDate(dateString: string): string {
     return new Date(dateString).toLocaleString('es-ES', {
@@ -61,7 +61,7 @@
       minute: '2-digit'
     });
   }
-  
+
   // Status mapping
   const statusConfig = {
     NEW: { label: 'Nuevo', class: 'badge-new' },
@@ -71,7 +71,7 @@
     CLOSED: { label: 'Cerrado', class: 'badge-closed' },
     REOPENED: { label: 'Reabierto', class: 'badge-reopened' }
   };
-  
+
   // Priority mapping
   const priorityConfig = {
     LOW: { label: 'Baja', class: 'badge-priority-low' },
@@ -79,10 +79,10 @@
     HIGH: { label: 'Alta', class: 'badge-priority-high' },
     URGENT: { label: 'Urgente', class: 'badge-priority-urgent' }
   };
-  
+
   async function handleAddComment() {
     if (!newComment.trim()) return;
-    
+
     isSubmittingComment = true;
     try {
       await tickets.addComment(ticketId, newComment.trim());
@@ -94,34 +94,39 @@
       isSubmittingComment = false;
     }
   }
-  
+
   async function handleFileUpload(event: Event) {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
     if (!file) return;
-    
+
     // Validate file size (max 10MB)
     if (file.size > 10 * 1024 * 1024) {
       toast.error('El archivo es demasiado grande. Máximo 10MB');
       target.value = '';
       return;
     }
-    
+
     // Validate file type
     const allowedTypes = [
-      'image/jpeg', 'image/png', 'image/gif', 'image/webp',
-      'application/pdf', 'text/plain', 'application/msword',
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'application/pdf',
+      'text/plain',
+      'application/msword',
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
       'application/vnd.ms-excel',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     ];
-    
+
     if (!allowedTypes.includes(file.type)) {
       toast.error('Tipo de archivo no permitido');
       target.value = '';
       return;
     }
-    
+
     isUploading = true;
     try {
       await tickets.uploadAttachment(ticketId, file);
@@ -133,11 +138,21 @@
       isUploading = false;
     }
   }
-  
+
+  async function handleDownloadAttachment(attachment: any) {
+    try {
+      await tickets.downloadAttachment(ticketId, attachment.id, attachment.original_filename);
+      toast.success('Descarga iniciada');
+    } catch (error: any) {
+      console.error('Download error:', error);
+      toast.error(error.message || 'Error al descargar el archivo');
+    }
+  }
+
   function handleCloseTicket() {
     showCloseDialog = true;
   }
-  
+
   async function confirmCloseTicket() {
     isClosingTicket = true;
     try {
@@ -151,14 +166,15 @@
       isClosingTicket = false;
     }
   }
-  
+
   function cancelCloseTicket() {
     showCloseDialog = false;
     closeResolution = '';
   }
-  
+
   // Check if user can close ticket
-  $: canClose = $tickets.currentTicket && 
+  $: canClose =
+    $tickets.currentTicket &&
     ['RESOLVED', 'WAITING_FOR_CLIENT'].includes($tickets.currentTicket.status);
 </script>
 
@@ -171,22 +187,24 @@
 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   {#if $tickets.isLoading}
     <div class="text-center py-12">
-      <div class="spinner w-8 h-8 mx-auto mb-4"></div>
+      <div class="spinner w-8 h-8 mx-auto mb-4" />
       <p class="text-gray-600">Cargando ticket...</p>
     </div>
   {:else if $tickets.error}
     <div class="text-center py-12">
       <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4">
         <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
         </svg>
       </div>
       <h3 class="text-lg font-medium text-gray-900 mb-2">Error al cargar ticket</h3>
       <p class="text-gray-600 mb-4">{$tickets.error}</p>
-      <button 
-        on:click={() => tickets.loadTicket(ticketId)}
-        class="btn-primary px-4 py-2"
-      >
+      <button on:click={() => tickets.loadTicket(ticketId)} class="btn-primary px-4 py-2">
         Reintentar
       </button>
     </div>
@@ -199,7 +217,7 @@
       </svg>
       <span>#{$tickets.currentTicket.id.substring(0, 8)}</span>
     </div>
-    
+
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Main Content -->
       <div class="lg:col-span-2 space-y-6">
@@ -223,7 +241,7 @@
                   </span>
                 </div>
               </div>
-              
+
               {#if canClose}
                 <button
                   on:click={handleCloseTicket}
@@ -235,14 +253,14 @@
               {/if}
             </div>
           </div>
-          
+
           <div class="card-content">
             <div class="prose max-w-none">
               <p class="whitespace-pre-wrap text-gray-700">
                 {$tickets.currentTicket.description}
               </p>
             </div>
-            
+
             {#if $tickets.currentTicket.resolution}
               <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                 <h4 class="font-medium text-green-900 mb-2">Resolución:</h4>
@@ -253,7 +271,7 @@
             {/if}
           </div>
         </div>
-        
+
         <!-- Attachments -->
         {#if $tickets.attachments.length > 0}
           <div class="card">
@@ -261,14 +279,18 @@
               <div class="flex items-center justify-between">
                 <h3 class="text-lg font-semibold text-gray-900 flex items-center space-x-2">
                   <span>Archivos Adjuntos</span>
-                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                    {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1 ? 's' : ''}
+                  <span
+                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                  >
+                    {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1
+                      ? 's'
+                      : ''}
                   </span>
                 </h3>
-                <button 
+                <button
                   class="text-sm text-gray-500 hover:text-gray-700"
                   title="Ver/Ocultar archivos adjuntos"
-                  on:click={() => showAttachments = !showAttachments}
+                  on:click={() => (showAttachments = !showAttachments)}
                 >
                   {showAttachments ? 'Ocultar' : 'Ver'} archivos
                 </button>
@@ -278,11 +300,23 @@
               <div class="card-content">
                 <div class="space-y-3">
                   {#each $tickets.attachments as attachment}
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                    <div
+                      class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                    >
                       <div class="flex items-center space-x-3">
                         <div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center">
-                          <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                          <svg
+                            class="w-4 h-4 text-gray-600"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                            />
                           </svg>
                         </div>
                         <div>
@@ -290,22 +324,26 @@
                             {attachment.original_filename}
                           </p>
                           <p class="text-xs text-gray-500">
-                            {Math.round(attachment.size_bytes / 1024)} KB • 
-                            Subido por {attachment.uploaded_by_name} • 
+                            {Math.round(attachment.size_bytes / 1024)} KB • Subido por {attachment.uploaded_by_name}
+                            •
                             {formatDate(attachment.uploaded_at)}
                           </p>
                         </div>
                       </div>
-                      <a
-                        href="/api/v1/tickets/{ticketId}/attachments/{attachment.id}/download"
+                      <button
+                        on:click={() => handleDownloadAttachment(attachment)}
                         class="btn-ghost p-2 hover:bg-blue-100 rounded-md transition-colors"
-                        target="_blank"
                         title="Descargar archivo"
                       >
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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" />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
-                      </a>
+                      </button>
                     </div>
                   {/each}
                 </div>
@@ -313,7 +351,7 @@
             {/if}
           </div>
         {/if}
-        
+
         <!-- Comments -->
         <div class="card">
           <div class="card-header">
@@ -327,11 +365,18 @@
             {:else}
               <div class="space-y-4">
                 {#each $tickets.comments as comment}
-                {console.log('Comment:', comment)}
+                  {console.log('Comment:', comment)}
                   <div class="flex space-x-3">
-                    <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0"
+                    >
                       <span class="text-primary-600 text-xs font-medium">
-                       {comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'} 
+                        {comment.author_name
+                          ? comment.author_name
+                              .split(' ')
+                              .map(n => n[0])
+                              .join('')
+                          : '??'}
                       </span>
                     </div>
                     <div class="flex-1 min-w-0">
@@ -356,7 +401,7 @@
                 {/each}
               </div>
             {/if}
-            
+
             <!-- Add Comment Form -->
             <div class="mt-6 pt-6 border-t border-gray-200">
               <div class="space-y-4">
@@ -366,8 +411,8 @@
                   placeholder="Escribe tu comentario o respuesta..."
                   bind:value={newComment}
                   disabled={isSubmittingComment}
-                ></textarea>
-                
+                />
+
                 <div class="flex justify-between items-center">
                   <div class="flex items-center space-x-4">
                     <input
@@ -385,16 +430,21 @@
                       disabled={isUploading}
                     >
                       {#if isUploading}
-                        <div class="spinner w-4 h-4"></div>
+                        <div class="spinner w-4 h-4" />
                       {:else}
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                          />
                         </svg>
                       {/if}
                       <span class="text-sm">Adjuntar archivo</span>
                     </button>
                   </div>
-                  
+
                   <button
                     on:click={handleAddComment}
                     class="btn-primary px-4 py-2"
@@ -402,7 +452,7 @@
                   >
                     {#if isSubmittingComment}
                       <div class="flex items-center space-x-2">
-                        <div class="spinner w-4 h-4"></div>
+                        <div class="spinner w-4 h-4" />
                         <span>Enviando...</span>
                       </div>
                     {:else}
@@ -415,7 +465,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Sidebar -->
       <div class="space-y-6">
         <!-- Ticket Info -->
@@ -426,35 +476,44 @@
           <div class="card-content space-y-4">
             <div>
               <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
-              <dd class="text-sm text-gray-900 font-mono">#{$tickets.currentTicket.id.substring(0, 8)}</dd>
+              <dd class="text-sm text-gray-900 font-mono">
+                #{$tickets.currentTicket.id.substring(0, 8)}
+              </dd>
             </div>
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Categoría</dt>
-              <dd class="text-sm text-gray-900">{$tickets.currentTicket.category_name || 'Sin categoría'}</dd>
+              <dd class="text-sm text-gray-900">
+                {$tickets.currentTicket.category_name || 'Sin categoría'}
+              </dd>
             </div>
-            
+
             {#if $tickets.currentTicket.assigned_to_name}
               <div>
                 <dt class="text-sm font-medium text-gray-500">Asignado a</dt>
                 <dd class="text-sm text-gray-900">{$tickets.currentTicket.assigned_to_name}</dd>
               </div>
             {/if}
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Creado</dt>
               <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.created_at)}</dd>
             </div>
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Última actualización</dt>
               <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.updated_at)}</dd>
             </div>
-            
+
             {#if $tickets.currentTicket.due_date}
               <div>
                 <dt class="text-sm font-medium text-gray-500">Fecha límite</dt>
-                <dd class="text-sm text-gray-900 {new Date($tickets.currentTicket.due_date) < new Date() ? 'text-red-600' : ''}">
+                <dd
+                  class="text-sm text-gray-900 {new Date($tickets.currentTicket.due_date) <
+                  new Date()
+                    ? 'text-red-600'
+                    : ''}"
+                >
                   {formatDate($tickets.currentTicket.due_date)}
                   {#if new Date($tickets.currentTicket.due_date) < new Date()}
                     <span class="block text-xs text-red-500">¡Vencido!</span>
@@ -472,29 +531,50 @@
 <!-- Close Ticket Dialog -->
 {#if showCloseDialog}
   <div class="fixed inset-0 z-50 overflow-y-auto">
-    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" role="dialog" tabindex="0" on:click={cancelCloseTicket} on:keydown={(e) => e.key === 'Escape' && cancelCloseTicket()}>
-        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+    <div
+      class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <div
+        class="fixed inset-0 transition-opacity"
+        role="dialog"
+        tabindex="0"
+        on:click={cancelCloseTicket}
+        on:keydown={e => e.key === 'Escape' && cancelCloseTicket()}
+      >
+        <div class="absolute inset-0 bg-gray-500 opacity-75" />
       </div>
-      
-      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
-            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
+              <svg
+                class="h-6 w-6 text-green-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Cerrar Ticket
-              </h3>
+              <h3 class="text-lg leading-6 font-medium text-gray-900">Cerrar Ticket</h3>
               <div class="mt-2">
                 <p class="text-sm text-gray-500">
-                  ¿Estás seguro de que quieres cerrar este ticket? Esta acción indica que el problema ha sido resuelto satisfactoriamente.
+                  ¿Estás seguro de que quieres cerrar este ticket? Esta acción indica que el
+                  problema ha sido resuelto satisfactoriamente.
                 </p>
               </div>
-              
+
               <div class="mt-4">
                 <label for="close-resolution" class="form-label">
                   Comentario de cierre (opcional)
@@ -506,7 +586,7 @@
                   placeholder="Describe cómo se resolvió el problema o agrega comentarios finales..."
                   bind:value={closeResolution}
                   disabled={isClosingTicket}
-                ></textarea>
+                />
               </div>
             </div>
           </div>
@@ -520,7 +600,7 @@
           >
             {#if isClosingTicket}
               <div class="flex items-center space-x-2">
-                <div class="spinner w-4 h-4"></div>
+                <div class="spinner w-4 h-4" />
                 <span>Cerrando...</span>
               </div>
             {:else}
@@ -539,4 +619,4 @@
       </div>
     </div>
   </div>
-{/if}
+{/if}

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

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { auth } from '$lib/stores/auth.js';
-  
+
   export let toggleSidebar: () => void;
-  
+
   function handleLogout() {
     auth.logout();
   }
-  
+
   let isMenuOpen = false;
-  
+
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
@@ -23,15 +23,20 @@
         class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 lg:hidden"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
         </svg>
       </button>
-      
+
       <div class="hidden lg:block">
         <h1 class="text-lg font-semibold text-gray-900">ServiceManager Internal</h1>
       </div>
     </div>
-    
+
     <!-- Right side -->
     <div class="flex items-center space-x-4">
       <!-- User menu -->
@@ -46,15 +51,23 @@
             </span>
           </div>
           <span class="hidden sm:block text-sm">
-            {$auth.user?.first_name} {$auth.user?.last_name}
+            {$auth.user?.first_name}
+            {$auth.user?.last_name}
           </span>
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </button>
 
         {#if isMenuOpen}
-          <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+          <div
+            class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
+          >
             <div class="py-1">
               <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                 {$auth.user?.email}
@@ -62,7 +75,7 @@
               <a
                 href="/profile"
                 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                on:click={() => isMenuOpen = false}
+                on:click={() => (isMenuOpen = false)}
               >
                 Mi Perfil
               </a>
@@ -82,11 +95,11 @@
 
 <!-- Backdrop for mobile menu -->
 {#if isMenuOpen}
-  <div 
-    class="fixed inset-0 z-40 lg:hidden" 
-    role="dialog" 
-    tabindex="0" 
-    on:click={() => isMenuOpen = false}
-    on:keydown={(e) => e.key === 'Escape' && (isMenuOpen = false)}
-  ></div>
-{/if}
+  <div
+    class="fixed inset-0 z-40 lg:hidden"
+    role="dialog"
+    tabindex="0"
+    on:click={() => (isMenuOpen = false)}
+    on:keydown={e => e.key === 'Escape' && (isMenuOpen = false)}
+  />
+{/if}

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { auth } from '$lib/stores/auth.js';
   import { page } from '$app/stores';
-  
+  import { auth } from '$lib/stores/auth.js';
+
   export let open = false;
-  
+
   // Navigation items based on user role
   $: navigation = getNavigationForRole($auth.user?.role);
-  
+
   function getNavigationForRole(role: string | undefined) {
     const baseNavigation = [
       {
@@ -20,7 +20,7 @@
         icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 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'
       }
     ];
-    
+
     if (role === 'ADMIN' || role === 'SUPPORT_MANAGER') {
       baseNavigation.push(
         {
@@ -45,7 +45,7 @@
         }
       );
     }
-    
+
     if (role === 'ADMIN') {
       baseNavigation.push(
         {
@@ -65,32 +65,51 @@
         }
       );
     }
-    
+
     return baseNavigation;
   }
-  
+
   function isCurrentPage(href: string) {
-    return $page.url.pathname === href || 
-           ($page.url.pathname.startsWith(href) && href !== '/');
+    return $page.url.pathname === href || ($page.url.pathname.startsWith(href) && href !== '/');
   }
 </script>
 
 <!-- Mobile sidebar backdrop -->
 {#if open}
   <div class="fixed inset-0 z-40 lg:hidden">
-    <div class="fixed inset-0 bg-gray-600 bg-opacity-75" role="dialog" tabindex="0" on:click={() => open = false} on:keydown={(e) => e.key === 'Escape' && (open = false)}></div>
+    <div
+      class="fixed inset-0 bg-gray-600 bg-opacity-75"
+      role="dialog"
+      tabindex="0"
+      on:click={() => (open = false)}
+      on:keydown={e => e.key === 'Escape' && (open = false)}
+    />
   </div>
 {/if}
 
 <!-- Sidebar -->
-<div class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform {open ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0">
+<div
+  class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform {open
+    ? 'translate-x-0'
+    : '-translate-x-full'} transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0"
+>
   <div class="flex flex-col h-full">
     <!-- Logo -->
     <div class="flex items-center justify-between h-16 px-6 bg-primary-600">
       <div class="flex items-center space-x-2">
         <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
-          <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
+          <svg
+            class="w-5 h-5 text-primary-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+            />
           </svg>
         </div>
         <div class="text-white">
@@ -98,28 +117,33 @@
           <p class="text-xs text-primary-100">Panel Interno</p>
         </div>
       </div>
-      
+
       <button
-        on:click={() => open = false}
+        on:click={() => (open = false)}
         class="p-2 rounded-md text-primary-100 hover:text-white hover:bg-primary-500 lg:hidden"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
         </svg>
       </button>
     </div>
-    
+
     <!-- Navigation -->
     <nav class="flex-1 px-4 py-6 space-y-2">
       {#each navigation as item}
         <a
           href={item.href}
-          class="flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors {
-            isCurrentPage(item.href)
-              ? 'bg-primary-100 text-primary-700'
-              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
-          }"
-          on:click={() => open = false}
+          class="flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors {isCurrentPage(
+            item.href
+          )
+            ? 'bg-primary-100 text-primary-700'
+            : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'}"
+          on:click={() => (open = false)}
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.icon} />
@@ -128,7 +152,7 @@
         </a>
       {/each}
     </nav>
-    
+
     <!-- User info -->
     <div class="px-4 py-4 border-t border-gray-200">
       <div class="flex items-center space-x-3">
@@ -139,15 +163,20 @@
         </div>
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-gray-900 truncate">
-            {$auth.user?.first_name} {$auth.user?.last_name}
+            {$auth.user?.first_name}
+            {$auth.user?.last_name}
           </p>
           <p class="text-xs text-gray-500 truncate">
-            {$auth.user?.role === 'ADMIN' ? 'Administrador' :
-             $auth.user?.role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
-             $auth.user?.role === 'AGENT' ? 'Agente' : 'Auditor'}
+            {$auth.user?.role === 'ADMIN'
+              ? 'Administrador'
+              : $auth.user?.role === 'SUPPORT_MANAGER'
+              ? 'Gerente de Soporte'
+              : $auth.user?.role === 'AGENT'
+              ? 'Agente'
+              : 'Auditor'}
           </p>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -9,14 +9,14 @@ interface RequestOptions extends RequestInit {
 
 async function request<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
   const { params, ...init } = options;
-  
+
   let url = `${API_BASE}${endpoint}`;
   if (params) {
     // Filtrar parámetros undefined y null
     const filteredParams = Object.entries(params)
       .filter(([key, value]) => value !== undefined && value !== null && value !== '')
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
-    
+
     if (Object.keys(filteredParams).length > 0) {
       const searchParams = new URLSearchParams(filteredParams);
       url += `?${searchParams.toString()}`;
@@ -42,9 +42,9 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
   if (response.status === 401) {
     // Token expired or invalid
     if (typeof window !== 'undefined') {
-        localStorage.removeItem('internal_auth_token');
-        localStorage.removeItem('internal_auth_user');
-        window.location.href = '/login'; 
+      localStorage.removeItem('internal_auth_token');
+      localStorage.removeItem('internal_auth_user');
+      window.location.href = '/login';
     }
     throw new Error('Unauthorized');
   }
@@ -56,25 +56,68 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
 
   // Handle empty responses (like 204 No Content)
   if (response.status === 204) {
-      return {} as T;
+    return {} as T;
   }
 
   return response.json();
 }
 
+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 headers = new Headers();
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    method: 'GET',
+    headers
+  });
+
+  if (response.status === 401) {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('internal_auth_token');
+      localStorage.removeItem('internal_auth_user');
+      window.location.href = '/login';
+    }
+    throw new Error('Unauthorized');
+  }
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.detail || `Download error: ${response.statusText}`);
+  }
+
+  // Crear blob y descargar
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  window.URL.revokeObjectURL(url);
+}
+
 export const api = {
-  get: <T>(endpoint: string, params?: Record<string, string>) => 
+  get: <T>(endpoint: string, params?: Record<string, string>) =>
     request<T>(endpoint, { method: 'GET', params }),
-    
-  post: <T>(endpoint: string, body: any) => 
+
+  post: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'POST', body: JSON.stringify(body) }),
-    
-  put: <T>(endpoint: string, body: any) => 
+
+  put: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'PUT', body: JSON.stringify(body) }),
-    
-  patch: <T>(endpoint: string, body: any) => 
+
+  patch: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'PATCH', body: JSON.stringify(body) }),
-    
-  delete: <T>(endpoint: string) => 
-    request<T>(endpoint, { method: 'DELETE' })
+
+  delete: <T>(endpoint: string) =>
+    request<T>(endpoint, { method: 'DELETE' }),
+
+  downloadFile: (endpoint: string, filename: string) =>
+    downloadFile(endpoint, filename)
 };

frontend-internal/src/routes/tickets/[id]/+page.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { api } from '$lib/utils/api';
+  import { page } from '$app/stores';
   import { toast } from '$lib/stores/toast';
+  import { api } from '$lib/utils/api';
+  import { onMount } from 'svelte';
 
   let ticketId: string;
   let ticket = null;
   let comments = [];
+  let attachments = [];
   let users = [];
   let isLoading = false;
   let newComment = '';
@@ -31,25 +32,27 @@
   ];
 
   async function loadComments() {
-  try {
-    const commentsData = await api.get(`/tickets/${ticketId}/comments`);
-    comments = commentsData;
-  } catch (e) {
-    // No mostrar error en polling silencioso
-    console.error('Error recargando comentarios:', e);
+    try {
+      const commentsData = await api.get(`/tickets/${ticketId}/comments`);
+      comments = commentsData;
+    } catch (e) {
+      // No mostrar error en polling silencioso
+      console.error('Error recargando comentarios:', e);
+    }
   }
-}
 
   async function loadData() {
     isLoading = true;
     try {
-      const [ticketData, commentsData, usersData] = await Promise.all([
+      const [ticketData, commentsData, attachmentsData, usersData] = await Promise.all([
         api.get(`/tickets/${ticketId}`),
         api.get(`/tickets/${ticketId}/comments`),
+        api.get(`/tickets/${ticketId}/attachments`),
         api.get('/users/')
       ]);
       ticket = ticketData;
       comments = commentsData;
+      attachments = attachmentsData;
       users = usersData;
     } catch (e) {
       toast.error('Error cargando ticket: ' + (e.message || 'Error desconocido'));
@@ -105,30 +108,42 @@
     });
   }
 
+  async function handleDownloadAttachment(attachment: any) {
+    try {
+      await api.downloadFile(
+        `/tickets/${ticketId}/attachments/${attachment.id}/download`,
+        attachment.original_filename
+      );
+      toast.success('Descarga iniciada');
+    } catch (error) {
+      console.error('Download error:', error);
+      toast.error('Error al descargar el archivo');
+    }
+  }
+
   onMount(() => {
     ticketId = $page.params.id;
     if (ticketId) {
       loadData();
-     // Polling cada 3 segundos
-    pollingInterval = setInterval(() => {
-      loadComments();
-    }, 3000);
-  }
-  
-  // Cleanup cuando se desmonte el componente
-  return () => {
-    if (pollingInterval) {
-      clearInterval(pollingInterval);
+      // Polling cada 3 segundos
+      pollingInterval = setInterval(() => {
+        loadComments();
+      }, 3000);
     }
-  };
-});
 
+    // Cleanup cuando se desmonte el componente
+    return () => {
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+      }
+    };
+  });
 </script>
 
 <div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
   {#if isLoading}
     <div class="text-center py-12">
-      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600" />
       <p class="mt-2 text-gray-600">Cargando ticket...</p>
     </div>
   {:else if ticket}
@@ -153,10 +168,18 @@
                   {ticket.subject || ticket.title}
                 </h1>
                 <div class="flex items-center space-x-3">
-                  <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(ticket.status).color}-100 text-{getStatusBadge(ticket.status).color}-800">
+                  <span
+                    class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(
+                      ticket.status
+                    ).color}-100 text-{getStatusBadge(ticket.status).color}-800"
+                  >
                     {getStatusBadge(ticket.status).label}
                   </span>
-                  <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(ticket.priority).color}-100 text-{getPriorityBadge(ticket.priority).color}-800">
+                  <span
+                    class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(
+                      ticket.priority
+                    ).color}-100 text-{getPriorityBadge(ticket.priority).color}-800"
+                  >
                     {getPriorityBadge(ticket.priority).label}
                   </span>
                   <span class="text-sm text-gray-500">
@@ -164,7 +187,7 @@
                   </span>
                 </div>
               </div>
-              
+
               <button
                 on:click={() => goto('/tickets')}
                 class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
@@ -183,6 +206,74 @@
           </div>
         </div>
 
+        <!-- Attachments Section -->
+        {#if attachments && attachments.length > 0}
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-5 border-b border-gray-200">
+              <h3 class="text-lg font-semibold text-gray-900">
+                Archivos Adjuntos ({attachments.length})
+              </h3>
+            </div>
+            <div class="px-6 py-5">
+              <div class="space-y-2">
+                {#each attachments as attachment}
+                  <div
+                    class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                  >
+                    <div class="flex items-center space-x-3">
+                      <div
+                        class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0"
+                      >
+                        <svg
+                          class="w-5 h-5 text-indigo-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                          />
+                        </svg>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-sm font-medium text-gray-900 truncate">
+                          {attachment.original_filename}
+                        </p>
+                        <p class="text-xs text-gray-500">
+                          {Math.round(attachment.size_bytes / 1024)} KB
+                          {#if attachment.uploaded_by_name}
+                            • Subido por {attachment.uploaded_by_name}
+                          {/if}
+                          {#if attachment.uploaded_at}
+                            • {formatDate(attachment.uploaded_at)}
+                          {/if}
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      on:click={() => handleDownloadAttachment(attachment)}
+                      class="inline-flex items-center p-2 text-sm font-medium text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
+                      title="Descargar {attachment.original_filename}"
+                    >
+                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
+                    </button>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        {/if}
+
         <!-- Comments Section -->
         <div class="bg-white shadow rounded-lg">
           <div class="px-6 py-5 border-b border-gray-200">
@@ -197,9 +288,16 @@
               <div class="space-y-4">
                 {#each comments as comment}
                   <div class="flex space-x-3">
-                    <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0"
+                    >
                       <span class="text-indigo-600 text-xs font-medium">
-                        {comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'}
+                        {comment.author_name
+                          ? comment.author_name
+                              .split(' ')
+                              .map(n => n[0])
+                              .join('')
+                          : '??'}
                       </span>
                     </div>
                     <div class="flex-1 min-w-0">
@@ -234,7 +332,7 @@
                   placeholder="Escribe tu comentario o respuesta..."
                   bind:value={newComment}
                   disabled={isSubmittingComment}
-                ></textarea>
+                />
 
                 <div class="flex justify-end">
                   <button
@@ -244,7 +342,9 @@
                   >
                     {#if isSubmittingComment}
                       <div class="flex items-center space-x-2">
-                        <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        <div
+                          class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+                        />
                         <span>Enviando...</span>
                       </div>
                     {:else}
@@ -268,7 +368,9 @@
           <div class="px-6 py-5 space-y-4">
             <div>
               <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
-              <dd class="text-sm text-gray-900 font-mono">#{ticket.ticket_number || ticket.id.substring(0, 8)}</dd>
+              <dd class="text-sm text-gray-900 font-mono">
+                #{ticket.ticket_number || ticket.id.substring(0, 8)}
+              </dd>
             </div>
 
             <div>
@@ -297,4 +399,4 @@
       </div>
     </div>
   {/if}
-</div>
+</div>