feat: área de soporte con webhook de correo y asignación de tickets

resources/views/tickets_admin.html

@@ -3,9 +3,8 @@
   <div class="flex items-center justify-between mb-6">
     <div>
       <h1 class="text-xl font-bold text-slate-800">Tickets de soporte</h1>
-      <p class="text-sm text-slate-500 mt-0.5">Todos los tickets abiertos por clientes del portal</p>
+      <p class="text-sm text-slate-500 mt-0.5">Todos los tickets abiertos por clientes del portal y correo</p>
     </div>
-    <!-- Filtro estado -->
     <div class="flex items-center gap-2">
       <template x-for="s in estados" :key="s.val">
         <button @click="filtro=s.val; load()"
@@ -32,25 +31,29 @@
       <div :id="'ticket-' + t.ID" class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
         <!-- Cabecera del ticket -->
         <div class="p-4 flex items-start gap-4 cursor-pointer" @click="t._open = !t._open">
-          <!-- Indicador de estado -->
           <div class="mt-0.5 w-2.5 h-2.5 rounded-full flex-shrink-0" :class="dotClass(t.estado)"></div>
           <div class="flex-1 min-w-0">
             <div class="flex flex-wrap items-center gap-2 mb-1">
               <span class="badge" :class="ticketBadge(t.estado)" x-text="t.estado"></span>
               <span class="badge" :class="prioridadBadge(t.prioridad)" x-text="t.prioridad"></span>
-              <span x-show="t.proyecto && t.proyecto.nombre" class="text-xs text-slate-400">
-                📁 <span x-text="t.proyecto ? t.proyecto.nombre : ''"></span>
-              </span>
+              <span x-show="t.origen==='email'" class="badge badge-default text-xs">📧 Email</span>
+              <span x-show="t.origen==='portal'" class="badge badge-default text-xs">🌐 Portal</span>
             </div>
             <h3 class="font-semibold text-sm text-slate-800 truncate" x-text="t.titulo"></h3>
             <p class="text-xs text-slate-500 mt-0.5">
-              Por: <span x-text="t.autor_nombre"></span> &middot; <span x-text="formatDate(t.CreatedAt)"></span>
+              <span x-text="t.autor_nombre"></span>
+              <span x-show="t.email_from" class="text-slate-400">&lt;<span x-text="t.email_from"></span>&gt;</span>
+              <span class="mx-1">&middot;</span>
+              <span x-text="formatDate(t.CreatedAt)"></span>
               <span x-show="t.mensajes && t.mensajes.length" class="ml-2 text-slate-400">
                 💬 <span x-text="t.mensajes ? t.mensajes.length : 0"></span>
               </span>
+              <span x-show="t.asignado" class="ml-2 text-slate-400">
+                👤 <span x-text="t.asignado.name"></span>
+              </span>
             </p>
           </div>
-          <!-- Cambiar estado -->
+          <!-- Acciones -->
           <div class="flex items-center gap-2 flex-shrink-0" @click.stop>
             <select @change="cambiarEstado(t, $event.target.value)"
               class="text-xs border border-slate-200 rounded-lg px-2 py-1.5 outline-none bg-white text-slate-700">
@@ -59,12 +62,14 @@
               <option value="resuelto"     :selected="t.estado==='resuelto'">Resuelto</option>
               <option value="cerrado"      :selected="t.estado==='cerrado'">Cerrado</option>
             </select>
-            <a :href="`/app/proyectos/${t.proyecto_id}/detalle`" title="Ver proyecto"
-              class="text-slate-400 hover:text-slate-600 transition-colors" @click.stop>
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
-              </svg>
-            </a>
+            <!-- Asignar -->
+            <select @change="asignar(t, $event.target.value)"
+              class="text-xs border border-slate-200 rounded-lg px-2 py-1.5 outline-none bg-white text-slate-700">
+              <option value="">Sin asignar</option>
+              <template x-for="a in admins" :key="a.id">
+                <option :value="a.id" :selected="t.asignado_a===a.id" x-text="a.name"></option>
+              </template>
+            </select>
           </div>
         </div>
 
@@ -108,12 +113,17 @@
     </template>
   </div>
 
+  <!-- Paginación simple -->
+  <div x-show="!loading && tickets.length > 0" class="mt-4 text-xs text-slate-400 text-center">
+    Mostrando <span x-text="tickets.length"></span> tickets
+  </div>
 </div>
 
 <script>
 function ticketsAdmin() {
   return {
     tickets: [],
+    admins: [],
     loading: true,
     filtro: 'todos',
     estados: [
@@ -125,12 +135,20 @@ function ticketsAdmin() {
     ],
 
     async init() {
+      await this.cargarAdmins();
       const params = new URLSearchParams(window.location.search);
       if (params.get('ticket')) this.filtro = 'todos';
       await this.load();
       this.openTicketFromQuery();
     },
 
+    async cargarAdmins() {
+      try {
+        const r = await axios.get('/app/tickets/admins');
+        this.admins = r.data || [];
+      } catch {}
+    },
+
     async load() {
       this.loading = true;
       try {
@@ -158,6 +176,20 @@ function ticketsAdmin() {
       t.estado = estado;
     },
 
+    async asignar(t, userId) {
+      if (!userId) {
+        await axios.put(`/app/tickets/${t.ID}/asignar`, { asignado_id: 0 });
+        t.asignado_a = null;
+        t.asignado = null;
+      } else {
+        const id = parseInt(userId);
+        await axios.put(`/app/tickets/${t.ID}/asignar`, { asignado_id: id });
+        t.asignado_a = id;
+        const a = this.admins.find(x => x.id === id);
+        t.asignado = a ? { name: a.name } : null;
+      }
+    },
+
     async responder(t) {
       const contenido = (t._reply || '').trim();
       if (!contenido) return;