From ab4e3252b11fc55e0e0612ef4e4b41b6d19b5763 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:50:53 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20fidelizar=20websms=5Fconfig=20con=20el?=
 =?UTF-8?q?=20dise=C3=B1o=20del=20resto=20del=20proyecto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Agrega bloque <style> con btn-primary, input-field, label, badge-* que
faltaban. Badge de status ahora muestra "Enviado"/"Error" en vez del
código numérico. Botones de copiar en la sección de webhooks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/websms_config.html | 44 ++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/resources/views/websms_config.html b/resources/views/websms_config.html
index d62f24e..70773b9 100644
--- a/resources/views/websms_config.html
+++ b/resources/views/websms_config.html
@@ -69,17 +69,33 @@
     <div class="space-y-3">
       <div>
         <label class="label">Confirmaciones de entrega (ACK)</label>
-        <code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/delivery</code>
+        <div class="flex items-center gap-2">
+          <code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/delivery</code>
+          <button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/delivery')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
+            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+          </button>
+        </div>
       </div>
       <div>
         <label class="label">Clics en shortlinks</label>
-        <code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/click</code>
+        <div class="flex items-center gap-2">
+          <code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/click</code>
+          <button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/click')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
+            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+          </button>
+        </div>
       </div>
       <div>
         <label class="label">Mensajes entrantes</label>
-        <code class="block text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/incoming</code>
+        <div class="flex items-center gap-2">
+          <code class="flex-1 text-xs bg-slate-50 p-2 rounded border border-slate-200 text-slate-700 break-all">https://admin.u-site.app/webhooks/websms/incoming</code>
+          <button type="button" @click="copy('https://admin.u-site.app/webhooks/websms/incoming')" class="btn-icon text-slate-400 hover:text-slate-600 flex-shrink-0" title="Copiar">
+            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+          </button>
+        </div>
       </div>
     </div>
+    <p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
   </div>
 
   <!-- Logs -->
@@ -103,7 +119,7 @@
               <td class="px-3 py-2 text-slate-700" x-text="l.para"></td>
               <td class="px-3 py-2 text-slate-600 max-w-xs truncate" x-text="l.mensaje"></td>
               <td class="px-3 py-2">
-                <span class="badge" :class="l.status==='0'?'badge-green':'badge-red'" x-text="l.status"></span>
+                <span class="badge" :class="l.status==='0'?'badge-green':'badge-red'" x-text="l.status==='0'?'Enviado':'Error'"></span>
               </td>
               <td class="px-3 py-2 text-xs font-mono text-slate-500" x-text="l.msg_id||'-'"></td>
             </tr>
@@ -125,7 +141,7 @@ function websmsApp() {
     showToken:false,
     logs:[],
     testPara:'', testMsg:'', testResult:'', testOk:false,
-    saving:false, error:'',
+    saving:false, error:'', copied:'',
 
     async init(){
       await this.loadConfig();
@@ -166,6 +182,24 @@ function websmsApp() {
     },
 
     formatDate(d){ if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'}); },
+    copy(text){ navigator.clipboard.writeText(text); this.copied='URL copiada'; setTimeout(()=>this.copied='', 2000); },
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.text-primary { color:#8eb02f; }
+</style>