From f3753f2e04d76ef424d74baf7e04e43a43e46667 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 24 Nov 2025 18:23:40 -0600
Subject: [PATCH] Feature: Mostrar usuarios en DispositivoCard sin expandir

- Agregar preview de usuarios que utilizan el dispositivo
- Usuarios conectados en badge rosa, desconectados en gris
- Mostrar contador total de usuarios
---
 frontend/src/components/DispositivoCard.vue | 34 +++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/frontend/src/components/DispositivoCard.vue b/frontend/src/components/DispositivoCard.vue
index 76da7b1..21a18b5 100644
--- a/frontend/src/components/DispositivoCard.vue
+++ b/frontend/src/components/DispositivoCard.vue
@@ -19,6 +19,17 @@ const connectedCount = computed(() => {
   const id = props.device.id;
   return props.users.filter(u => Array.isArray(u.dispositivos_conectados) && u.dispositivos_conectados.includes(id)).length;
 });
+
+// Usuarios conectados vs no conectados para mostrar en preview
+const connectedUsers = computed(() => {
+  const id = props.device.id;
+  return props.users.filter(u => Array.isArray(u.dispositivos_conectados) && u.dispositivos_conectados.includes(id));
+});
+
+const disconnectedUsers = computed(() => {
+  const id = props.device.id;
+  return props.users.filter(u => !Array.isArray(u.dispositivos_conectados) || !u.dispositivos_conectados.includes(id));
+});
 </script>
 
 <template>
@@ -43,6 +54,29 @@ const connectedCount = computed(() => {
       <div v-if="device.descripcion">Descripción: {{ device.descripcion }}</div>
     </div>
 
+    <!-- Preview de usuarios (siempre visible) -->
+    <div v-if="users && users.length && !simple" class="mt-2.5 pt-2.5 border-t border-border">
+      <div class="text-xs text-muted mb-1.5">Usuarios ({{ users.length }})</div>
+      <div class="flex flex-wrap gap-1.5">
+        <Badge
+          v-for="u in connectedUsers"
+          :key="u.username"
+          variant="pink"
+          class="text-[11px] py-0.5"
+        >
+          {{ u.username }}
+        </Badge>
+        <Badge
+          v-for="u in disconnectedUsers"
+          :key="u.username"
+          variant="secondary"
+          class="text-[11px] py-0.5"
+        >
+          {{ u.username }}
+        </Badge>
+      </div>
+    </div>
+
     <div v-if="expanded && users && users.length" class="mt-2">
       <div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-2.5">
         <UserCard