UI/UX mejorados 5

frontend/src/App.vue

@@ -67,13 +67,14 @@
             <UserCard v-for="u in filteredUsers" :key="u.username" :item="u" :devicesById="devicesById"
               :expanded="!!userExpanded[u.username]"
               @toggle-expand="userExpanded[u.username] = !userExpanded[u.username]"
-              @toggleDisable="toggleDisable" @remove="removeUser" @edit="openEditUser" />
+              @toggleDisable="toggleDisable" @remove="removeUser" @edit="openEditUser"
+              @disconnect="disconnectUser" @edit-device="openDeviceForm" />
           </div>
           <div v-else class="grid">
             <DispositivoCard v-for="d in devices" :key="d.id" :device="d" :users="usersForDevice(d.id)" :devicesById="devicesById"
               :expanded="!!deviceExpanded[d.id]"
               @toggle-expand="deviceExpanded[d.id] = !deviceExpanded[d.id]"
-              @edit="openDeviceForm" />
+              @edit="openDeviceForm" @disconnect="disconnectDevice" />
           </div>
         </template>
       </div>
@@ -206,6 +207,20 @@ async function selfTest() {
   await fetch('/test/radius', { method: 'POST' });
 }
 
+async function disconnectUser(u) {
+  try {
+    await fetch(`/api/users/${encodeURIComponent(u.username)}/disconnect`, { method: 'POST' });
+    await Promise.all([fetchUsers(), fetchDevices()]);
+  } catch {}
+}
+
+async function disconnectDevice(d) {
+  try {
+    await fetch(`/api/devices/${encodeURIComponent(d.id)}/disconnect`, { method: 'POST' });
+    await Promise.all([fetchUsers(), fetchDevices()]);
+  } catch {}
+}
+
 function setupSse() {
   const ev = new EventSource('/api/events');
   let refreshTimer = null;