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

2026-07-28 23:39:03 -05:00
parent 772a4a5656
commit 28affb5a55
16 changed files with 957 additions and 34 deletions
@@ -0,0 +1,120 @@
+<div x-data="soporteWebhook()" x-init="init()" class="p-6 max-w-2xl">
+  <h1 class="text-xl font-bold text-slate-800 mb-1">Webhook de correo entrante</h1>
+  <p class="text-sm text-slate-500 mb-6">Configura la integración para recibir correos de soporte@u-s.app y convertirlos automáticamente en tickets.</p>
+
+  <div class="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
+    <div>
+      <label class="block text-sm font-medium text-slate-700 mb-1">Proveedor</label>
+      <select x-model="cfg.provider" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        <option value="sendgrid">SendGrid</option>
+        <option value="mailgun">Mailgun</option>
+        <option value="generic">Genérico</option>
+      </select>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-slate-700 mb-1">Email destino</label>
+      <input x-model="cfg.email_destino" type="text" placeholder="soporte@u-s.app"
+        class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+      <p class="text-xs text-slate-400 mt-1">Correo al que llegarán los mensajes. Ej: soporte@u-s.app</p>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-slate-700 mb-1">API Key / Secreto</label>
+      <input x-model="cfg.api_key" type="text" placeholder="opcional para validación"
+        class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+      <p class="text-xs text-slate-400 mt-1">Si el proveedor envía un token de verificación, pégalo aquí.</p>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <input x-model="cfg.responder_auto" type="checkbox" id="resp-auto"
+        class="rounded border-slate-300 text-[#8eb02f] focus:ring-[#8eb02f]">
+      <label for="resp-auto" class="text-sm text-slate-700">Responder automáticamente con acuse de recibo</label>
+    </div>
+
+    <div x-show="cfg.responder_auto">
+      <label class="block text-sm font-medium text-slate-700 mb-1">Mensaje de auto-respuesta</label>
+      <textarea x-model="cfg.mensaje_auto" rows="3" placeholder="Hemos recibido tu solicitud y te responderemos a la brevedad."
+        class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none"></textarea>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-slate-700 mb-1">Auto-asignar a</label>
+      <select x-model="cfg.asignar_a" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        <option value="">Sin asignar</option>
+        <template x-for="a in admins" :key="a.id">
+          <option :value="a.id" x-text="a.name"></option>
+        </template>
+      </select>
+      <p class="text-xs text-slate-400 mt-1">Los tickets creados por email se asignarán automáticamente a este admin.</p>
+    </div>
+
+    <div class="pt-2">
+      <button @click="guardar()"
+        class="px-6 py-2 rounded-xl text-white text-sm font-medium transition-colors"
+        style="background:#8eb02f"
+        onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
+        Guardar configuración
+      </button>
+    </div>
+
+    <div x-show="webhookUrl" class="bg-slate-50 border border-slate-200 rounded-lg p-4 mt-4">
+      <p class="text-xs font-medium text-slate-600 mb-1">URL del webhook</p>
+      <p class="text-sm text-slate-800 font-mono break-all" x-text="webhookUrl"></p>
+      <p class="text-xs text-slate-400 mt-1">Configura esta URL en el proveedor de correo para enviar los emails entrantes.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+function soporteWebhook() {
+  return {
+    cfg: {
+      id: 0,
+      nombre: 'Soporte',
+      provider: 'sendgrid',
+      email_destino: 'soporte@u-s.app',
+      api_key: '',
+      responder_auto: true,
+      mensaje_auto: '',
+      asignar_a: '',
+    },
+    admins: [],
+    webhookUrl: '',
+
+    async init() {
+      try {
+        const r = await axios.get('/app/soporte/webhook/data');
+        if (r.data && r.data.data) {
+          this.cfg = { ...this.cfg, ...r.data.data };
+          this.cfg.asignar_a = r.data.data.asignar_a || '';
+        }
+      } catch {}
+      try {
+        const r = await axios.get('/app/tickets/admins');
+        this.admins = r.data || [];
+      } catch {}
+      this.webhookUrl = window.location.origin + '/webhooks/soporte/' + this.cfg.provider;
+    },
+
+    async guardar() {
+      const payload = {
+        id: this.cfg.id || 0,
+        nombre: this.cfg.nombre || 'Soporte',
+        provider: this.cfg.provider,
+        email_destino: this.cfg.email_destino,
+        api_key: this.cfg.api_key,
+        responder_auto: this.cfg.responder_auto,
+        mensaje_auto: this.cfg.mensaje_auto,
+        asignar_a: this.cfg.asignar_a ? parseInt(this.cfg.asignar_a) : null,
+      };
+      try {
+        await axios.post('/app/soporte/webhook', payload);
+        alert('Configuración guardada');
+      } catch (e) {
+        alert('Error al guardar: ' + (e.response?.data?.error || e.message));
+      }
+    },
+  };
+}
+</script>
@@ -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;