Warranty polish: hero badges everywhere, search/pagination, re-check, shared apiError

- Shared utils/apiError.js reads the correct nested error message (with
  fallbacks); swept 37 views/components off the shallow path so real backend
  messages (e.g. in-use 409s) surface instead of generic "Failed".
- useWarrantyBadge composable: warranty hero status/end-date badge now on PC,
  equipment, printer, and network detail heroes (one shared fetch feeds the
  badge + the WarrantyPanel).
- Warranties list: client-side search (vendor/level/tag/asset) + pagination;
  truncate long service levels so they stop blowing out the table width.
- "Re-check all" button + POST /warranty/sync/dell?all=true to re-pull dated
  Dell warranties, not just missing ones.
- Deprecate the standalone pxe-images/warranty_sync.py in favor of the plugin.

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

frontend/src/api/index.js

@@ -970,8 +970,8 @@ export const warrantyApi = {
   refresh(id) {
     return api.post(`/warranty/${id}/refresh`)
   },
-  syncDell() {
+  syncDell(all = false) {
-    return api.post('/warranty/sync/dell')
+    return api.post('/warranty/sync/dell', null, { params: all ? { all: 'true' } : {} })
   },
   report() {
     return api.get('/warranty/report')

frontend/src/components/AssetRelationships.vue

@@ -178,6 +178,7 @@ import { assetsApi, relationshipTypesApi } from '../api'
 import { colorStyle } from '@/utils/colorStyle'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/toast'
+import { apiError } from '../utils/apiError'
 const toast = useToast()
 
 const props = defineProps({
@@ -351,7 +352,7 @@ async function saveRelationship() {
     emit('updated')
   } catch (error) {
     console.error('Failed to create relationship:', error)
-    toast.error('Failed to create relationship: ' + (error.response?.data?.message || error.message))
+    toast.error(apiError(error, 'Failed to create relationship'))
   }
 }
 

frontend/src/composables/warrantyBadge.js

@@ -0,0 +1,44 @@
+// Shared warranty fetch + hero-badge derivation for asset detail pages.
+// Pass a getter for the asset id; get back the warranties list (to feed a
+// WarrantyPanel) and a heroWarranty for a compact status badge.
+import { ref, computed, watch } from 'vue'
+import { warrantyApi } from '../api'
+
+const STATUS_RANK = { expired: 0, expiring: 1, active: 2, unknown: 3 }
+const STATUS_LABELS = {
+  active: 'Under Warranty',
+  expiring: 'Warranty Expiring',
+  expired: 'Warranty Expired',
+  unknown: 'Warranty',
+}
+
+export function useWarrantyBadge(getAssetId) {
+  const warranties = ref([])
+
+  // Worst-case warranty drives the badge: expired > expiring > active > unknown.
+  const heroWarranty = computed(() => {
+    if (!warranties.value.length) return null
+    const worst = [...warranties.value]
+      .sort((a, b) => (STATUS_RANK[a.status] ?? 9) - (STATUS_RANK[b.status] ?? 9))[0]
+    return { ...worst, label: STATUS_LABELS[worst.status] || 'Warranty' }
+  })
+
+  function warrantyDate(d) {
+    return d ? new Date(d + 'T00:00:00').toLocaleDateString() : ''
+  }
+
+  async function load() {
+    const assetid = getAssetId()
+    if (!assetid) { warranties.value = []; return }
+    try {
+      const response = await warrantyApi.forAsset(assetid)
+      warranties.value = response.data.data || []
+    } catch (err) {
+      warranties.value = []
+    }
+  }
+
+  watch(getAssetId, load, { immediate: true })
+
+  return { warranties, heroWarranty, warrantyDate, reloadWarranties: load }
+}

frontend/src/utils/apiError.js

@@ -0,0 +1,9 @@
+// Extract a human-readable message from an API error. The backend nests the
+// message at data.data.error.message (see error_response); older call sites read
+// shallower paths, so try them all before falling back.
+export function apiError(err, fallback = 'Something went wrong') {
+  return err?.response?.data?.data?.error?.message
+    || err?.response?.data?.error?.message
+    || err?.response?.data?.message
+    || fallback
+}

frontend/src/views/applications/ApplicationForm.vue

@@ -155,6 +155,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { applicationsApi } from '../../api'
+import { apiError } from '../../utils/apiError'
 
 const route = useRoute()
 const router = useRouter()
@@ -248,7 +249,7 @@ async function saveApplication() {
     router.push('/applications')
   } catch (err) {
     console.error('Error saving application:', err)
-    error.value = err.response?.data?.message || 'Failed to save application'
+    error.value = apiError(err, 'Failed to save application')
   } finally {
     saving.value = false
   }

frontend/src/views/knowledgebase/KnowledgeBaseForm.vue

@@ -83,6 +83,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { knowledgebaseApi, applicationsApi } from '../../api'
+import { apiError } from '../../utils/apiError'
 
 const route = useRoute()
 const router = useRouter()
@@ -149,7 +150,7 @@ async function saveArticle() {
     router.push('/knowledgebase')
   } catch (err) {
     console.error('Error saving article:', err)
-    error.value = err.response?.data?.message || 'Failed to save article'
+    error.value = apiError(err, 'Failed to save article')
   } finally {
     saving.value = false
   }

frontend/src/views/machines/MachineDetail.vue

@@ -30,6 +30,10 @@
             <span class="badge badge-lg" :class="getStatusClass(equipment.statusname)">
               {{ equipment.statusname || 'Unknown' }}
             </span>
+            <span v-if="heroWarranty" class="badge badge-lg" :style="{ background: heroWarranty.statuscolor, color: '#fff' }"
+                  :title="heroWarranty.enddate ? `Warranty ends ${warrantyDate(heroWarranty.enddate)}` : 'Warranty'">
+              {{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
+            </span>
           </div>
           <div class="hero-details">
             <div class="hero-detail" v-if="equipment.equipment?.equipmenttypename">
@@ -207,7 +211,7 @@
           <CustomFieldsSection :assetid="equipment.assetid" />
 
           <!-- Warranty -->
-          <WarrantyPanel :assetid="equipment.assetid" />
+          <WarrantyPanel :assetid="equipment.assetid" :items="warranties" />
 
           <!-- Notes -->
           <div class="section-card" v-if="equipment.notes">
@@ -237,6 +241,7 @@ import { equipmentApi, assetsApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
 import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const route = useRoute()
@@ -244,6 +249,7 @@ const { isEnabled } = useIdentifierFlags()
 
 const loading = ref(true)
 const equipment = ref(null)
+const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => equipment.value?.assetid)
 const relationships = ref({ incoming: [], outgoing: [] })
 
 const controllingPc = computed(() => {

frontend/src/views/machines/MachineForm.vue

@@ -353,6 +353,7 @@ import Modal from '../../components/Modal.vue'
 import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { currentTheme } from '../../stores/theme'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
@@ -606,7 +607,7 @@ async function saveEquipment() {
     router.push(`/machines/${savedEquipment.equipment?.equipmentid || route.params.id}`)
   } catch (err) {
     console.error('Error saving equipment:', err)
-    error.value = err.response?.data?.message || 'Failed to save equipment'
+    error.value = apiError(err, 'Failed to save equipment')
   } finally {
     saving.value = false
   }

frontend/src/views/network/NetworkDeviceDetail.vue

@@ -27,6 +27,10 @@
           <span v-if="device.networkdevice?.vendorname" class="meta-item">
             {{ device.networkdevice.vendorname }}
           </span>
+          <span v-if="heroWarranty" class="badge" :style="{ background: heroWarranty.statuscolor, color: '#fff' }"
+                :title="heroWarranty.enddate ? `Warranty ends ${warrantyDate(heroWarranty.enddate)}` : 'Warranty'">
+            {{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
+          </span>
         </div>
         <div class="hero-details">
           <div class="detail-item" v-if="device.assetnumber">
@@ -91,7 +95,7 @@
         <CustomFieldsSection :assetid="device.assetid" />
 
         <!-- Warranty -->
-        <WarrantyPanel :assetid="device.assetid" />
+        <WarrantyPanel :assetid="device.assetid" :items="warranties" />
 
         <!-- Notes -->
         <div class="section-card" v-if="device.notes">
@@ -198,6 +202,7 @@ import { networkApi } from '../../api'
 import AssetRelationships from '../../components/AssetRelationships.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
 import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 import { useToast } from '../../composables/toast'
 const toast = useToast()
@@ -210,6 +215,7 @@ const authStore = useAuthStore()
 
 const deviceId = route.params.id
 const device = ref(null)
+const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => device.value?.assetid)
 const loading = ref(true)
 
 onMounted(async () => {

frontend/src/views/network/NetworkDeviceForm.vue

@@ -257,6 +257,7 @@ import {
 } from '../../api'
 import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
@@ -445,7 +446,7 @@ async function submitForm() {
     router.push(redirectId ? `/network/${redirectId}` : '/network')
   } catch (err) {
     console.error('Error saving device:', err)
-    error.value = err.response?.data?.message || 'Failed to save device'
+    error.value = apiError(err, 'Failed to save device')
   } finally {
     saving.value = false
   }

frontend/src/views/notifications/NotificationForm.vue

@@ -242,6 +242,7 @@
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { notificationsApi, applicationsApi, businessUnitsApi, employeesApi } from '@/api'
+import { apiError } from '../../utils/apiError'
 
 const route = useRoute()
 const router = useRouter()
@@ -499,7 +500,7 @@ async function saveNotification() {
     router.push('/notifications')
   } catch (err) {
     console.error('Error saving notification:', err)
-    error.value = err.response?.data?.message || 'Failed to save notification'
+    error.value = apiError(err, 'Failed to save notification')
   } finally {
     saving.value = false
   }

frontend/src/views/notifications/NotificationTypesList.vue

@@ -139,6 +139,7 @@
 import { ref, onMounted } from 'vue'
 import { notificationsApi } from '@/api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
+import { apiError } from '../../utils/apiError'
 
 const types = ref([])
 const loading = ref(true)
@@ -238,7 +239,7 @@ async function save() {
     editing.value = false
     await load()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Save failed.'
+    error.value = apiError(err, 'Save failed.')
   } finally {
     saving.value = false
   }

frontend/src/views/pcs/PCDetail.vue

@@ -254,7 +254,8 @@
 import { ref, onMounted, computed } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { useRoute } from 'vue-router'
-import { computersApi, applicationsApi, assetsApi, warrantyApi } from '../../api'
+import { computersApi, applicationsApi, assetsApi } 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'
@@ -267,21 +268,9 @@ const loading = ref(true)
 const computer = ref(null)
 const relationships = ref({ incoming: [], outgoing: [] })
 const installedApps = ref([])
-const warranties = ref([])
 
-// Worst-case warranty for the hero badge: expired > expiring > active > unknown.
+// Warranty fetch + hero badge (shared across asset detail pages).
-const heroWarranty = computed(() => {
+const { warranties, heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
-  if (!warranties.value.length) return null
-  const rank = { expired: 0, expiring: 1, active: 2, unknown: 3 }
-  const worst = [...warranties.value].sort((a, b) => (rank[a.status] ?? 9) - (rank[b.status] ?? 9))[0]
-  const labels = { active: 'Under Warranty', expiring: 'Warranty Expiring', expired: 'Warranty Expired', unknown: 'Warranty' }
-  return { ...worst, label: labels[worst.status] || 'Warranty' }
-})
-
-function formatWarrantyDate(d) {
-  if (!d) return ''
-  return new Date(d + 'T00:00:00').toLocaleDateString()
-}
 
 const controlledEquipment = computed(() => {
   // For computers, find related equipment in any "Controls" relationship
@@ -334,16 +323,7 @@ onMounted(async () => {
     } catch (appError) {
       console.log('No installed apps data:', appError.message)
     }
-
+    // Warranties load via useWarrantyBadge (watches computer.assetid).
-    // Load warranties (one fetch; feeds both the hero badge and the panel)
-    if (computer.value?.assetid) {
-      try {
-        const warrantyResponse = await warrantyApi.forAsset(computer.value.assetid)
-        warranties.value = warrantyResponse.data.data || []
-      } catch (warrantyError) {
-        console.log('No warranty data:', warrantyError.message)
-      }
-    }
   } catch (error) {
     console.error('Error loading computer:', error)
   } finally {

frontend/src/views/pcs/PCForm.vue

@@ -310,6 +310,7 @@ import Modal from '../../components/Modal.vue'
 import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { currentTheme } from '../../stores/theme'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
@@ -539,7 +540,7 @@ async function savePC() {
     router.push('/pcs')
   } catch (err) {
     console.error('Error saving PC:', err)
-    error.value = err.response?.data?.message || 'Failed to save PC'
+    error.value = apiError(err, 'Failed to save PC')
   } finally {
     saving.value = false
   }

frontend/src/views/printers/PrinterDetail.vue

@@ -25,6 +25,10 @@
             <span v-if="printer.printer?.iscsf" class="badge badge-lg badge-info">CSF</span>
             <span v-if="printer.printer?.iscolor" class="badge badge-lg badge-success">Color</span>
             <span v-if="printer.printer?.isnetwork" class="badge badge-lg badge-secondary">Network</span>
+            <span v-if="heroWarranty" class="badge badge-lg" :style="{ background: heroWarranty.statuscolor, color: '#fff' }"
+                  :title="heroWarranty.enddate ? `Warranty ends ${warrantyDate(heroWarranty.enddate)}` : 'Warranty'">
+              {{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
+            </span>
           </div>
           <div class="hero-details">
             <div class="hero-detail" v-if="printer.printer?.vendorname">
@@ -121,7 +125,7 @@
           <CustomFieldsSection :assetid="printer.assetid" />
 
           <!-- Warranty -->
-          <WarrantyPanel :assetid="printer.assetid" />
+          <WarrantyPanel :assetid="printer.assetid" :items="warranties" />
 
           <!-- Notes -->
           <div class="section-card" v-if="printer.notes">
@@ -263,6 +267,7 @@ import { printersApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
 import WarrantyPanel from '../../components/WarrantyPanel.vue'
+import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
 
 const route = useRoute()
@@ -270,6 +275,7 @@ const { isEnabled } = useIdentifierFlags()
 
 const loading = ref(true)
 const printer = ref(null)
+const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => printer.value?.assetid)
 const supplies = ref([])
 const drivers = ref([])
 

frontend/src/views/printers/PrinterForm.vue

@@ -298,6 +298,7 @@ import Modal from '../../components/Modal.vue'
 import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
 import { currentTheme } from '../../stores/theme'
 import { useIdentifierFlags } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
@@ -596,7 +597,7 @@ async function savePrinter() {
     router.push('/printers')
   } catch (err) {
     console.error('Error saving printer:', err)
-    error.value = err.response?.data?.message || 'Failed to save printer'
+    error.value = apiError(err, 'Failed to save printer')
   } finally {
     saving.value = false
   }

frontend/src/views/reports/WarrantyReport.vue

@@ -33,7 +33,7 @@
             <tbody>
               <tr v-for="w in buckets[b.key]" :key="w.warrantyid">
                 <td><strong>{{ w.vendor }}</strong></td>
-                <td>{{ w.servicelevel || '-' }}</td>
+                <td class="servicelevel-cell" :title="w.servicelevel">{{ w.servicelevel || '-' }}</td>
                 <td>{{ w.enddate ? formatDate(w.enddate) : '-' }}</td>
                 <td>
                   <router-link v-for="a in w.assets" :key="a.assetid" :to="assetLink(a)" class="asset-chip">{{ a.assetnumber }}</router-link>
@@ -100,4 +100,5 @@ onMounted(async () => {
   background: var(--bg); border-radius: 12px; font-size: 0.8rem; text-decoration: none; color: var(--text);
 }
 .muted { color: var(--text-light); }
+.servicelevel-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 </style>

frontend/src/views/settings/AccessProtocolsList.vue

@@ -92,6 +92,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { computersApi } from '@/api'
+import { apiError } from '../../utils/apiError'
 
 const protocols = ref([])
 const loading = ref(true)
@@ -151,7 +152,7 @@ async function save() {
     editing.value = false
     await load()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Save failed.'
+    error.value = apiError(err, 'Save failed.')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/AssetTypesList.vue

@@ -68,6 +68,7 @@ import { ref, onMounted } from 'vue'
 import { assetsApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
+import { apiError } from '../../utils/apiError'
 
 const items = ref([])
 const loading = ref(true)
@@ -106,7 +107,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/BusinessUnitsList.vue

@@ -102,6 +102,7 @@ import { ref, onMounted } from 'vue'
 import { businessunitsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -168,7 +169,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/CustomFieldsList.vue

@@ -115,6 +115,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { assetsApi, customFieldsApi } from '../../api'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const assetTypes = ref([])
@@ -196,7 +197,7 @@ async function save() {
     closeModal()
     loadFields()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -208,7 +209,7 @@ async function deleteField(f) {
     await customFieldsApi.remove(f.fieldid)
     loadFields()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/DashboardDefaultsList.vue

@@ -105,6 +105,7 @@
 import { ref, onMounted } from 'vue'
 import { dashboardDefaultsApi, businessUnitsApi } from '../../api'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -168,7 +169,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/EquipmentTypesList.vue

@@ -77,6 +77,7 @@ import { equipmentApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -138,7 +139,7 @@ async function deleteType(t) {
     await equipmentApi.types.remove(t.equipmenttypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/LocationTypesList.vue

@@ -77,6 +77,7 @@ import { locationsApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -138,7 +139,7 @@ async function deleteType(t) {
     await locationsApi.types.remove(t.locationtypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/LocationsList.vue

@@ -212,6 +212,7 @@ import { ref, computed, onMounted } from 'vue'
 import { locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const locations = ref([])
@@ -354,7 +355,7 @@ async function saveLocation() {
     loadLocations()
   } catch (err) {
     console.error('Error saving location:', err)
-    error.value = err.response?.data?.message || 'Failed to save location'
+    error.value = apiError(err, 'Failed to save location')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/MachineTypesList.vue

@@ -146,6 +146,7 @@ import { ref, onMounted } from 'vue'
 import { machinetypesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const machineTypes = ref([])
@@ -239,7 +240,7 @@ async function saveType() {
     loadTypes()
   } catch (err) {
     console.error('Error saving machine type:', err)
-    error.value = err.response?.data?.message || 'Failed to save machine type'
+    error.value = apiError(err, 'Failed to save machine type')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/ModelSuppliesList.vue

@@ -147,6 +147,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { printersApi } from '@/api'
+import { apiError } from '../../utils/apiError'
 
 const models = ref([])
 const loadingModels = ref(true)
@@ -246,7 +247,7 @@ async function save() {
     await selectModel(selectedModel.value)
     await loadModels()
   } catch (err) {
-    formError.value = err.response?.data?.error?.message || 'Save failed.'
+    formError.value = apiError(err, 'Save failed.')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/ModelsList.vue

@@ -184,6 +184,7 @@ import { ref, onMounted } from 'vue'
 import { modelsApi, vendorsApi, machinetypesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const models = ref([])
@@ -328,7 +329,7 @@ async function saveModel() {
     loadModels()
   } catch (err) {
     console.error('Error saving model:', err)
-    error.value = err.response?.data?.message || 'Failed to save model'
+    error.value = apiError(err, 'Failed to save model')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/NetworkTypesList.vue

@@ -77,6 +77,7 @@ import { networkApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -138,7 +139,7 @@ async function deleteType(t) {
     await networkApi.types.remove(t.networkdevicetypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/OperatingSystemsList.vue

@@ -120,6 +120,7 @@ import { ref, onMounted } from 'vue'
 import { operatingsystemsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -193,7 +194,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/PCTypesList.vue

@@ -87,6 +87,7 @@ import { computersApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const pcTypes = ref([])
@@ -132,7 +133,7 @@ async function deleteType(pt) {
     await computersApi.types.remove(pt.computertypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 
@@ -148,7 +149,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/PrinterDriversList.vue

@@ -98,6 +98,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { printersApi } from '../../api'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -161,7 +162,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -173,7 +174,7 @@ async function deleteDriver(d) {
     await printersApi.drivers.delete(d.driverid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/PrinterTypesList.vue

@@ -77,6 +77,7 @@ import { printersApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -138,7 +139,7 @@ async function deleteType(t) {
     await printersApi.types.remove(t.printertypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/RelationshipTypesList.vue

@@ -77,6 +77,7 @@ import { relationshipTypesApi } from '../../api'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { colorStyle } from '@/utils/colorStyle'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
     closeModal()
     loadData()
   } catch (err) {
-    error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
+    error.value = apiError(err, 'Failed to save')
   } finally {
     saving.value = false
   }
@@ -138,7 +139,7 @@ async function deleteType(t) {
     await relationshipTypesApi.remove(t.relationshiptypeid)
     loadData()
   } catch (err) {
-    toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
+    toast.error(apiError(err, 'Failed to delete'))
   }
 }
 </script>

frontend/src/views/settings/SiteSettings.vue

@@ -31,6 +31,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { settingsApi } from '@/api'
+import { apiError } from '../../utils/apiError'
 
 const items = ref([])
 const loading = ref(true)
@@ -71,7 +72,7 @@ async function save() {
     }
     saved.value = true
   } catch (err) {
-    error.value = err.response?.data?.error?.message || 'Save failed.'
+    error.value = apiError(err, 'Save failed.')
   } finally {
     saving.value = false
   }

frontend/src/views/settings/StatusesList.vue

@@ -140,6 +140,7 @@ import { assetsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const statuses = ref([])
@@ -233,7 +234,7 @@ async function saveStatus() {
     loadStatuses()
   } catch (err) {
     console.error('Error saving status:', err)
-    error.value = err.response?.data?.message || 'Failed to save status'
+    error.value = apiError(err, 'Failed to save status')
   } finally {
     saving.value = false
   }
@@ -252,7 +253,7 @@ async function deleteStatus() {
     loadStatuses()
   } catch (err) {
     console.error('Error deleting status:', err)
-    error.value = err.response?.data?.message || 'Failed to delete status'
+    error.value = apiError(err, 'Failed to delete status')
     toast.error(error.value)
   }
 }

frontend/src/views/settings/SubnetsList.vue

@@ -286,6 +286,7 @@ import { useRoute } from 'vue-router'
 import { networkApi, locationsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const route = useRoute()
@@ -472,7 +473,7 @@ async function saveSubnet() {
     loadSubnets()
   } catch (err) {
     console.error('Error saving subnet:', err)
-    error.value = err.response?.data?.message || 'Failed to save subnet'
+    error.value = apiError(err, 'Failed to save subnet')
   } finally {
     saving.value = false
   }
@@ -491,7 +492,7 @@ async function deleteSubnet() {
     loadSubnets()
   } catch (err) {
     console.error('Error deleting subnet:', err)
-    toast.error(err.response?.data?.message || 'Failed to delete subnet')
+    toast.error(apiError(err, 'Failed to delete subnet'))
   }
 }
 </script>

frontend/src/views/settings/SystemSettings.vue

@@ -657,6 +657,7 @@ import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { settingsApi, computersApi } from '../../api'
 import { setIdentifierFlag } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
 
 // Section tabs - one section visible at a time to avoid a long scroll. The
 // search box filters tabs (and, while searching, shows every matching section).
@@ -900,7 +901,7 @@ async function changePcTypeMapping(pxetype, computertype) {
     success.value = 'Setting saved'
     setTimeout(() => { success.value = '' }, 2000)
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save setting'
+    error.value = apiError(e, 'Failed to save setting')
     console.error(e)
   } finally {
     saving.value = false
@@ -943,7 +944,7 @@ async function toggleIdentifier(name, assettype) {
     success.value = 'Setting saved'
     setTimeout(() => { success.value = '' }, 2000)
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save setting'
+    error.value = apiError(e, 'Failed to save setting')
     console.error(e)
   } finally {
     saving.value = false
@@ -977,7 +978,7 @@ async function toggleSearchDomain(domainKey) {
     success.value = 'Setting saved'
     setTimeout(() => { success.value = '' }, 2000)
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save setting'
+    error.value = apiError(e, 'Failed to save setting')
     console.error(e)
   } finally {
     saving.value = false
@@ -996,7 +997,7 @@ async function saveSetting(key, value) {
     success.value = 'Setting saved'
     setTimeout(() => { success.value = '' }, 2000)
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save setting'
+    error.value = apiError(e, 'Failed to save setting')
     console.error(e)
   } finally {
     saving.value = false
@@ -1013,7 +1014,7 @@ async function testEmail() {
     // await settingsApi.testEmail()
     success.value = 'Test email feature coming soon'
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to send test email'
+    error.value = apiError(e, 'Failed to send test email')
   } finally {
     testingEmail.value = false
     setTimeout(() => { success.value = '' }, 3000)

frontend/src/views/settings/UsersList.vue

@@ -288,6 +288,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { usersApi } from '../../api'
 import { useAuthStore } from '../../stores/auth'
+import { apiError } from '../../utils/apiError'
 
 const authStore = useAuthStore()
 const currentUserId = authStore.user?.userid
@@ -428,7 +429,7 @@ async function saveUser() {
     closeUserModal()
     await loadData()
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save user'
+    error.value = apiError(e, 'Failed to save user')
     setTimeout(() => error.value = '', 3000)
   } finally {
     saving.value = false
@@ -446,7 +447,7 @@ async function deleteUser() {
     deletingUser.value = null
     await loadData()
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to delete user'
+    error.value = apiError(e, 'Failed to delete user')
     setTimeout(() => error.value = '', 3000)
   } finally {
     saving.value = false
@@ -487,7 +488,7 @@ async function saveRole() {
     closeRoleModal()
     await loadData()
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save role'
+    error.value = apiError(e, 'Failed to save role')
     setTimeout(() => error.value = '', 3000)
   } finally {
     saving.value = false
@@ -505,7 +506,7 @@ async function deleteRole(role) {
     await usersApi.roles.delete(role.roleid)
     await loadData()
   } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to delete role'
+    error.value = apiError(e, 'Failed to delete role')
     setTimeout(() => error.value = '', 3000)
   }
 }

frontend/src/views/settings/VLANsList.vue

@@ -188,6 +188,7 @@ import { ref, onMounted } from 'vue'
 import { networkApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const vlans = ref([])
@@ -309,7 +310,7 @@ async function saveVLAN() {
     loadVLANs()
   } catch (err) {
     console.error('Error saving VLAN:', err)
-    error.value = err.response?.data?.message || 'Failed to save VLAN'
+    error.value = apiError(err, 'Failed to save VLAN')
   } finally {
     saving.value = false
   }
@@ -328,7 +329,7 @@ async function deleteVLAN() {
     loadVLANs()
   } catch (err) {
     console.error('Error deleting VLAN:', err)
-    toast.error(err.response?.data?.message || 'Failed to delete VLAN')
+    toast.error(apiError(err, 'Failed to delete VLAN'))
   }
 }
 </script>

frontend/src/views/usb/USBDetail.vue

@@ -169,6 +169,7 @@ import { useRoute } from 'vue-router'
 import { usbApi } from '../../api'
 import Modal from '../../components/Modal.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const route = useRoute()
@@ -219,7 +220,7 @@ async function doCheckout() {
     await loadDevice()
   } catch (error) {
     console.error('Checkout error:', error)
-    toast.error(error.response?.data?.message || 'Checkout failed')
+    toast.error(apiError(error, 'Checkout failed'))
   }
 }
 
@@ -230,7 +231,7 @@ async function doCheckin() {
     await loadDevice()
   } catch (error) {
     console.error('Checkin error:', error)
-    toast.error(error.response?.data?.message || 'Check in failed')
+    toast.error(apiError(error, 'Check in failed'))
   }
 }
 

frontend/src/views/usb/USBForm.vue

@@ -122,6 +122,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { usbApi, vendorsApi } from '@/api'
+import { apiError } from '../../utils/apiError'
 
 const route = useRoute()
 const router = useRouter()
@@ -202,7 +203,7 @@ async function saveDevice() {
     router.push('/usb')
   } catch (err) {
     console.error('Error saving device:', err)
-    error.value = err.response?.data?.message || 'Failed to save device'
+    error.value = apiError(err, 'Failed to save device')
   } finally {
     saving.value = false
   }

frontend/src/views/usb/USBList.vue

@@ -148,6 +148,7 @@ import Modal from '../../components/Modal.vue'
 import EmployeeSearch from '../../components/EmployeeSearch.vue'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const devices = ref([])
@@ -243,7 +244,7 @@ async function doCheckout() {
     loadDevices()
   } catch (error) {
     console.error('Checkout error:', error)
-    toast.error(error.response?.data?.message || 'Checkout failed')
+    toast.error(apiError(error, 'Checkout failed'))
   }
 }
 
@@ -254,7 +255,7 @@ async function doCheckin() {
     loadDevices()
   } catch (error) {
     console.error('Checkin error:', error)
-    toast.error(error.response?.data?.message || 'Check in failed')
+    toast.error(apiError(error, 'Check in failed'))
   }
 }
 

frontend/src/views/vendors/VendorsList.vue

@@ -187,6 +187,7 @@ import { ref, onMounted } from 'vue'
 import { vendorsApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 const toast = useToast()
 
 const vendors = ref([])
@@ -304,7 +305,7 @@ async function saveVendor() {
     loadVendors()
   } catch (err) {
     console.error('Error saving vendor:', err)
-    error.value = err.response?.data?.message || 'Failed to save vendor'
+    error.value = apiError(err, 'Failed to save vendor')
   } finally {
     saving.value = false
   }

frontend/src/views/warranty/WarrantiesList.vue

@@ -3,14 +3,17 @@
     <div class="page-header">
       <h2>Warranties</h2>
       <div class="header-actions">
-        <button class="btn btn-secondary" :disabled="syncing" @click="syncDell">
+        <button class="btn btn-secondary" :disabled="syncing" @click="syncDell(false)">
           {{ syncing ? 'Syncing Dell...' : 'Sync Dell' }}
         </button>
+        <button class="btn btn-secondary" :disabled="syncing" @click="syncDell(true)"
+                title="Re-check every Dell warranty, including ones already dated">
+          Re-check all
+        </button>
         <button class="btn btn-primary" @click="openModal()">+ Add Warranty</button>
       </div>
     </div>
 
-
     <div class="filters">
       <label>Status
         <select v-model="statusFilter" class="form-control" @change="loadData">
@@ -21,6 +24,8 @@
           <option value="unknown">Unknown</option>
         </select>
       </label>
+      <input v-model="search" type="text" class="form-control" placeholder="Search vendor, service level, tag, asset..." />
+      <span class="result-count">{{ filteredItems.length }} of {{ items.length }}</span>
     </div>
 
     <div class="card">
@@ -39,10 +44,10 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="w in items" :key="w.warrantyid">
+              <tr v-for="w in paginatedItems" :key="w.warrantyid">
                 <td><strong>{{ w.vendor }}</strong><span v-if="w.provider !== 'manual'" class="muted"> ({{ w.provider }})</span></td>
                 <td><span class="status-badge" :style="colorStyle(w.statuscolor)">{{ statusLabel(w.status) }}</span></td>
-                <td>{{ w.servicelevel || '-' }}</td>
+                <td class="servicelevel-cell" :title="w.servicelevel">{{ w.servicelevel || '-' }}</td>
                 <td>{{ w.enddate ? formatDate(w.enddate) : '-' }}</td>
                 <td>
                   <span v-if="!w.assets.length" class="muted">-</span>
@@ -54,12 +59,18 @@
                   <button class="btn btn-danger btn-sm" @click="deleteWarranty(w)">Delete</button>
                 </td>
               </tr>
-              <tr v-if="items.length === 0">
+              <tr v-if="filteredItems.length === 0">
                 <td colspan="6" style="text-align: center; color: var(--text-light);">No warranties</td>
               </tr>
             </tbody>
           </table>
         </div>
+
+        <div v-if="totalPages > 1" class="pagination">
+          <button class="btn btn-secondary btn-sm" :disabled="page === 1" @click="page--">Prev</button>
+          <span class="page-info">Page {{ page }} of {{ totalPages }}</span>
+          <button class="btn btn-secondary btn-sm" :disabled="page === totalPages" @click="page++">Next</button>
+        </div>
       </template>
     </div>
 
@@ -141,11 +152,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { colorStyle } from '@/utils/colorStyle'
 import { warrantyApi, assetsApi } from '../../api'
 import { useToast } from '../../composables/toast'
+import { apiError } from '../../utils/apiError'
 
 const toast = useToast()
 const route = useRoute()
@@ -153,6 +165,28 @@ const route = useRoute()
 const items = ref([])
 const loading = ref(true)
 const syncing = ref(false)
+const search = ref('')
+const page = ref(1)
+const perPage = 25
+
+// Client-side search across vendor / service level / tag / linked asset numbers.
+const filteredItems = computed(() => {
+  const term = search.value.trim().toLowerCase()
+  if (!term) return items.value
+  return items.value.filter(w =>
+    (w.vendor || '').toLowerCase().includes(term) ||
+    (w.servicelevel || '').toLowerCase().includes(term) ||
+    (w.servicetag || '').toLowerCase().includes(term) ||
+    (w.assets || []).some(a => (a.assetnumber || '').toLowerCase().includes(term)))
+})
+const totalPages = computed(() => Math.max(1, Math.ceil(filteredItems.value.length / perPage)))
+const paginatedItems = computed(() => filteredItems.value.slice((page.value - 1) * perPage, page.value * perPage))
+
+// Reset to page 1 whenever the filtered set changes.
+watch([filteredItems, () => filteredItems.value.length], () => {
+  if (page.value > totalPages.value) page.value = 1
+})
+watch(search, () => { page.value = 1 })
 const statusFilter = ref('')
 const showModal = ref(false)
 const editing = ref(null)
@@ -254,14 +288,6 @@ function openModal(item = null) {
 }
 function closeModal() { showModal.value = false; editing.value = null }
 
-// API errors nest the message at data.data.error.message (see error_response).
-function apiError(err, fallback) {
-  return err.response?.data?.data?.error?.message
-    || err.response?.data?.error?.message
-    || err.response?.data?.message
-    || fallback
-}
-
 async function save() {
   error.value = ''
   saving.value = true
@@ -291,11 +317,11 @@ async function deleteWarranty(w) {
   }
 }
 
-async function syncDell() {
+async function syncDell(all = false) {
   syncing.value = true
-  toast.info('Looking up Dell service tags... this can take a moment.')
+  toast.info(all ? 'Re-checking all Dell warranties...' : 'Looking up Dell service tags... this can take a moment.')
   try {
-    const response = await warrantyApi.syncDell()
+    const response = await warrantyApi.syncDell(all)
     const summary = response.data?.data || {}
     loadData()
     toast.success(`Dell sync: ${summary.created || 0} added, ${summary.updated || 0} updated (${summary.matched || 0} tags matched).`)
@@ -323,6 +349,12 @@ async function refresh(w) {
 <style scoped>
 .muted { color: var(--text-light); }
 .status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
+.filters { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
+.filters .form-control { max-width: 320px; }
+.result-count { color: var(--text-light); font-size: 0.85rem; }
+.servicelevel-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem 0 0.2rem; }
+.page-info { color: var(--text-light); font-size: 0.85rem; }
 .form-row { display: flex; gap: 1rem; }
 .form-row .form-group { flex: 1; }
 .asset-search { position: relative; }

plugins/warranty/api/routes.py

@@ -225,13 +225,16 @@ def sync_dell():
     and non-Dell serials are filtered out by Dell (they return no coverage).
     """
     provider = get_provider('dell')
+    # ?all=true re-checks assets that already have a dated warranty too.
+    recheck_all = request.args.get('all', 'false').lower() == 'true'
 
-    # Assets already covered by a dated warranty - skip these.
+    # Assets already covered by a dated warranty - skipped unless recheck_all.
     covered = set()
-    for link in WarrantyAsset.query.all():
+    if not recheck_all:
-        w = Warranty.query.get(link.warrantyid)
+        for link in WarrantyAsset.query.all():
-        if w and w.isactive and w.enddate:
+            w = Warranty.query.get(link.warrantyid)
-            covered.add(link.assetid)
+            if w and w.isactive and w.enddate:
+                covered.add(link.assetid)
 
     # Candidate assets: active, have a serial, not already covered.
     candidates = (Asset.query