From 7b00f1336d2af5230930c7349d040992b8603556 Mon Sep 17 00:00:00 2001
From: icamarillo <icamarillo@aduanasoft.com.mx>
Date: Tue, 24 Mar 2026 08:27:13 -0600
Subject: [PATCH] Asunto funcionando

---
 .../lib/components/IssueDetailModal.svelte    | 221 ++++++++++++++++
 frontend-client/src/lib/utils/api.ts          |   6 +-
 .../src/routes/tickets/[id]/+page.svelte      | 249 +++++++++++++-----
 3 files changed, 414 insertions(+), 62 deletions(-)
 create mode 100644 frontend-client/src/lib/components/IssueDetailModal.svelte

diff --git a/frontend-client/src/lib/components/IssueDetailModal.svelte b/frontend-client/src/lib/components/IssueDetailModal.svelte
new file mode 100644
index 0000000..8d6d551
--- /dev/null
+++ b/frontend-client/src/lib/components/IssueDetailModal.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { auth } from '$lib/stores/auth';
+  import { toast } from '$lib/stores/toast';
+  import { api } from '$lib/utils/api';
+  import { createEventDispatcher } from 'svelte';
+
+  export let issue: any;
+  export let ticketId: string;
+
+  const dispatch = createEventDispatcher();
+
+  const STATUSES = [
+    { value: 'OPEN', label: 'Abierto' },
+    { value: 'IN_PROGRESS', label: 'En Progreso' },
+    { value: 'RESOLVED', label: 'Resuelto' },
+    { value: 'CLOSED', label: 'Cerrado' }
+  ];
+
+  const PRIORITIES = [
+    { value: 'LOW', label: 'Baja' },
+    { value: 'MEDIUM', label: 'Media' },
+    { value: 'HIGH', label: 'Alta' },
+    { value: 'URGENT', label: 'Urgente' }
+  ];
+
+  let isUpdatingStatus = false;
+  let isDeleting = false;
+
+  $: canManage = $auth.user?.role === 'ADMIN' || $auth.user?.role === 'CLIENT_ADMIN';
+  $: statusLabel = STATUSES.find(s => s.value === issue.status)?.label ?? issue.status;
+  $: priorityLabel = PRIORITIES.find(p => p.value === issue.priority)?.label ?? issue.priority;
+
+  function formatDate(dateString: string) {
+    return new Date(dateString).toLocaleString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  async function handleStatusChange(e: Event) {
+    const newStatus = (e.target as HTMLSelectElement).value;
+    isUpdatingStatus = true;
+    try {
+      const updated = await api.patch(`/tickets/${ticketId}/issues/${issue.id}/status`, {
+        status: newStatus
+      });
+      issue = updated;
+      toast.success('Estado actualizado');
+      dispatch('updated', updated);
+    } catch (err: any) {
+      toast.error(err.message || 'Error al actualizar estado');
+    } finally {
+      isUpdatingStatus = false;
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm('¿Eliminar este asunto? Esta acción no se puede deshacer.')) return;
+    isDeleting = true;
+    try {
+      await api.delete(`/tickets/${ticketId}/issues/${issue.id}`);
+      toast.success('Asunto eliminado');
+      dispatch('deleted', issue.id);
+      dispatch('close');
+    } catch (err: any) {
+      toast.error(err.message || 'Error al eliminar');
+    } finally {
+      isDeleting = false;
+    }
+  }
+
+  function handleClose() {
+    dispatch('close');
+  }
+</script>
+
+<div class="fixed inset-0 z-50 overflow-y-auto">
+  <div class="flex min-h-full items-center justify-center p-4">
+    <div
+      class="fixed inset-0 bg-gray-500 bg-opacity-75"
+      on:click={handleClose}
+      role="button"
+      tabindex="-1"
+      on:keydown={e => e.key === 'Escape' && handleClose()}
+    />
+    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-lg z-10">
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+        <h3 class="text-lg font-semibold text-gray-900">Detalle del Asunto</h3>
+        <button type="button" on:click={handleClose} class="text-gray-400 hover:text-gray-500">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body -->
+      <div class="px-6 py-5 space-y-4">
+        <!-- Status + Priority -->
+        <div class="flex items-center gap-3">
+          <span
+            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+          >
+            {priorityLabel}
+          </span>
+          <span
+            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700"
+          >
+            {statusLabel}
+          </span>
+        </div>
+
+        <!-- Contenido -->
+        <div>
+          <p class="text-sm font-medium text-gray-500 mb-1">Descripción</p>
+          <p class="text-sm text-gray-900 whitespace-pre-wrap bg-gray-50 rounded-md p-3">
+            {issue.content}
+          </p>
+        </div>
+
+        <!-- Creado por / cuando -->
+        <div class="flex justify-between text-sm text-gray-500">
+          <span
+            >Creado por <span class="font-medium text-gray-700">{issue.created_by_name}</span></span
+          >
+          <span>{formatDate(issue.created_at)}</span>
+        </div>
+
+        <!-- Usuarios etiquetados -->
+        {#if issue.tagged_users?.length > 0}
+          <div>
+            <p class="text-sm font-medium text-gray-500 mb-2">Usuarios etiquetados</p>
+            <div class="flex flex-wrap gap-2">
+              {#each issue.tagged_users as user}
+                <div
+                  class="flex items-center gap-1.5 bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full text-xs"
+                >
+                  <span class="font-medium">{user.full_name}</span>
+                  <span class="text-blue-400">·</span>
+                  <span>{user.email}</span>
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Adjunto -->
+        {#if issue.attachment_filename}
+          <div>
+            <p class="text-sm font-medium text-gray-500 mb-1">Adjunto</p>
+            <div class="flex items-center gap-2 bg-gray-50 rounded-md p-2">
+              <svg
+                class="h-4 w-4 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <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>
+              <span class="text-sm text-gray-700">{issue.attachment_filename}</span>
+            </div>
+          </div>
+        {/if}
+
+        <!-- Cambiar status (solo admins) -->
+        {#if canManage}
+          <div>
+            <label class="block text-sm font-medium text-gray-500 mb-1">Cambiar estado</label>
+            <select
+              value={issue.status}
+              on:change={handleStatusChange}
+              disabled={isUpdatingStatus}
+              class="block w-full rounded-md border border-gray-300 shadow-sm
+                     focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 disabled:opacity-50"
+            >
+              {#each STATUSES as s}
+                <option value={s.value}>{s.label}</option>
+              {/each}
+            </select>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-between px-6 py-4 border-t border-gray-200">
+        {#if canManage}
+          <button
+            type="button"
+            on:click={handleDelete}
+            disabled={isDeleting}
+            class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 border border-red-200 rounded-md hover:bg-red-100 disabled:opacity-50"
+          >
+            {isDeleting ? 'Eliminando...' : 'Eliminar asunto'}
+          </button>
+        {:else}
+          <div />
+        {/if}
+        <button
+          type="button"
+          on:click={handleClose}
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
+        >
+          Cerrar
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend-client/src/lib/utils/api.ts b/frontend-client/src/lib/utils/api.ts
index 9892269..7064953 100644
--- a/frontend-client/src/lib/utils/api.ts
+++ b/frontend-client/src/lib/utils/api.ts
@@ -2,6 +2,7 @@ import { auth } from '$lib/stores/auth';
 import { get } from 'svelte/store';
 
 const API_BASE = '/api/v1';
+
 interface RequestOptions extends RequestInit {
   params?: Record<string, string>;
 }
@@ -65,7 +66,6 @@ async function downloadFile(endpoint: string, filename: string): Promise<void> {
   if (authState.token) {
     headers.set('Authorization', `Bearer ${authState.token}`);
   }
-  }
   headers.set('X-App', 'client');
   const slug = get(auth)?.user?.tenant_slug || get(auth)?.user?.tenant_id || '';
   headers.set('X-Tenant-Slug', slug);
@@ -108,5 +108,7 @@ export const api = {
   delete: <T>(endpoint: string) =>
     request<T>(endpoint, { method: 'DELETE' }),
   downloadFile: (endpoint: string, filename: string) =>
-    downloadFile(endpoint, filename)
+    downloadFile(endpoint, filename),
+  postForm: <T>(endpoint: string, body: FormData) =>
+    request<T>(endpoint, { method: 'POST', body })
 };
\ No newline at end of file
diff --git a/frontend-client/src/routes/tickets/[id]/+page.svelte b/frontend-client/src/routes/tickets/[id]/+page.svelte
index 153408d..c0beec0 100644
--- a/frontend-client/src/routes/tickets/[id]/+page.svelte
+++ b/frontend-client/src/routes/tickets/[id]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import IssueDetailModal from '$lib/components/IssueDetailModal.svelte';
+  import IssueModal from '$lib/components/IssueModal.svelte';
   import { auth } from '$lib/stores/auth.js';
   import { tickets } from '$lib/stores/tickets.js';
   import { toast } from '$lib/stores/toast.js';
-  import { goto } from '$app/navigation';
-  import IssueModal from '$lib/components/IssueModal.svelte';
+  import { onMount } from 'svelte';
 
   let ticketId: string;
   let newComment = '';
@@ -17,6 +18,7 @@
   let isUploading = false;
   let showAttachments = true;
   let showIssueModal = false;
+  let selectedIssue = null;
   let pollingInterval: any = null;
 
   async function loadComments() {
@@ -35,15 +37,22 @@
     ticketId = $page.params.id;
     if (ticketId) {
       tickets.loadTicket(ticketId);
-      pollingInterval = setInterval(() => { loadComments(); }, 3000);
+      pollingInterval = setInterval(() => {
+        loadComments();
+      }, 3000);
     }
-    return () => { if (pollingInterval) clearInterval(pollingInterval); };
+    return () => {
+      if (pollingInterval) clearInterval(pollingInterval);
+    };
   });
 
   function formatDate(dateString: string): string {
     return new Date(dateString).toLocaleString('es-ES', {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit'
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
     });
   }
 
@@ -90,8 +99,13 @@
       return;
     }
     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'
@@ -122,7 +136,9 @@
     }
   }
 
-  function handleCloseTicket() { showCloseDialog = true; }
+  function handleCloseTicket() {
+    showCloseDialog = true;
+  }
 
   async function confirmCloseTicket() {
     isClosingTicket = true;
@@ -190,10 +206,15 @@
                   {$tickets.currentTicket.title}
                 </h1>
                 <div class="flex items-center space-x-3">
-                  <span class={(statusConfig[$tickets.currentTicket.status] ?? fallbackStatus).class}>
+                  <span
+                    class={(statusConfig[$tickets.currentTicket.status] ?? fallbackStatus).class}
+                  >
                     {(statusConfig[$tickets.currentTicket.status] ?? fallbackStatus).label}
                   </span>
-                  <span class={(priorityConfig[$tickets.currentTicket.priority] ?? fallbackPriority).class}>
+                  <span
+                    class={(priorityConfig[$tickets.currentTicket.priority] ?? fallbackPriority)
+                      .class}
+                  >
                     {(priorityConfig[$tickets.currentTicket.priority] ?? fallbackPriority).label}
                   </span>
                   <span class="text-sm text-gray-500">
@@ -202,7 +223,11 @@
                 </div>
               </div>
               {#if canClose}
-                <button on:click={handleCloseTicket} class="btn-success px-4 py-2" disabled={isClosingTicket}>
+                <button
+                  on:click={handleCloseTicket}
+                  class="btn-success px-4 py-2"
+                  disabled={isClosingTicket}
+                >
                   Cerrar Ticket
                 </button>
               {/if}
@@ -213,7 +238,9 @@
             {#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>
-                <p class="text-green-800 whitespace-pre-wrap">{$tickets.currentTicket.resolution}</p>
+                <p class="text-green-800 whitespace-pre-wrap">
+                  {$tickets.currentTicket.resolution}
+                </p>
               </div>
             {/if}
           </div>
@@ -226,12 +253,16 @@
               <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">
+                  <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}
                   </span>
                 </h3>
-                <button class="text-sm text-gray-500 hover:text-gray-700"
-                  on:click={() => (showAttachments = !showAttachments)}>
+                <button
+                  class="text-sm text-gray-500 hover:text-gray-700"
+                  on:click={() => (showAttachments = !showAttachments)}
+                >
                   {showAttachments ? 'Ocultar' : 'Ver'} archivos
                 </button>
               </div>
@@ -239,17 +270,28 @@
             {#if showAttachments}
               <div class="card-content 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">
+                  <div
+                    class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100"
+                  >
                     <div>
-                      <p class="text-sm font-medium text-gray-900">{attachment.original_filename}</p>
+                      <p class="text-sm font-medium text-gray-900">
+                        {attachment.original_filename}
+                      </p>
                       <p class="text-xs text-gray-500">
                         {Math.round(attachment.size_bytes / 1024)} KB • {attachment.uploaded_by_name}
                       </p>
                     </div>
-                    <button on:click={() => handleDownloadAttachment(attachment)} class="btn-ghost p-2">
+                    <button
+                      on:click={() => handleDownloadAttachment(attachment)}
+                      class="btn-ghost p-2"
+                    >
                       <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>
                     </button>
                   </div>
@@ -271,9 +313,14 @@
               <div class="space-y-4">
                 {#each $tickets.comments as 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?.split(' ').map(n => n[0]).join('') ?? '??'}
+                        {comment.author_name
+                          ?.split(' ')
+                          .map(n => n[0])
+                          .join('') ?? '??'}
                       </span>
                     </div>
                     <div class="flex-1 min-w-0">
@@ -281,7 +328,9 @@
                         <span class="text-sm font-medium text-gray-900">{comment.author_name}</span>
                         <span class="text-xs text-gray-500">{formatDate(comment.created_at)}</span>
                         {#if comment.is_internal}
-                          <span class="bg-red-100 text-red-700 text-xs px-2 py-0.5 rounded">Interno</span>
+                          <span class="bg-red-100 text-red-700 text-xs px-2 py-0.5 rounded"
+                            >Interno</span
+                          >
                         {/if}
                       </div>
                       <p class="text-gray-700 whitespace-pre-wrap">{comment.content}</p>
@@ -301,25 +350,40 @@
               />
               <div class="flex justify-between items-center">
                 <div>
-                  <input type="file" bind:this={fileInput} on:change={handleFileUpload}
+                  <input
+                    type="file"
+                    bind:this={fileInput}
+                    on:change={handleFileUpload}
                     class="hidden"
                     accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.txt,.doc,.docx,.xls,.xlsx"
-                    disabled={isUploading} />
-                  <button type="button" on:click={() => fileInput.click()}
-                    class="btn-ghost p-2 flex items-center space-x-2" disabled={isUploading}>
+                    disabled={isUploading}
+                  />
+                  <button
+                    type="button"
+                    on:click={() => fileInput.click()}
+                    class="btn-ghost p-2 flex items-center space-x-2"
+                    disabled={isUploading}
+                  >
                     {#if isUploading}
                       <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</span>
                   </button>
                 </div>
-                <button on:click={handleAddComment} class="btn-primary px-4 py-2"
-                  disabled={isSubmittingComment || !newComment.trim()}>
+                <button
+                  on:click={handleAddComment}
+                  class="btn-primary px-4 py-2"
+                  disabled={isSubmittingComment || !newComment.trim()}
+                >
                   {#if isSubmittingComment}
                     <div class="flex items-center space-x-2">
                       <div class="spinner w-4 h-4" />
@@ -345,11 +409,15 @@
           <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>
@@ -371,10 +439,13 @@
                 <dt class="text-sm font-medium text-gray-500 mb-2">Tiempos de SLA</dt>
                 {#if $tickets.currentTicket.sla_response_due}
                   {@const respDue = new Date($tickets.currentTicket.sla_response_due)}
-                  {@const respVencido = respDue < new Date() && !$tickets.currentTicket.first_response_at}
+                  {@const respVencido =
+                    respDue < new Date() && !$tickets.currentTicket.first_response_at}
                   <div class="mb-2">
                     <dt class="text-xs text-gray-400">Respuesta límite</dt>
-                    <dd class="text-sm {respVencido ? 'text-red-600 font-medium' : 'text-gray-900'}">
+                    <dd
+                      class="text-sm {respVencido ? 'text-red-600 font-medium' : 'text-gray-900'}"
+                    >
                       {formatDate($tickets.currentTicket.sla_response_due)}
                       {#if respVencido}
                         <span class="block text-xs text-red-500">¡Vencido!</span>
@@ -410,21 +481,46 @@
             <h3 class="text-lg font-semibold text-gray-900">
               Asuntos
               {#if $tickets.issues.length > 0}
-                <span class="text-gray-400 font-normal text-sm ml-1">({$tickets.issues.length})</span>
+                <span class="text-gray-400 font-normal text-sm ml-1"
+                  >({$tickets.issues.length})</span
+                >
               {/if}
             </h3>
-            <button type="button" on:click={() => showIssueModal = true}
-              class="text-sm text-blue-600 hover:text-blue-700 font-medium">
+            <button
+              type="button"
+              on:click={() => (showIssueModal = true)}
+              class="text-sm text-blue-600 hover:text-blue-700 font-medium"
+            >
               + Crear
             </button>
           </div>
           {#if $tickets.issues.length > 0}
             <div class="divide-y divide-gray-100">
               {#each $tickets.issues as issue}
-                <div class="card-content py-3">
-                  <p class="text-sm text-gray-700">{issue.content}</p>
-                  <span class="text-xs text-gray-400 mt-1 block">{issue.priority} · {issue.created_by_name}</span>
-                </div>
+                <button
+                  type="button"
+                  on:click={() => (selectedIssue = issue)}
+                  class="w-full text-left card-content py-3 hover:bg-gray-50 transition-colors"
+                >
+                  <div class="flex items-start justify-between gap-2">
+                    <p class="text-sm text-gray-700 line-clamp-2">{issue.content}</p>
+                    <span
+                      class="text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 shrink-0"
+                    >
+                      {issue.priority}
+                    </span>
+                  </div>
+                  {#if issue.tagged_users?.length > 0}
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each issue.tagged_users as u}
+                        <span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full"
+                          >{u.full_name}</span
+                        >
+                      {/each}
+                    </div>
+                  {/if}
+                  <p class="text-xs text-gray-400 mt-1">{issue.created_by_name}</p>
+                </button>
               {/each}
             </div>
           {:else}
@@ -438,38 +534,71 @@
   {/if}
 </div>
 
-<!-- Issue Modal -->
+<!-- Modals -->
 {#if showIssueModal && $tickets.currentTicket}
   <IssueModal
     ticketId={$tickets.currentTicket.id}
-    on:close={() => showIssueModal = false}
-    on:created={() => showIssueModal = false}
+    on:close={() => (showIssueModal = false)}
+    on:created={() => {
+      showIssueModal = false;
+      tickets.loadTicket(ticketId);
+    }}
+  />
+{/if}
+
+{#if selectedIssue && $tickets.currentTicket}
+  <IssueDetailModal
+    issue={selectedIssue}
+    ticketId={$tickets.currentTicket.id}
+    on:close={() => (selectedIssue = null)}
+    on:updated={e => {
+      selectedIssue = e.detail;
+    }}
+    on:deleted={() => {
+      selectedIssue = null;
+      tickets.loadTicket(ticketId);
+    }}
   />
 {/if}
 
-<!-- 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">
-      <div class="fixed inset-0 bg-gray-500 opacity-75"
-        role="dialog" tabindex="0"
+      <div
+        class="fixed inset-0 bg-gray-500 opacity-75"
+        role="dialog"
+        tabindex="0"
         on:click={cancelCloseTicket}
-        on:keydown={e => e.key === 'Escape' && cancelCloseTicket()} />
+        on:keydown={e => e.key === 'Escape' && cancelCloseTicket()}
+      />
       <div class="relative bg-white rounded-lg shadow-xl sm:max-w-lg w-full z-10 p-6">
         <h3 class="text-lg font-medium text-gray-900 mb-2">Cerrar Ticket</h3>
-        <p class="text-sm text-gray-500 mb-4">
-          ¿Estás seguro de que quieres cerrar este ticket?
-        </p>
-        <textarea rows="3" class="form-input w-full mb-4"
+        <p class="text-sm text-gray-500 mb-4">¿Estás seguro de que quieres cerrar este ticket?</p>
+        <textarea
+          rows="3"
+          class="form-input w-full mb-4"
           placeholder="Comentario de cierre (opcional)..."
-          bind:value={closeResolution} disabled={isClosingTicket} />
+          bind:value={closeResolution}
+          disabled={isClosingTicket}
+        />
         <div class="flex justify-end gap-3">
-          <button class="btn-secondary px-4 py-2" disabled={isClosingTicket} on:click={cancelCloseTicket}>
+          <button
+            class="btn-secondary px-4 py-2"
+            disabled={isClosingTicket}
+            on:click={cancelCloseTicket}
+          >
             Cancelar
           </button>
-          <button class="btn-success px-4 py-2 disabled:opacity-50" disabled={isClosingTicket} on:click={confirmCloseTicket}>
+          <button
+            class="btn-success px-4 py-2 disabled:opacity-50"
+            disabled={isClosingTicket}
+            on:click={confirmCloseTicket}
+          >
             {#if isClosingTicket}
-              <div class="flex items-center gap-2"><div class="spinner w-4 h-4" /><span>Cerrando...</span></div>
+              <div class="flex items-center gap-2">
+                <div class="spinner w-4 h-4" />
+                <span>Cerrando...</span>
+              </div>
             {:else}
               Cerrar Ticket
             {/if}
@@ -478,4 +607,4 @@
       </div>
     </div>
   </div>
-{/if}
\ No newline at end of file
+{/if}