Add custom fields + warranty plugin, rework settings into two-pane shell

Feature work from the 2026-07 session:

Settings IA
- Replace the flat 27-card settings hub with a persistent two-pane shell
  (SettingsLayout.vue): grouped, searchable left rail + content pane.
- Nest all settings/* routes under the shell via router post-processing;
  shared nav catalog in settingsNav.js. Group by asset class (PCs, Printers,
  Equipment, Network) so per-type settings stop scattering.

Custom fields (core)
- customfields + customfieldvalues tables (migration 7d14), CRUD API at
  /api/customfields, per-asset value get/save.
- Settings management page + reusable CustomFieldsSection (detail) and
  CustomFieldsInputs (form) wired into all four asset types.

Warranty (new plugin)
- plugins/warranty: warranties + warrantyassets (migration 7d15), derived
  coverage status, provider abstraction (manual now; Dell/Lenovo/HP stubs).
- API CRUD + per-asset panel + report buckets; WarrantyPanel on all four
  detail pages; Warranties management page; Warranty report + Reports card.
- Seed warranty.* permissions.

Printer drivers
- printerdrivers table (migration 7d13) linked to printer models; drivers now
  surface on the matching printer's detail page.

Other
- PCDetail rebalanced (Network + Status + Warranty + custom fields on the right).
- Rename PCs list "Features" column to "Remote Access"; fix badge hover underline.
- Drop equipment islocationonly field.
- Centralize asset-type label/route maps into utils/assetTypes.js.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/views/network/NetworkDeviceDetail.vue

@@ -18,7 +18,7 @@
           </router-link>
         </div>
         <div class="hero-meta">
-          <span class="badge" :class="getStatusClass(device.statusname)">
+          <span class="badge" :style="colorStyle(device.statuscolor)">
             {{ device.statusname || 'Unknown' }}
           </span>
           <span v-if="device.networkdevice?.networkdevicetypename" class="meta-item">
@@ -87,6 +87,12 @@
           </div>
         </div>
 
+        <!-- Custom Fields -->
+        <CustomFieldsSection :assetid="device.assetid" />
+
+        <!-- Warranty -->
+        <WarrantyPanel :assetid="device.assetid" />
+
         <!-- Notes -->
         <div class="section-card" v-if="device.notes">
           <h3 class="section-title">Notes</h3>
@@ -130,7 +136,7 @@
             <div class="info-row">
               <span class="info-label">Status</span>
               <span class="info-value">
-                <span class="badge" :class="getStatusClass(device.statusname)">
+                <span class="badge" :style="colorStyle(device.statuscolor)">
                   {{ device.statusname || 'Unknown' }}
                 </span>
               </span>
@@ -184,11 +190,14 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { colorStyle } from "@/utils/colorStyle"
 import { useRoute, useRouter } from 'vue-router'
 import { Network, Router, Shield, Wifi, Camera, Server, Server as Rack, Globe } from 'lucide-vue-next'
 import { useAuthStore } from '../../stores/auth'
 import { networkApi } from '../../api'
 import AssetRelationships from '../../components/AssetRelationships.vue'
+import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
+import WarrantyPanel from '../../components/WarrantyPanel.vue'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const { isEnabled } = useIdentifierFlags()

frontend/src/views/network/NetworkDeviceForm.vue

@@ -226,6 +226,11 @@
           </div>
         </fieldset>
 
+        <!-- Site-defined custom fields for network devices -->
+        <fieldset>
+          <CustomFieldsInputs ref="customFieldsRef" :assettypeid="NETWORK_ASSETTYPEID" :assetid="currentAssetId" />
+        </fieldset>
+
         <!-- Form Actions -->
         <div class="form-actions">
           <button type="button" class="btn btn-secondary" @click="cancel">Cancel</button>
@@ -250,6 +255,7 @@ import {
   assetsApi,
   businessunitsApi
 } from '../../api'
+import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const { isEnabled } = useIdentifierFlags()
@@ -260,6 +266,11 @@ const router = useRouter()
 const deviceId = route.params.id
 const isEdit = computed(() => !!deviceId)
 
+// Seeded asset-type id for network devices (see /api/assets/types).
+const NETWORK_ASSETTYPEID = 3
+const customFieldsRef = ref(null)
+const currentAssetId = ref(null)
+
 const form = ref({
   assetnumber: '',
   name: '',
@@ -353,6 +364,7 @@ async function loadDevice() {
   try {
     const response = await networkApi.get(deviceId)
     const data = response.data.data
+    currentAssetId.value = data.assetid || null
 
     // Populate form with existing data
     form.value.assetnumber = data.assetnumber || ''
@@ -411,14 +423,26 @@ async function submitForm() {
       notes: form.value.notes || null
     }
 
+    let assetId = currentAssetId.value
+    let redirectId = deviceId
     if (isEdit.value) {
-      await networkApi.update(deviceId, payload)
-      router.push(`/network/${deviceId}`)
+      const response = await networkApi.update(deviceId, payload)
+      assetId = assetId || response.data?.data?.assetid
     } else {
       const response = await networkApi.create(payload)
-      const newId = response.data.data?.networkdevice?.networkdeviceid
-      router.push(newId ? `/network/${newId}` : '/network')
+      assetId = response.data.data?.assetid
+      redirectId = response.data.data?.networkdevice?.networkdeviceid
     }
+
+    if (assetId && customFieldsRef.value) {
+      try {
+        await customFieldsRef.value.save(assetId)
+      } catch (cfErr) {
+        console.error('Error saving custom fields:', cfErr)
+      }
+    }
+
+    router.push(redirectId ? `/network/${redirectId}` : '/network')
   } catch (err) {
     console.error('Error saving device:', err)
     error.value = err.response?.data?.message || 'Failed to save device'

frontend/src/views/network/NetworkDevicesList.vue

@@ -79,7 +79,7 @@
                   <span v-if="!device.networkdevice?.ispoe && !device.networkdevice?.ismanaged && !device.networkdevice?.portcount">-</span>
                 </td>
                 <td>
-                  <span class="badge" :class="getStatusClass(device.statusname)">
+                  <span class="badge" :style="colorStyle(device.statuscolor)">
                     {{ device.statusname || 'Unknown' }}
                   </span>
                 </td>
@@ -117,6 +117,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { colorStyle } from "@/utils/colorStyle"
 import { networkApi, vendorsApi, locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'