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/machines/MachineDetail.vue

@@ -129,14 +129,6 @@
                   </span>
                 </span>
               </div>
-              <div class="info-row">
-                <span class="info-label">Location Only</span>
-                <span class="info-value">
-                  <span class="feature-tag" :class="{ active: equipment.equipment?.islocationonly }">
-                    {{ equipment.equipment?.islocationonly ? 'Yes' : 'No' }}
-                  </span>
-                </span>
-              </div>
             </div>
           </div>
 
@@ -211,6 +203,12 @@
             </div>
           </div>
 
+          <!-- Custom Fields -->
+          <CustomFieldsSection :assetid="equipment.assetid" />
+
+          <!-- Warranty -->
+          <WarrantyPanel :assetid="equipment.assetid" />
+
           <!-- Notes -->
           <div class="section-card" v-if="equipment.notes">
             <h3 class="section-title">Notes</h3>
@@ -237,6 +235,8 @@ import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { equipmentApi, assetsApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
+import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
+import WarrantyPanel from '../../components/WarrantyPanel.vue'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const route = useRoute()

frontend/src/views/machines/MachineForm.vue

@@ -271,15 +271,7 @@
               <input type="checkbox" v-model="form.requiresmanualconfig" />
               Requires Manual Config
             </label>
-            <small class="form-help">Multi-PC machine needs manual configuration</small>
-          </div>
-
-          <div class="form-group checkbox-group">
-            <label>
-              <input type="checkbox" v-model="form.islocationonly" />
-              Location Only
-            </label>
-            <small class="form-help">Virtual location marker (not actual equipment)</small>
+            <small class="form-help">Machine a tech must configure by hand (e.g. driven by multiple PCs)</small>
           </div>
         </div>
 
@@ -336,6 +328,9 @@
           ></textarea>
         </div>
 
+        <!-- Site-defined custom fields for equipment -->
+        <CustomFieldsInputs ref="customFieldsRef" :assettypeid="EQUIPMENT_ASSETTYPEID" :assetid="currentAssetId" />
+
         <div v-if="error" class="error-message">{{ error }}</div>
 
         <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
@@ -355,6 +350,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { equipmentApi, vendorsApi, locationsApi, modelsApi, businessunitsApi, computersApi, assetsApi } from '../../api'
 import ShopFloorMap from '../../components/ShopFloorMap.vue'
 import Modal from '../../components/Modal.vue'
+import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { currentTheme } from '../../stores/theme'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
@@ -365,6 +361,11 @@ const router = useRouter()
 
 const isEdit = computed(() => !!route.params.id)
 
+// Seeded asset-type id for equipment (see /api/assets/types).
+const EQUIPMENT_ASSETTYPEID = 1
+const customFieldsRef = ref(null)
+const currentAssetId = ref(null)
+
 const loading = ref(true)
 const saving = ref(false)
 const error = ref('')
@@ -481,6 +482,7 @@ onMounted(async () => {
     if (isEdit.value) {
       const response = await equipmentApi.get(route.params.id)
       const data = response.data.data
+      currentAssetId.value = data.assetid || null
       currentEquipment.value = data
 
       form.value = {
@@ -592,6 +594,15 @@ async function saveEquipment() {
     // Handle relationship (controlling PC)
     await saveRelationship(assetId)
 
+    // Persist custom-field values against the asset id.
+    if (assetId && customFieldsRef.value) {
+      try {
+        await customFieldsRef.value.save(assetId)
+      } catch (cfErr) {
+        console.error('Error saving custom fields:', cfErr)
+      }
+    }
+
     router.push(`/machines/${savedEquipment.equipment?.equipmentid || route.params.id}`)
   } catch (err) {
     console.error('Error saving equipment:', err)

frontend/src/views/machines/MachinesList.vue

@@ -42,7 +42,7 @@
                 <td>{{ item.equipment?.equipmenttypename || '-' }}</td>
                 <td>{{ item.equipment?.vendorname || '-' }}</td>
                 <td>
-                  <span class="badge" :class="getStatusClass(item.statusname)">
+                  <span class="badge" :style="colorStyle(item.statuscolor)">
                     {{ item.statusname || 'Unknown' }}
                   </span>
                 </td>
@@ -81,6 +81,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { colorStyle } from "@/utils/colorStyle"
 import { equipmentApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 
@@ -134,15 +135,6 @@ function changePerPage(newPerPage) {
   page.value = 1
   loadEquipment()
 }
-
-function getStatusClass(status) {
-  if (!status) return 'badge-info'
-  const s = status.toLowerCase()
-  if (s === 'in use' || s === 'active') return 'badge-success'
-  if (s === 'in repair') return 'badge-warning'
-  if (s === 'retired') return 'badge-danger'
-  return 'badge-info'
-}
 </script>
 
 <style scoped>