Merge remote-tracking branch 'origin/main'

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

# Conflicts:
#	main.go

resources/views/query_runner.html

@@ -136,6 +136,19 @@
                     Limpiar
                 </button>
 
+                <!-- Batch mode toggle -->
+                <button @click="batchMode = !batchMode; if(!batchMode) batchResults = []"
+                    class="px-3 py-1.5 text-xs border rounded transition"
+                    :class="batchMode ? 'bg-amber-500 text-white border-amber-500' : 'hover:bg-gray-50'">
+                    <span x-text="batchMode ? '📚 Lote ON' : '📄 Lote OFF'"></span>
+                </button>
+
+                <!-- Subir .sql -->
+                <label x-show="!isMongo && !isRedis" class="px-3 py-1.5 text-xs border rounded hover:bg-gray-50 cursor-pointer transition">
+                    📁 Subir .sql
+                    <input type="file" accept=".sql" @change="uploadSQLFile($event)" class="hidden">
+                </label>
+
                 <!-- Botón AI -->
                 <button @click="askAI()" :disabled="aiLoading || !sqlText.trim()"
                     class="flex items-center gap-1 px-3 py-1.5 text-xs rounded transition disabled:opacity-40"
@@ -555,13 +568,68 @@
 
                 <!-- ── TAB: Resultados ── -->
                 <div x-show="activeTab === 'results'" class="flex-1 overflow-auto border rounded-lg">
-                    <div x-show="results.length === 0 && !loadingQuery" class="flex flex-col items-center justify-center h-40 text-gray-400 text-sm gap-2">
+                    <!-- Sin resultados -->
+                    <div x-show="!batchMode && results.length === 0 && !loadingQuery" class="flex flex-col items-center justify-center h-40 text-gray-400 text-sm gap-2">
                         <svg class="w-10 h-10 opacity-30" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 5.625c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
                         </svg>
                         <span>Sin resultados. Ejecuta una consulta.</span>
                     </div>
-                    <table x-show="results.length > 0" class="table-auto w-full text-xs">
+
+                    <!-- Batch results tabs -->
+                    <div x-show="batchMode && batchResults.length > 0" class="flex flex-col h-full">
+                        <div class="flex items-center gap-1 px-2 py-1.5 border-b bg-gray-50 sticky top-0 overflow-x-auto shrink-0">
+                            <template x-for="(br, i) in batchResults" :key="i">
+                                <button @click="batchActiveIdx = i"
+                                    class="px-2.5 py-1 text-[10px] rounded whitespace-nowrap font-mono transition flex items-center gap-1"
+                                    :class="batchActiveIdx === i
+                                        ? (br.status === 'error' ? 'bg-red-100 text-red-700 border border-red-200' : 'bg-[#8eb02f] text-white')
+                                        : (br.status === 'error' ? 'bg-red-50 text-red-500 border border-red-100' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50')">
+                                    <span x-text="'#' + (i+1)"></span>
+                                    <span class="truncate max-w-[100px]" x-text="br.sql.substring(0, 30)"></span>
+                                    <span x-show="br.status === 'ok'" class="text-green-500">✓</span>
+                                    <span x-show="br.status === 'error'" class="text-red-500">✗</span>
+                                </button>
+                            </template>
+                        </div>
+
+                        <!-- Resultado activo del batch -->
+                        <template x-for="(br, i) in batchResults" :key="i">
+                            <div x-show="batchActiveIdx === i" class="flex-1 overflow-auto">
+                                <div x-show="br.status === 'error'" class="p-4 text-xs text-red-600 bg-red-50 font-mono" x-text="br.error"></div>
+                                <div x-show="br.status === 'ok' && (!br.columns || br.columns.length === 0)" class="p-4 text-xs text-green-700 bg-green-50">
+                                    ✅ Consulta ejecutada — <span x-text="br.rows + ' filas afectadas'"></span> · <span x-text="br.duration"></span>
+                                </div>
+                                <table x-show="br.status === 'ok' && br.columns && br.columns.length > 0" class="table-auto w-full text-xs">
+                                    <thead class="sticky top-0 bg-gray-50 z-10">
+                                        <tr>
+                                            <th class="py-2 px-3 border-b text-left font-semibold text-gray-500 w-10">#</th>
+                                            <template x-for="col in br.columns" :key="col">
+                                                <th class="py-2 px-3 border-b text-left font-semibold text-gray-600 whitespace-nowrap" x-text="col"></th>
+                                            </template>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-gray-100">
+                                        <template x-for="(row, idx) in br.data" :key="idx">
+                                            <tr class="hover:bg-gray-50">
+                                                <td class="py-2 px-3 text-gray-400 select-none" x-text="idx+1"></td>
+                                                <template x-for="col in br.columns" :key="col">
+                                                    <td class="py-2 px-3 font-mono max-w-xs truncate" :title="nullStr(row[col])" x-text="nullStr(row[col])"></td>
+                                                </template>
+                                            </tr>
+                                        </template>
+                                    </tbody>
+                                </table>
+                                <div x-show="br.status === 'ok'" class="px-3 py-1.5 text-[10px] text-gray-400 border-t bg-gray-50">
+                                    <span x-text="(br.data || []).length + ' filas'"></span> ·
+                                    <span x-text="br.duration"></span>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+
+                    <!-- Single results table (modo normal) -->
+                    <table x-show="!batchMode && results.length > 0" class="table-auto w-full text-xs">
                         <thead class="sticky top-0 bg-gray-50 z-10">
                             <tr>
                                 <th class="py-2 px-3 border-b text-left font-semibold text-gray-500 w-10">#</th>
@@ -704,6 +772,9 @@ document.addEventListener('alpine:init', () => {
         results: [],
         history: [],
         activeTab: 'results',
+        batchMode: false,
+        batchResults: [],
+        batchActiveIdx: 0,
         statusMsg: '',
         statusOk: true,
         testMsg: '',
@@ -1374,6 +1445,10 @@ document.addEventListener('alpine:init', () => {
 
         async runQuery() {
             if (!this.selectedConxId || !this.sqlText.trim()) return;
+            if (this.batchMode) {
+                await this.runBatch();
+                return;
+            }
             this.loadingQuery = true;
             this.statusMsg = '';
             this.results = [];
@@ -1407,6 +1482,65 @@ document.addEventListener('alpine:init', () => {
             await this.loadHistory();
         },
 
+        // ── Batch mode ──────────────────────────────────────────────
+        extractSQLStatements(text) {
+            // Split by semicolons, trim whitespace, remove empty
+            return text
+                .split(';')
+                .map(s => s.trim())
+                .filter(s => s.length > 0 && !s.toUpperCase().startsWith('--') && !s.startsWith('#'));
+        },
+
+        uploadSQLFile(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const content = e.target.result;
+                this.sqlText = content;
+                this.batchMode = true;
+                this.showToast(`📁 Archivo "${file.name}" cargado (${(content.length / 1024).toFixed(1)} KB)`);
+            };
+            reader.readAsText(file);
+            // Reset input so re-selecting same file triggers change
+            event.target.value = '';
+        },
+
+        async runBatch() {
+            if (!this.selectedConxId) return;
+            const sqls = this.extractSQLStatements(this.sqlText);
+            if (sqls.length === 0) {
+                this.showToast('No se encontraron sentencias SQL válidas', 'error');
+                return;
+            }
+            this.loadingQuery = true;
+            this.statusMsg = '';
+            this.batchResults = [];
+            this.batchActiveIdx = 0;
+            this.activeTab = 'results';
+            try {
+                const formData = new FormData();
+                formData.append('conx_db_id', this.selectedConxId);
+                formData.append('database', this.selectedDb || '');
+                sqls.forEach((sql, i) => formData.append('sqls[]', sql));
+                const res = await axios.post('/app/query-runner/run-batch', formData, {
+                    headers: { 'Content-Type': 'multipart/form-data' }
+                });
+                this.batchResults = res.data.results || [];
+                const okCount = this.batchResults.filter(r => r.status === 'ok').length;
+                const errCount = this.batchResults.filter(r => r.status === 'error').length;
+                this.statusOk = errCount === 0;
+                this.statusMsg = `✓ ${okCount} consultas ejecutadas, ${errCount} con error — ${res.data.duration || ''}`;
+            } catch (e) {
+                this.statusOk = false;
+                this.statusMsg = '✗ ' + (e.response?.data?.error || 'Error al ejecutar batch');
+                if (e.response?.data?.results) {
+                    this.batchResults = e.response.data.results;
+                }
+            }
+            this.loadingQuery = false;
+        },
+
         async loadHistory() {
             if (!this.selectedConxId) return;
             try {

resources/views/roles.html

@@ -120,6 +120,7 @@
                                     Name = registro.name;
                                     Description = registro.description;
                                     Submodules = [...registro.submodules];
+                                    ConxDBs = [...(registro.conx_dbs || [])];
                                     EsPortalCliente = registro.es_portal_cliente || false;
                                     EsPortalPartner = registro.es_portal_partner || false;
                                     HomeUrl = registro.home_url || '';
@@ -254,6 +255,20 @@
                         </template>
                     </select>
                 </div>
+                <div class="mt-4 p-3 border rounded-md bg-slate-50">
+                    <p class="font-semibold text-sm mb-2">Bases de datos permitidas (Query Runner)</p>
+                    <div class="grid grid-cols-2 gap-1 max-h-32 overflow-y-auto">
+                        <template x-for="con in conexiones" :key="con.ID">
+                            <div>
+                                <input type="checkbox" :value="con.ID" :id="'edit-conxdb-' + con.ID"
+                                    :checked="ConxDBs.some(c => c.ID === con.ID)"
+                                    @change="if($event.target.checked) { ConxDBs.push(con) } else { ConxDBs = ConxDBs.filter(c => c.ID !== con.ID) }"
+                                    class="mr-2">
+                                <label :for="'edit-conxdb-' + con.ID" x-text="con.nombre" class="text-xs"></label>
+                            </div>
+                        </template>
+                    </div>
+                </div>
                 <div class="mt-4 flex justify-between">
                     <button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Cambios</button>
                     <button type="button" class="bg-gray-600 text-white px-4 py-2 rounded"
@@ -326,6 +341,20 @@
                         </template>
                     </select>
                 </div>
+                <div class="mt-4 p-3 border rounded-md bg-slate-50">
+                    <p class="font-semibold text-sm mb-2">Bases de datos permitidas (Query Runner)</p>
+                    <div class="grid grid-cols-2 gap-1 max-h-32 overflow-y-auto">
+                        <template x-for="con in conexiones" :key="con.ID">
+                            <div>
+                                <input type="checkbox" :value="con.ID" :id="'add-conxdb-' + con.ID"
+                                    :checked="newConxDBs.some(c => c.ID === con.ID)"
+                                    @change="if($event.target.checked) { newConxDBs.push(con) } else { newConxDBs = newConxDBs.filter(c => c.ID !== con.ID) }"
+                                    class="mr-2">
+                                <label :for="'add-conxdb-' + con.ID" x-text="con.nombre" class="text-xs"></label>
+                            </div>
+                        </template>
+                    </div>
+                </div>
                 <div class="mt-4 flex justify-between">
                     <button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar</button>
                     <button type="button" class="bg-gray-600 text-white px-4 py-2 rounded"
@@ -378,6 +407,9 @@
 
                 sinregistro: '',
                 modules: [],
+                conexiones: [],
+                ConxDBs: [],
+                newConxDBs: [],
 
 
 
@@ -405,10 +437,11 @@
                     fetch(`/app/loadroles?page=${page}${search}`)
                         .then(response => response.json())
                         .then(data => {
-                            this.totalRecords = data.total; // Establece el total de registros aquí
+                            this.totalRecords = data.total;
                             this.modulos = data.modules;
-                            this.registros = data.roles; // Asignar
-                            this.totalPages = data.totalPages; // Asignar total de páginas
+                            this.registros = data.roles;
+                            this.conexiones = data.conexiones || [];
+                            this.totalPages = data.totalPages;
                             this.createPagination(this.totalPages, page);
                             if (data.roles.length === 0) {
                                 this.sinregistro = true;
@@ -496,7 +529,8 @@
                         es_portal_cliente: this.newEsPortalCliente,
                         es_portal_partner: this.newEsPortalPartner,
                         home_url: this.newHomeUrl,
-                        submodules: selectedSubmodules.flatMap(modulo => modulo.submodules) 
+                        submodules: selectedSubmodules.flatMap(modulo => modulo.submodules),
+                        conx_dbs: this.newConxDBs
                     };
 
                     fetch('/app/roles', {
@@ -510,8 +544,9 @@
                             this.newDescription = '';
                             this.newEsPortalCliente = false;
                             this.newEsPortalPartner = false;
+                            this.newConxDBs = [];
                             this.modulos.forEach(modulo => {
-                                modulo.submodules.forEach(submodulo => submodulo.checked = false); // Reset checkboxes
+                                modulo.submodules.forEach(submodulo => submodulo.checked = false);
                             });
 
                             this.closeModal();
@@ -557,7 +592,8 @@
                             es_portal_cliente: this.EsPortalCliente,
                             es_portal_partner: this.EsPortalPartner,
                             home_url: this.HomeUrl,
-                            submodules: this.submodulos
+                            submodules: this.submodulos,
+                            conx_dbs: this.ConxDBs
                         })
                     })
                         .then(response => response.json())
@@ -567,6 +603,7 @@
                             this.EsPortalCliente = false;
                             this.EsPortalPartner = false;
                             this.submodulos = [];
+                            this.ConxDBs = [];
                             this.modulos.forEach(modulo => {
                                 modulo.submodules.forEach(submodulo => {
                                     submodulo.checked = false; 

resources/views/soporte_webhook.html

@@ -0,0 +1,189 @@
+<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>
+
+    <!-- ─── SMTP salida ──────────────────────────────────────────── -->
+    <div class="border-t border-slate-100 pt-4 mt-4">
+      <p class="text-sm font-semibold text-slate-700 mb-3">SMTP salida (notificaciones y auto-respuesta)</p>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="col-span-1">
+          <label class="block text-xs font-medium text-slate-600 mb-1">Host</label>
+          <input x-model="cfg.smtp_host" type="text" placeholder="smtp.example.com"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+        <div class="col-span-1">
+          <label class="block text-xs font-medium text-slate-600 mb-1">Puerto</label>
+          <input x-model="cfg.smtp_port" type="number" placeholder="587"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3 mt-2">
+        <div>
+          <label class="block text-xs font-medium text-slate-600 mb-1">Usuario</label>
+          <input x-model="cfg.smtp_username" type="text" placeholder="correo@example.com"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+        <div>
+          <label class="block text-xs font-medium text-slate-600 mb-1">Contraseña</label>
+          <input x-model="cfg.smtp_password" type="password" placeholder="••••••••"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3 mt-2">
+        <div>
+          <label class="block text-xs font-medium text-slate-600 mb-1">Email remitente</label>
+          <input x-model="cfg.smtp_from_addr" type="text" placeholder="soporte@u-s.app"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+        <div>
+          <label class="block text-xs font-medium text-slate-600 mb-1">Nombre remitente</label>
+          <input x-model="cfg.smtp_from_name" type="text" placeholder="Soporte U-site"
+            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+        </div>
+      </div>
+
+      <div class="mt-2">
+        <label class="block text-xs font-medium text-slate-600 mb-1">Encriptación</label>
+        <select x-model="cfg.smtp_encryption" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
+          <option value="tls">TLS (puerto 465)</option>
+          <option value="starttls">STARTTLS (puerto 587)</option>
+          <option value="none">Sin encriptación</option>
+        </select>
+      </div>
+
+      <p class="text-xs text-slate-400 mt-2">Si se deja vacío, se usará la configuración SMTP general del sistema.</p>
+    </div>
+
+    <div class="pt-4">
+      <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: '',
+      smtp_host: '',
+      smtp_port: 587,
+      smtp_username: '',
+      smtp_password: '',
+      smtp_encryption: 'starttls',
+      smtp_from_addr: '',
+      smtp_from_name: '',
+    },
+    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,
+        smtp_host: this.cfg.smtp_host || '',
+        smtp_port: parseInt(this.cfg.smtp_port) || 587,
+        smtp_username: this.cfg.smtp_username || '',
+        smtp_password: this.cfg.smtp_password || '',
+        smtp_encryption: this.cfg.smtp_encryption || 'starttls',
+        smtp_from_addr: this.cfg.smtp_from_addr || '',
+        smtp_from_name: this.cfg.smtp_from_name || '',
+      };
+      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>

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;