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;

frontend/src/components/DispositivoCard.vue

@@ -7,6 +7,7 @@
       <span v-if="connectedCount>0 || connected" class="chip" style="background: rgba(255,127,187,.2); border-color: rgba(255,127,187,.5);">Conectado</span>
       <span class="spacer"></span>
       <button class="icon-btn" @click="$emit('edit', device)">Editar</button>
+      <button class="icon-btn" @click="$emit('disconnect', device)">Desconectar</button>
       <button v-if="!simple" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
     </div>
     <div class="muted" style="font-size:12px; margin-top:6px;" v-if="device.nombre || device.descripcion">

frontend/src/components/UserCard.vue

@@ -4,15 +4,17 @@
       <b>{{ item.username }}</b>
       <span class="chip">VLAN {{ item.vlan }}</span>
       <span class="chip" :style="item.disabled ? 'color:#b33' : ''">{{ item.disabled ? 'deshabilitado' : 'activo' }}</span>
+      <span v-if="hasConnected" class="chip" style="background: rgba(255,127,187,.2); border-color: rgba(255,127,187,.5);">Conectado</span>
       <span class="spacer"></span>
       <button class="icon-btn" @click="$emit('edit', item)">Editar</button>
+      <button class="icon-btn" @click="$emit('disconnect', item)">Desconectar</button>
       <button class="icon-btn" @click="$emit('toggleDisable', item)">{{ item.disabled ? 'Habilitar' : 'Deshabilitar' }}</button>
       <button class="icon-btn" @click="$emit('remove', item)">Eliminar</button>
       <button v-if="expandable" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
     </div>
     <div v-if="expanded && deviceList.length" style="margin-top:8px;">
       <div class="grid">
-        <DispositivoCard v-for="d in deviceList" :key="d.id" :device="d" :connected="isConnected(d.id)" simple />
+        <DispositivoCard v-for="d in deviceList" :key="d.id" :device="d" :connected="isConnected(d.id)" simple @edit="$emit('editDevice', d)" />
       </div>
     </div>
   </div>
@@ -37,4 +39,6 @@ const deviceList = computed(() => {
 function isConnected(id) {
   return Array.isArray(props.item.dispositivos_conectados) && props.item.dispositivos_conectados.includes(id);
 }
+
+const hasConnected = computed(() => Array.isArray(props.item.dispositivos_conectados) && props.item.dispositivos_conectados.length > 0);
 </script>

frontend/src/styles.css

@@ -86,7 +86,9 @@ a { color: inherit; }
 .menu button:hover { transform: none; background: rgba(255,255,255,0.06); }
 
 /* Layout */
-.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; }
+.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; grid-template-areas: "sidebar main"; gap: 12px; padding: 12px; }
+.shell > aside { grid-area: sidebar; }
+.shell > main { grid-area: main; }
 <<<<<<< HEAD
 .panel { 
   border: 1px solid #ffcfe4; /* light más claro */
@@ -111,9 +113,18 @@ a { color: inherit; }
 
 /* Responsive */
 @media (max-width: 980px) {
-  .shell { grid-template-columns: 1fr; }
+  .shell { grid-template-columns: 1fr; grid-template-areas: 
+    "main"
+    "sidebar"; }
 }
 
+/* When a panel is collapsed, hide its scroll and shrink its grid track to show only header */
+.panel.collapsed .scroll { display: none; }
+
+/* Using :has to adapt the grid columns when a side is collapsed (modern browsers) */
+.shell:has(> aside.collapsed) { grid-template-columns: 52px 1fr; }
+.shell:has(> main.collapsed)  { grid-template-columns: 1fr 52px; }
+
 /* Collapse helpers: keep headers visible when collapsed */
 .panel.collapsed .scroll { display: none; }