mejoras UI 4

frontend/src/components/DispositivoCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="card">
+    <div class="row">
+      <b>{{ device.nombre || device.mac }}</b>
+      <span class="chip">{{ device.mac }}</span>
+      <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 v-if="!simple" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
+    </div>
+    <div v-if="expanded && users && users.length" style="margin-top:8px;">
+      <div class="grid">
+        <UserCard v-for="u in users" :key="u.username" :item="u" :devicesById="devicesById" :expandable="false" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import UserCard from './UserCard.vue';
+
+const props = defineProps({
+  device: { type: Object, required: true },
+  users: { type: Array, default: () => [] },
+  devicesById: { type: Object, default: () => ({}) },
+  simple: { type: Boolean, default: false },
+  connected: { type: Boolean, default: false },
+  expanded: { type: Boolean, default: false }
+});
+const connectedCount = computed(() => {
+  if (!props.users || !props.users.length) return props.connected ? 1 : 0;
+  const id = props.device.id;
+  return props.users.filter(u => Array.isArray(u.dispositivos_conectados) && u.dispositivos_conectados.includes(id)).length;
+});
+</script>