ADR-013 Phase 3: migrate all detail pages to PluginAssetPanels; drop WarrantyPanel

Rolls the generic renderer into the remaining four detail pages (PCDetail,
PrinterDetail, NetworkDeviceDetail, MeasuringToolDetail), replacing the
hand-composed <WarrantyPanel> with <PluginAssetPanels>. The warranty hero badge
(useWarrantyBadge) stays on the pages that show it; MeasuringToolDetail dropped
its now-unused warranty composable usage.

WarrantyPanel.vue is deleted - warranty now renders entirely from its
get_asset_panels JSON declaration through the generic renderer. Verified live on
a PC with a warranty: the card is identical to the old bespoke panel (vendor
title, Expiring Soon status badge with color, servicelevel/ends/tag meta, manage
link) with no warranty-specific frontend code. Build clean, 58 vitest, naming green.

frontend/src/components/WarrantyPanel.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="section-card" v-if="warranties.length || showEmpty">
-    <h3 class="section-title">Warranty</h3>
-
-    <div v-if="warranties.length" class="warranty-list">
-      <div v-for="w in warranties" :key="w.warrantyid" class="warranty-item">
-        <div class="warranty-top">
-          <span class="warranty-vendor">{{ w.vendor }}</span>
-          <span class="status-badge" :style="colorStyle(w.statuscolor)">{{ statusLabel(w.status) }}</span>
-        </div>
-        <div class="warranty-meta">
-          <span v-if="w.servicelevel">{{ w.servicelevel }}</span>
-          <span v-if="w.enddate">Ends {{ formatDate(w.enddate) }}</span>
-          <span v-if="w.servicetag" class="mono">Tag {{ w.servicetag }}</span>
-        </div>
-      </div>
-      <router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add / manage</router-link>
-    </div>
-
-    <div v-else class="warranty-empty">
-      <span class="muted">No warranty on record.</span>
-      <router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add one</router-link>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted } from 'vue'
-import { colorStyle } from '@/utils/colorStyle'
-import { warrantyApi } from '../api'
-
-const props = defineProps({
-  assetid: { type: [Number, String], default: null },
-  // When true, render the card even with no warranties (shows an "Add one" link).
-  showEmpty: { type: Boolean, default: false },
-  // Optional pre-fetched warranties. When provided, the panel uses them instead
-  // of fetching (lets a parent share one fetch with e.g. a hero badge).
-  items: { type: Array, default: null },
-})
-
-const warranties = ref([])
-
-function statusLabel(status) {
-  return { active: 'Active', expiring: 'Expiring Soon', expired: 'Expired', unknown: 'Unknown' }[status] || status
-}
-
-function formatDate(d) {
-  if (!d) return '-'
-  return new Date(d + 'T00:00:00').toLocaleDateString()
-}
-
-async function load() {
-  // Parent-supplied data wins - skip the fetch.
-  if (props.items !== null) { warranties.value = props.items; return }
-  if (!props.assetid) { warranties.value = []; return }
-  try {
-    const response = await warrantyApi.forAsset(props.assetid)
-    warranties.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading warranties:', err)
-    warranties.value = []
-  }
-}
-
-onMounted(load)
-watch(() => props.assetid, load)
-watch(() => props.items, load)
-</script>
-
-<style scoped>
-.warranty-list { display: flex; flex-direction: column; gap: 0.75rem; }
-.warranty-item { padding: 0.6rem 0.75rem; background: var(--bg); border-radius: 6px; }
-.warranty-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
-.warranty-vendor { font-weight: 600; color: var(--text); }
-.status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
-.warranty-meta { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--text-light); }
-.warranty-empty { display: flex; align-items: center; gap: 0.6rem; }
-.warranty-manage { font-size: 0.82rem; }
-.mono { font-family: monospace; }
-.muted { color: var(--text-light); }
-</style>

frontend/src/views/measuringtools/MeasuringToolDetail.vue

@@ -137,7 +137,7 @@
           <CustomFieldsSection :assetid="tool.assetid" />
 
           <!-- Warranty -->
-          <WarrantyPanel :assetid="tool.assetid" :items="warranties" />
+          <PluginAssetPanels :assetid="tool.assetid" />
 
           <!-- All relationships (partof, connectedto, ...) -->
           <AssetRelationships v-if="tool.assetid" :assetid="tool.assetid" />
@@ -169,9 +169,8 @@ import { useRoute } from 'vue-router'
 import { colorStyle } from '@/utils/colorStyle'
 import { measuringtoolsApi } from '../../api'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
-import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import PluginAssetPanels from '../../components/PluginAssetPanels.vue'
 import AssetRelationships from '../../components/AssetRelationships.vue'
-import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const route = useRoute()
@@ -180,7 +179,6 @@ const { isEnabled } = useIdentifierFlags()
 
 const loading = ref(true)
 const tool = ref(null)
-const { warranties } = useWarrantyBadge(() => tool.value?.assetid)
 
 const STATUS_LABELS = { overdue: 'Overdue', duesoon: 'Due Soon', current: 'Current', unknown: 'Unknown' }
 function statusLabel(status) { return STATUS_LABELS[status] || 'Unknown' }

frontend/src/views/network/NetworkDeviceDetail.vue

@@ -149,7 +149,7 @@
         <CustomFieldsSection :assetid="device.assetid" />
 
         <!-- Warranty -->
-        <WarrantyPanel :assetid="device.assetid" :items="warranties" />
+        <PluginAssetPanels :assetid="device.assetid" />
 
         <!-- Relationships -->
         <AssetRelationships
@@ -204,7 +204,7 @@ 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 PluginAssetPanels from '../../components/PluginAssetPanels.vue'
 import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 import { useToast } from '../../composables/toast'
@@ -218,7 +218,7 @@ const authStore = useAuthStore()
 
 const deviceId = route.params.id
 const device = ref(null)
-const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => device.value?.assetid)
+const { heroWarranty, warrantyDate } = useWarrantyBadge(() => device.value?.assetid)
 const loading = ref(true)
 
 onMounted(async () => {

frontend/src/views/pcs/PCDetail.vue

@@ -210,7 +210,7 @@
           <CustomFieldsSection :assetid="computer.assetid" />
 
           <!-- Warranty -->
-          <WarrantyPanel :assetid="computer.assetid" :items="warranties" />
+          <PluginAssetPanels :assetid="computer.assetid" />
 
           <!-- All relationships (controls, defaultprinter, ...) -->
           <AssetRelationships v-if="computer.assetid" :assetid="computer.assetid" />
@@ -244,7 +244,7 @@ import { computersApi, applicationsApi } from '../../api'
 import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
-import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import PluginAssetPanels from '../../components/PluginAssetPanels.vue'
 import AssetRelationships from '../../components/AssetRelationships.vue'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
@@ -256,7 +256,7 @@ const computer = ref(null)
 const installedApps = ref([])
 
 // Warranty fetch + hero badge (shared across asset detail pages).
-const { warranties, heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
+const { heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
 
 // relationships render via the shared AssetRelationships card
 

frontend/src/views/printers/PrinterDetail.vue

@@ -176,7 +176,7 @@
           <CustomFieldsSection :assetid="printer.assetid" />
 
           <!-- Warranty -->
-          <WarrantyPanel :assetid="printer.assetid" :items="warranties" />
+          <PluginAssetPanels :assetid="printer.assetid" />
 
           <!-- All relationships (defaultprinter, connectedto, ...) -->
           <AssetRelationships v-if="printer.assetid" :assetid="printer.assetid" />
@@ -282,7 +282,7 @@ import { useRoute } from 'vue-router'
 import { printersApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
-import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import PluginAssetPanels from '../../components/PluginAssetPanels.vue'
 import AssetRelationships from '../../components/AssetRelationships.vue'
 import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
@@ -292,7 +292,7 @@ const { isEnabled } = useIdentifierFlags()
 
 const loading = ref(true)
 const printer = ref(null)
-const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => printer.value?.assetid)
+const { heroWarranty, warrantyDate } = useWarrantyBadge(() => printer.value?.assetid)
 const supplies = ref([])
 const drivers = ref([])