edicion de metadata dispositivos, UI/UX

frontend/src/App.vue

@@ -72,7 +72,8 @@
           <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]" />
+              @toggle-expand="deviceExpanded[d.id] = !deviceExpanded[d.id]"
+              @edit="openDeviceForm" />
           </div>
         </template>
       </div>
@@ -117,6 +118,10 @@
   <Modal :open="showVlan" title="Crear VLAN" @close="closeVlan">
     <VlanForm @success="onVlanCreated" @cancel="closeVlan" />
   </Modal>
+
+  <Modal :open="showDevice" title="Editar dispositivo" @close="closeDevice">
+    <DeviceForm :model="deviceFormModel" @success="onDeviceSaved" @cancel="closeDevice" />
+  </Modal>
 </template>
 
 <script setup>
@@ -128,6 +133,7 @@ import Modal from './components/Modal.vue';
 import UserForm from './components/UserForm.vue';
 import RawDbViewer from './components/RawDbViewer.vue';
 import VlanForm from './components/VlanForm.vue';
+import DeviceForm from './components/DeviceForm.vue';
 
 const users = ref([]);
 const requests = ref([]);
@@ -316,6 +322,11 @@ const showVlan = ref(false);
 function openVlanForm() { showSettingsMenu.value = false; showVlan.value = true; }
 function closeVlan() { showVlan.value = false; }
 function onVlanCreated() { showVlan.value = false; }
+const showDevice = ref(false);
+const deviceFormModel = ref({});
+function openDeviceForm(d) { deviceFormModel.value = d; showDevice.value = true; }
+function closeDevice() { showDevice.value = false; }
+async function onDeviceSaved() { showDevice.value = false; await fetchDevices(); }
 function openSettings() { showSettingsMenu.value = !showSettingsMenu.value; }
 function openEditUser(u) {
   userFormMode.value = 'edit';