up

2026-05-16 21:27:30 -05:00
parent fcc3ff7ca7
commit 4fa506c7d6
11 changed files with 586 additions and 13 deletions
@@ -60,6 +60,9 @@
              <span x-show="!u.telegram_chat_id" class="text-slate-300">—</span>
            </td>
            <td class="px-4 py-3 flex gap-2">
+              <button @click="openDetail(u)" class="btn-icon text-blue-500" title="Ver detalle">
+                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+              </button>
              <button @click="openEdit(u)" class="btn-icon text-yellow-500" title="Editar">
                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
              </button>
@@ -147,6 +150,116 @@
    </div>
  </div>

+  <!-- Panel detalle usuario (slide derecho) -->
+  <div x-show="showDetail" x-cloak class="fixed inset-0 z-50 flex justify-end">
+    <div class="absolute inset-0 bg-black/40" @click="showDetail=false"></div>
+    <div class="relative w-full max-w-md bg-white shadow-2xl flex flex-col overflow-hidden"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="translate-x-full opacity-0"
+         x-transition:enter-end="translate-x-0 opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="translate-x-0 opacity-100"
+         x-transition:leave-end="translate-x-full opacity-0">
+
+      <!-- Header -->
+      <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 flex-shrink-0">
+        <h2 class="text-base font-bold text-slate-800">Detalle del usuario</h2>
+        <button @click="showDetail=false" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+      </div>
+
+      <!-- Loading -->
+      <div x-show="loadingDetail" class="flex-1 flex items-center justify-center">
+        <p class="text-slate-400 text-sm">Cargando…</p>
+      </div>
+
+      <!-- Contenido -->
+      <div x-show="detailUser && !loadingDetail" class="flex-1 overflow-y-auto px-5 py-5 space-y-4">
+
+        <!-- Avatar + nombre -->
+        <div class="flex items-center gap-3 pb-4 border-b border-slate-100">
+          <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-[#8eb02f] font-bold text-xl flex-shrink-0"
+               x-text="detailUser?.nombre?.charAt(0)?.toUpperCase()"></div>
+          <div>
+            <p class="font-semibold text-slate-800 text-base" x-text="detailUser?.nombre"></p>
+            <p class="text-sm text-slate-500" x-text="detailUser?.email"></p>
+          </div>
+        </div>
+
+        <!-- Badges -->
+        <div class="flex items-center gap-2 flex-wrap">
+          <span class="badge" :class="detailUser?.rol==='partner' ? 'badge-blue' : 'badge-green'" x-text="detailUser?.rol"></span>
+          <span class="badge" :class="detailUser?.activo ? 'badge-green' : 'badge-slate'" x-text="detailUser?.activo ? 'Activo' : 'Inactivo'"></span>
+          <span x-show="detailUser?.role" class="badge badge-slate" x-text="detailUser?.role?.display_name || detailUser?.role?.name"></span>
+        </div>
+
+        <!-- Campos -->
+        <div class="grid grid-cols-2 gap-3">
+          <div x-show="detailUser?.telefono || detailUser?.indicativo" class="col-span-2">
+            <p class="label">Teléfono</p>
+            <p class="text-sm text-slate-700" x-text="(detailUser?.indicativo || '') + ' ' + (detailUser?.telefono || '')"></p>
+          </div>
+          <div x-show="detailUser?.pais">
+            <p class="label">País</p>
+            <p class="text-sm text-slate-700" x-text="detailUser?.pais"></p>
+          </div>
+          <div x-show="detailUser?.empresa">
+            <p class="label">Empresa</p>
+            <p class="text-sm text-slate-700" x-text="detailUser?.empresa"></p>
+          </div>
+          <div x-show="detailUser?.documento" class="col-span-2">
+            <p class="label">NIT / Documento</p>
+            <p class="text-sm text-slate-700 font-mono" x-text="detailUser?.documento"></p>
+          </div>
+          <div x-show="detailUser?.telegram_chat_id" class="col-span-2">
+            <p class="label">Telegram Chat ID</p>
+            <p class="text-sm text-slate-700 font-mono" x-text="detailUser?.telegram_chat_id"></p>
+          </div>
+          <div x-show="detailUser?.notas" class="col-span-2">
+            <p class="label">Notas</p>
+            <p class="text-sm text-slate-500 whitespace-pre-wrap" x-text="detailUser?.notas"></p>
+          </div>
+        </div>
+
+        <!-- Documento RUT (archivo) -->
+        <div x-show="detailUser?.documento_rut_file" class="pt-3 border-t border-slate-100">
+          <p class="label">Documento RUT / Cámara de comercio</p>
+          <div class="flex items-center gap-2 mt-1">
+            <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 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>
+            <span class="text-sm text-slate-600 truncate" x-text="detailUser?.documento_rut_nombre || 'Archivo RUT'"></span>
+            <a :href="`/app/portal-usuarios/${detailUser?.ID}/rut-file`" target="_blank"
+               class="text-[#8eb02f] text-xs font-semibold hover:underline flex-shrink-0">Descargar</a>
+          </div>
+        </div>
+
+        <!-- Accesos partner -->
+        <div x-show="detailUser?.rol==='partner'" class="pt-3 border-t border-slate-100">
+          <p class="label">Accesos de cliente</p>
+          <div class="flex flex-wrap gap-1 mt-1">
+            <template x-for="acc in (detailUser?.portal_accesos || [])" :key="acc.ID">
+              <span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-xs"
+                    x-text="acc.cliente?.empresa || acc.cliente?.nombre || acc.cliente_id"></span>
+            </template>
+            <span x-show="!(detailUser?.portal_accesos?.length)" class="text-slate-400 text-xs">Sin accesos asignados</span>
+          </div>
+        </div>
+
+        <!-- Fecha de registro -->
+        <div class="pt-3 border-t border-slate-100 text-xs text-slate-400">
+          Registrado: <span x-text="detailUser?.CreatedAt ? new Date(detailUser.CreatedAt).toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}) : '—'"></span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div x-show="detailUser && !loadingDetail" class="flex-shrink-0 px-5 py-4 border-t border-slate-200 bg-slate-50 flex gap-2">
+        <button @click="openEdit(detailUser); showDetail=false;" class="btn-secondary flex-1">Editar</button>
+        <button @click="showDetail=false" class="btn-primary flex-1">Cerrar</button>
+      </div>
+
+    </div>
+  </div>
+
 </div>

 <script>
@@ -154,6 +267,7 @@ function portalUsuariosApp() {
  return {
    items: [], clientes: [], loading: false, saving: false,
    showModal: false, showDelete: false, showAccesoModal: false,
+    showDetail: false, detailUser: null, loadingDetail: false,
    editId: null, deleteId: null, error: '',
    accesoUserId: null, accesoClienteId: '',
    form: { nombre:'', email:'', password:'', rol:'cliente', cliente_id:'', activo:true, notas:'', telegram_chat_id:'' },
@@ -169,6 +283,20 @@ function portalUsuariosApp() {
      } finally { this.loading = false; }
    },

+    async openDetail(u) {
+      this.detailUser = null;
+      this.loadingDetail = true;
+      this.showDetail = true;
+      try {
+        const r = await axios.get(`/app/loadportalusuarios/${u.ID}`);
+        this.detailUser = r.data;
+      } catch(e) {
+        this.showDetail = false;
+      } finally {
+        this.loadingDetail = false;
+      }
+    },
+
    openCreate() {
      this.editId=null; this.error='';
      this.form={nombre:'',email:'',password:'',rol:'cliente',cliente_id:'',activo:true,notas:'',telegram_chat_id:''};