Network devices: filter models by vendor, and style the hero like every other page

Three fixes, all of them a page not doing what its siblings already do.

MODELS WERE NOT FILTERED BY VENDOR. PCForm, MachineForm and PrinterForm each
narrow the model list once a vendor is chosen; NetworkDeviceForm bound the whole
catalogue, so picking Palo Alto still offered every Dell and Zebra model. Same
computed as the others, including the same rule that no vendor selected shows
everything - an empty dropdown reads as "no models exist" when it means "pick a
vendor first". Audited the rest: this was the only gap. The other views holding
a modelnumberid have no vendor picker to filter against, and settings ModelsList
is where a model's vendor is ASSIGNED, where filtering would be circular.

THE HERO RAN THE LABEL INTO THE VALUE - "Asset #FW-OAV..." as one string. The
page used detail-item / label / value, which match nothing in the stylesheet, so
the two spans got no layout at all. Every other detail page uses hero-detail /
hero-detail-label / hero-detail-value, which stacks a small uppercase label above
the value. Renamed to those; no CSS added, because the styles already existed and
this page simply was not using them. It was the last page using the unstyled
names.

MACHINES LIST LINKED BY THE WRONG ID on its fallback path. `/machines/:id` keys
on machineid, the plugin extension id, and the row click and View button fell
back to `item.assetid` - which lands on whichever machine happens to carry that
number: a wrong page that looks right, which is worse than a 404. That defect has
been fixed twice before in other views (AssetRelationships, then the GE-Enforce
reports table) and BackupHistory carries a comment warning about it; this was the
fourth copy. The list endpoint always sets item.machine, so the fallback could
not actually fire here - it is removed as a latent trap rather than a live bug,
and with no machineid the cell now shows plain text rather than a link that
misleads.

plugins/machines/frontend/views/MachinesList.vue

@@ -36,7 +36,9 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="item in machines" :key="item.assetid" class="clickable-row" @click="$router.push(`/machines/${item.machine?.machineid || item.assetid}`)">
+              <tr v-for="item in machines" :key="item.assetid"
+                  :class="{ 'clickable-row': item.machine?.machineid }"
+                  @click="item.machine?.machineid && $router.push(`/machines/${item.machine.machineid}`)">
                 <td>
                   {{ item.assetnumber }}<template v-if="item.dualpathpartner"> / {{ item.dualpathpartner.assetnumber }}</template>
                 </td>
@@ -58,12 +60,20 @@
                 </td>
                 <td>{{ item.locationname || '-' }}</td>
                 <td class="actions" @click.stop>
+                  <!-- /machines/:id keys on machineid, the plugin extension id, NOT
+                       the assetid. Falling back to the assetid lands on whichever
+                       machine happens to carry that number: a wrong page that looks
+                       right, which is worse than a 404 (see the same fix in
+                       EnforcementReports and the warning in BackupHistory). With no
+                       machineid there is no page to link to, so show nothing. -->
                   <router-link
-                    :to="`/machines/${item.machine?.machineid || item.assetid}`"
+                    v-if="item.machine?.machineid"
+                    :to="`/machines/${item.machine.machineid}`"
                     class="btn btn-secondary btn-sm"
                   >
                     View
                   </router-link>
+                  <span v-else>-</span>
                 </td>
               </tr>
               <tr v-if="machines.length === 0">

plugins/network/frontend/views/NetworkDeviceDetail.vue

@@ -33,22 +33,26 @@
             {{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
           </span>
         </div>
+        <!-- hero-detail / -label / -value are the styled classes every other
+             detail page uses. This page had its own detail-item / label / value
+             names, which match nothing in the stylesheet, so the label and the
+             value rendered as one run-together string. -->
         <div class="hero-details">
-          <div class="detail-item" v-if="device.assetnumber">
+          <div class="hero-detail" v-if="device.assetnumber">
-            <span class="label">Asset #</span>
+            <span class="hero-detail-label">Asset #</span>
-            <span class="value">{{ device.assetnumber }}</span>
+            <span class="hero-detail-value">{{ device.assetnumber }}</span>
           </div>
-          <div class="detail-item" v-if="device.serialnumber">
+          <div class="hero-detail" v-if="device.serialnumber">
-            <span class="label">Serial</span>
+            <span class="hero-detail-label">Serial</span>
-            <span class="value mono">{{ device.serialnumber }}</span>
+            <span class="hero-detail-value mono">{{ device.serialnumber }}</span>
           </div>
-          <div class="detail-item" v-if="device.locationname">
+          <div class="hero-detail" v-if="device.locationname">
-            <span class="label">Location</span>
+            <span class="hero-detail-label">Location</span>
-            <span class="value">{{ device.locationname }}</span>
+            <span class="hero-detail-value">{{ device.locationname }}</span>
           </div>
-          <div class="detail-item" v-if="device.businessunitname">
+          <div class="hero-detail" v-if="device.businessunitname">
-            <span class="label">Business Unit</span>
+            <span class="hero-detail-label">Business Unit</span>
-            <span class="value">{{ device.businessunitname }}</span>
+            <span class="hero-detail-value">{{ device.businessunitname }}</span>
           </div>
         </div>
         <div class="hero-features" v-if="device.networkdevice">

plugins/network/frontend/views/NetworkDeviceForm.vue

@@ -161,7 +161,7 @@
               <label for="modelnumberid">Model</label>
               <select id="modelnumberid" v-model="form.modelnumberid" class="form-control">
                 <option value="">Select Model</option>
-                <option v-for="m in models" :key="m.modelnumberid" :value="m.modelnumberid">
+                <option v-for="m in filteredModels" :key="m.modelnumberid" :value="m.modelnumberid">
                   {{ m.modelnumber }}
                 </option>
               </select>
@@ -395,6 +395,15 @@ const generatedAssetNumber = computed(() => {
 })
 const vendors = ref([])
 const models = ref([])
+
+// Models belong to a vendor, so picking one narrows the list - the same
+// behaviour PCForm, MachineForm and PrinterForm have. With no vendor chosen the
+// whole catalogue shows, rather than an empty dropdown that reads as "no models
+// exist" when it means "pick a vendor first".
+const filteredModels = computed(() => {
+  if (!form.value.vendorid) return models.value
+  return models.value.filter(m => m.vendorid === form.value.vendorid)
+})
 const locations = ref([])
 const statuses = ref([])
 const businessUnits = ref([])