diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 4d05410..80f69d0 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -970,8 +970,8 @@ export const warrantyApi = {
   refresh(id) {
     return api.post(`/warranty/${id}/refresh`)
   },
-  syncDell() {
-    return api.post('/warranty/sync/dell')
+  syncDell(all = false) {
+    return api.post('/warranty/sync/dell', null, { params: all ? { all: 'true' } : {} })
   },
   report() {
     return api.get('/warranty/report')
diff --git a/frontend/src/components/AssetRelationships.vue b/frontend/src/components/AssetRelationships.vue
index 12a0b00..c01a1bb 100644
--- a/frontend/src/components/AssetRelationships.vue
+++ b/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'))
   }
 }
 
diff --git a/frontend/src/composables/warrantyBadge.js b/frontend/src/composables/warrantyBadge.js
new file mode 100644
index 0000000..9fa2b11
--- /dev/null
+++ b/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 }
+}
diff --git a/frontend/src/utils/apiError.js b/frontend/src/utils/apiError.js
new file mode 100644
index 0000000..0a3ed65
--- /dev/null
+++ b/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
+}
diff --git a/frontend/src/views/applications/ApplicationForm.vue b/frontend/src/views/applications/ApplicationForm.vue
index 0594338..17e6371 100644
--- a/frontend/src/views/applications/ApplicationForm.vue
+++ b/frontend/src/views/applications/ApplicationForm.vue
@@ -1,278 +1,279 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="saveApplication">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="appname">Application Name *</label>
-            <input
-              id="appname"
-              v-model="form.appname"
-              type="text"
-              class="form-control"
-              required
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="supportteamid">Support Team</label>
-            <select
-              id="supportteamid"
-              v-model="form.supportteamid"
-              class="form-control"
-            >
-              <option value="">Select team...</option>
-              <option
-                v-for="team in supportTeams"
-                :key="team.supportteamid"
-                :value="team.supportteamid"
-              >
-                {{ team.teamname }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="appdescription">Description</label>
-          <textarea
-            id="appdescription"
-            v-model="form.appdescription"
-            class="form-control"
-            rows="2"
-          ></textarea>
-        </div>
-
-        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
-
-        <div class="form-row">
-          <div class="form-group checkbox-group">
-            <label>
-              <input type="checkbox" v-model="form.isinstallable" />
-              Installable
-            </label>
-            <label>
-              <input type="checkbox" v-model="form.islicenced" />
-              Licensed
-            </label>
-            <label>
-              <input type="checkbox" v-model="form.isprinter" />
-              Printer App
-            </label>
-            <label>
-              <input type="checkbox" v-model="form.isrequired" />
-              Required on all PCs
-            </label>
-            <label>
-              <input type="checkbox" v-model="form.ishidden" />
-              Hidden
-            </label>
-          </div>
-        </div>
-
-        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="applicationlink">Application Link</label>
-            <input
-              id="applicationlink"
-              v-model="form.applicationlink"
-              type="text"
-              class="form-control"
-              placeholder="https://..."
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="documentationpath">Documentation Path</label>
-            <input
-              id="documentationpath"
-              v-model="form.documentationpath"
-              type="text"
-              class="form-control"
-              placeholder="URL or file path"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="installpath">Install Path</label>
-          <input
-            id="installpath"
-            v-model="form.installpath"
-            type="text"
-            class="form-control"
-            placeholder="Network path or URL to install files"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="image">Image Filename</label>
-          <input
-            id="image"
-            v-model="form.image"
-            type="text"
-            class="form-control"
-            placeholder="e.g., myapp.png"
-          />
-          <small class="form-hint">Image should be placed in /images/applications/</small>
-        </div>
-
-        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
-
-        <div class="form-group">
-          <label for="applicationnotes">Application Notes (HTML supported)</label>
-          <textarea
-            id="applicationnotes"
-            v-model="form.applicationnotes"
-            class="form-control"
-            rows="6"
-            placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
-          ></textarea>
-        </div>
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : 'Save Application' }}
-          </button>
-          <router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { applicationsApi } from '../../api'
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => !!route.params.id)
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-
-const form = ref({
-  appname: '',
-  appdescription: '',
-  supportteamid: '',
-  isinstallable: false,
-  islicenced: false,
-  isprinter: false,
-  isrequired: false,
-  ishidden: false,
-  applicationlink: '',
-  documentationpath: '',
-  installpath: '',
-  image: '',
-  applicationnotes: ''
-})
-
-const supportTeams = ref([])
-
-onMounted(async () => {
-  try {
-    // Load support teams
-    const teamsRes = await applicationsApi.getSupportTeams()
-    supportTeams.value = teamsRes.data.data || []
-
-    // Load application if editing
-    if (isEdit.value) {
-      const response = await applicationsApi.get(route.params.id)
-      const app = response.data.data
-
-      form.value = {
-        appname: app.appname || '',
-        appdescription: app.appdescription || '',
-        supportteamid: app.supportteam?.supportteamid || '',
-        isinstallable: app.isinstallable || false,
-        islicenced: app.islicenced || false,
-        isprinter: app.isprinter || false,
-        isrequired: app.isrequired || false,
-        ishidden: app.ishidden || false,
-        applicationlink: app.applicationlink || '',
-        documentationpath: app.documentationpath || '',
-        installpath: app.installpath || '',
-        image: app.image || '',
-        applicationnotes: app.applicationnotes || ''
-      }
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-async function saveApplication() {
-  error.value = ''
-  saving.value = true
-
-  try {
-    const appData = {
-      appname: form.value.appname,
-      appdescription: form.value.appdescription || null,
-      supportteamid: form.value.supportteamid || null,
-      isinstallable: form.value.isinstallable,
-      islicenced: form.value.islicenced,
-      isprinter: form.value.isprinter,
-      isrequired: form.value.isrequired,
-      ishidden: form.value.ishidden,
-      applicationlink: form.value.applicationlink || null,
-      documentationpath: form.value.documentationpath || null,
-      installpath: form.value.installpath || null,
-      image: form.value.image || null,
-      applicationnotes: form.value.applicationnotes || null
-    }
-
-    if (isEdit.value) {
-      await applicationsApi.update(route.params.id, appData)
-    } else {
-      await applicationsApi.create(appData)
-    }
-
-    router.push('/applications')
-  } catch (err) {
-    console.error('Error saving application:', err)
-    error.value = err.response?.data?.message || 'Failed to save application'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.checkbox-group {
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-}
-
-.checkbox-group label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.form-hint {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--text-light, #666);
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveApplication">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="appname">Application Name *</label>
+            <input
+              id="appname"
+              v-model="form.appname"
+              type="text"
+              class="form-control"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="supportteamid">Support Team</label>
+            <select
+              id="supportteamid"
+              v-model="form.supportteamid"
+              class="form-control"
+            >
+              <option value="">Select team...</option>
+              <option
+                v-for="team in supportTeams"
+                :key="team.supportteamid"
+                :value="team.supportteamid"
+              >
+                {{ team.teamname }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="appdescription">Description</label>
+          <textarea
+            id="appdescription"
+            v-model="form.appdescription"
+            class="form-control"
+            rows="2"
+          ></textarea>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
+
+        <div class="form-row">
+          <div class="form-group checkbox-group">
+            <label>
+              <input type="checkbox" v-model="form.isinstallable" />
+              Installable
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.islicenced" />
+              Licensed
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.isprinter" />
+              Printer App
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.isrequired" />
+              Required on all PCs
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.ishidden" />
+              Hidden
+            </label>
+          </div>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="applicationlink">Application Link</label>
+            <input
+              id="applicationlink"
+              v-model="form.applicationlink"
+              type="text"
+              class="form-control"
+              placeholder="https://..."
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="documentationpath">Documentation Path</label>
+            <input
+              id="documentationpath"
+              v-model="form.documentationpath"
+              type="text"
+              class="form-control"
+              placeholder="URL or file path"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="installpath">Install Path</label>
+          <input
+            id="installpath"
+            v-model="form.installpath"
+            type="text"
+            class="form-control"
+            placeholder="Network path or URL to install files"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="image">Image Filename</label>
+          <input
+            id="image"
+            v-model="form.image"
+            type="text"
+            class="form-control"
+            placeholder="e.g., myapp.png"
+          />
+          <small class="form-hint">Image should be placed in /images/applications/</small>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
+
+        <div class="form-group">
+          <label for="applicationnotes">Application Notes (HTML supported)</label>
+          <textarea
+            id="applicationnotes"
+            v-model="form.applicationnotes"
+            class="form-control"
+            rows="6"
+            placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
+          ></textarea>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Application' }}
+          </button>
+          <router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const form = ref({
+  appname: '',
+  appdescription: '',
+  supportteamid: '',
+  isinstallable: false,
+  islicenced: false,
+  isprinter: false,
+  isrequired: false,
+  ishidden: false,
+  applicationlink: '',
+  documentationpath: '',
+  installpath: '',
+  image: '',
+  applicationnotes: ''
+})
+
+const supportTeams = ref([])
+
+onMounted(async () => {
+  try {
+    // Load support teams
+    const teamsRes = await applicationsApi.getSupportTeams()
+    supportTeams.value = teamsRes.data.data || []
+
+    // Load application if editing
+    if (isEdit.value) {
+      const response = await applicationsApi.get(route.params.id)
+      const app = response.data.data
+
+      form.value = {
+        appname: app.appname || '',
+        appdescription: app.appdescription || '',
+        supportteamid: app.supportteam?.supportteamid || '',
+        isinstallable: app.isinstallable || false,
+        islicenced: app.islicenced || false,
+        isprinter: app.isprinter || false,
+        isrequired: app.isrequired || false,
+        ishidden: app.ishidden || false,
+        applicationlink: app.applicationlink || '',
+        documentationpath: app.documentationpath || '',
+        installpath: app.installpath || '',
+        image: app.image || '',
+        applicationnotes: app.applicationnotes || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveApplication() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const appData = {
+      appname: form.value.appname,
+      appdescription: form.value.appdescription || null,
+      supportteamid: form.value.supportteamid || null,
+      isinstallable: form.value.isinstallable,
+      islicenced: form.value.islicenced,
+      isprinter: form.value.isprinter,
+      isrequired: form.value.isrequired,
+      ishidden: form.value.ishidden,
+      applicationlink: form.value.applicationlink || null,
+      documentationpath: form.value.documentationpath || null,
+      installpath: form.value.installpath || null,
+      image: form.value.image || null,
+      applicationnotes: form.value.applicationnotes || null
+    }
+
+    if (isEdit.value) {
+      await applicationsApi.update(route.params.id, appData)
+    } else {
+      await applicationsApi.create(appData)
+    }
+
+    router.push('/applications')
+  } catch (err) {
+    console.error('Error saving application:', err)
+    error.value = apiError(err, 'Failed to save application')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-group {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue b/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
index 1cd22a1..2726e4a 100644
--- a/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
+++ b/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
@@ -1,166 +1,167 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="saveArticle">
-        <div class="form-group">
-          <label for="shortdescription">Description *</label>
-          <input
-            id="shortdescription"
-            v-model="form.shortdescription"
-            type="text"
-            class="form-control"
-            required
-            maxlength="500"
-            placeholder="Brief description of the article"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="linkurl">URL *</label>
-          <input
-            id="linkurl"
-            v-model="form.linkurl"
-            type="url"
-            class="form-control"
-            required
-            maxlength="2000"
-            placeholder="https://..."
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="keywords">Keywords</label>
-          <input
-            id="keywords"
-            v-model="form.keywords"
-            type="text"
-            class="form-control"
-            maxlength="500"
-            placeholder="Space-separated keywords"
-          />
-          <small class="form-hint">Keywords help with search - separate with spaces</small>
-        </div>
-
-        <div class="form-group">
-          <label for="appid">Topic (Application)</label>
-          <select
-            id="appid"
-            v-model="form.appid"
-            class="form-control"
-          >
-            <option value="">-- Select Topic (Optional) --</option>
-            <option
-              v-for="app in applications"
-              :key="app.appid"
-              :value="app.appid"
-            >
-              {{ app.appname }}
-            </option>
-          </select>
-          <small class="form-hint">Select the application/topic this article relates to</small>
-        </div>
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
-          </button>
-          <router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { knowledgebaseApi, applicationsApi } from '../../api'
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => !!route.params.id)
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-
-const form = ref({
-  shortdescription: '',
-  linkurl: '',
-  keywords: '',
-  appid: ''
-})
-
-const applications = ref([])
-
-onMounted(async () => {
-  try {
-    // Load applications for topic dropdown
-    const appsRes = await applicationsApi.list({ perpage: 1000 })
-    applications.value = appsRes.data.data || []
-
-    // Load article if editing
-    if (isEdit.value) {
-      const response = await knowledgebaseApi.get(route.params.id)
-      const article = response.data.data
-
-      form.value = {
-        shortdescription: article.shortdescription || '',
-        linkurl: article.linkurl || '',
-        keywords: article.keywords || '',
-        appid: article.application?.appid || ''
-      }
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-async function saveArticle() {
-  error.value = ''
-  saving.value = true
-
-  try {
-    const articleData = {
-      shortdescription: form.value.shortdescription,
-      linkurl: form.value.linkurl,
-      keywords: form.value.keywords || null,
-      appid: form.value.appid || null
-    }
-
-    if (isEdit.value) {
-      await knowledgebaseApi.update(route.params.id, articleData)
-    } else {
-      await knowledgebaseApi.create(articleData)
-    }
-
-    router.push('/knowledgebase')
-  } catch (err) {
-    console.error('Error saving article:', err)
-    error.value = err.response?.data?.message || 'Failed to save article'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.form-hint {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--text-light, #666);
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveArticle">
+        <div class="form-group">
+          <label for="shortdescription">Description *</label>
+          <input
+            id="shortdescription"
+            v-model="form.shortdescription"
+            type="text"
+            class="form-control"
+            required
+            maxlength="500"
+            placeholder="Brief description of the article"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="linkurl">URL *</label>
+          <input
+            id="linkurl"
+            v-model="form.linkurl"
+            type="url"
+            class="form-control"
+            required
+            maxlength="2000"
+            placeholder="https://..."
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="keywords">Keywords</label>
+          <input
+            id="keywords"
+            v-model="form.keywords"
+            type="text"
+            class="form-control"
+            maxlength="500"
+            placeholder="Space-separated keywords"
+          />
+          <small class="form-hint">Keywords help with search - separate with spaces</small>
+        </div>
+
+        <div class="form-group">
+          <label for="appid">Topic (Application)</label>
+          <select
+            id="appid"
+            v-model="form.appid"
+            class="form-control"
+          >
+            <option value="">-- Select Topic (Optional) --</option>
+            <option
+              v-for="app in applications"
+              :key="app.appid"
+              :value="app.appid"
+            >
+              {{ app.appname }}
+            </option>
+          </select>
+          <small class="form-hint">Select the application/topic this article relates to</small>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
+          </button>
+          <router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const form = ref({
+  shortdescription: '',
+  linkurl: '',
+  keywords: '',
+  appid: ''
+})
+
+const applications = ref([])
+
+onMounted(async () => {
+  try {
+    // Load applications for topic dropdown
+    const appsRes = await applicationsApi.list({ perpage: 1000 })
+    applications.value = appsRes.data.data || []
+
+    // Load article if editing
+    if (isEdit.value) {
+      const response = await knowledgebaseApi.get(route.params.id)
+      const article = response.data.data
+
+      form.value = {
+        shortdescription: article.shortdescription || '',
+        linkurl: article.linkurl || '',
+        keywords: article.keywords || '',
+        appid: article.application?.appid || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveArticle() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const articleData = {
+      shortdescription: form.value.shortdescription,
+      linkurl: form.value.linkurl,
+      keywords: form.value.keywords || null,
+      appid: form.value.appid || null
+    }
+
+    if (isEdit.value) {
+      await knowledgebaseApi.update(route.params.id, articleData)
+    } else {
+      await knowledgebaseApi.create(articleData)
+    }
+
+    router.push('/knowledgebase')
+  } catch (err) {
+    console.error('Error saving article:', err)
+    error.value = apiError(err, 'Failed to save article')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/machines/MachineDetail.vue b/frontend/src/views/machines/MachineDetail.vue
index 9be8f32..cc1f896 100644
--- a/frontend/src/views/machines/MachineDetail.vue
+++ b/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(() => {
diff --git a/frontend/src/views/machines/MachineForm.vue b/frontend/src/views/machines/MachineForm.vue
index 04b11dd..d6bc1bf 100644
--- a/frontend/src/views/machines/MachineForm.vue
+++ b/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
   }
diff --git a/frontend/src/views/network/NetworkDeviceDetail.vue b/frontend/src/views/network/NetworkDeviceDetail.vue
index 2cab592..fa6327c 100644
--- a/frontend/src/views/network/NetworkDeviceDetail.vue
+++ b/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 () => {
diff --git a/frontend/src/views/network/NetworkDeviceForm.vue b/frontend/src/views/network/NetworkDeviceForm.vue
index e7cf12d..b3a0a8c 100644
--- a/frontend/src/views/network/NetworkDeviceForm.vue
+++ b/frontend/src/views/network/NetworkDeviceForm.vue
@@ -1,551 +1,552 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit Network Device' : 'Add Network Device' }}</h2>
-    </div>
-
-    <div class="card form-card">
-      <form @submit.prevent="submitForm">
-        <!-- Asset Information -->
-        <fieldset>
-          <legend>Asset Information</legend>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="assetnumber">Asset Number *</label>
-              <input
-                id="assetnumber"
-                v-model="form.assetnumber"
-                type="text"
-                class="form-control"
-                required
-                :disabled="isEdit"
-              />
-            </div>
-            <div class="form-group">
-              <label for="name">Name</label>
-              <input
-                id="name"
-                v-model="form.name"
-                type="text"
-                class="form-control"
-              />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="serialnumber">Serial Number</label>
-              <input
-                id="serialnumber"
-                v-model="form.serialnumber"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label for="statusid">Status</label>
-              <select id="statusid" v-model="form.statusid" class="form-control">
-                <option value="">Select Status</option>
-                <option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
-                  {{ s.status }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-row" v-if="isEnabled('gaugelabreference', 'network_device') || isEnabled('maintenancereference', 'network_device')">
-            <div class="form-group" v-if="isEnabled('gaugelabreference', 'network_device')">
-              <label for="gaugelabreference">Gauge Lab Reference</label>
-              <input
-                id="gaugelabreference"
-                v-model="form.gaugelabreference"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group" v-if="isEnabled('maintenancereference', 'network_device')">
-              <label for="maintenancereference">Maintenance Reference</label>
-              <input
-                id="maintenancereference"
-                v-model="form.maintenancereference"
-                type="text"
-                class="form-control"
-              />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="locationid">Location</label>
-              <select id="locationid" v-model="form.locationid" class="form-control">
-                <option value="">Select Location</option>
-                <option v-for="loc in locations" :key="loc.locationid" :value="loc.locationid">
-                  {{ loc.location }}
-                </option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label for="businessunitid">Business Unit</label>
-              <select id="businessunitid" v-model="form.businessunitid" class="form-control">
-                <option value="">Select Business Unit</option>
-                <option v-for="bu in businessUnits" :key="bu.businessunitid" :value="bu.businessunitid">
-                  {{ bu.businessunit }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </fieldset>
-
-        <!-- Network Device Information -->
-        <fieldset>
-          <legend>Network Device Details</legend>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="hostname">Hostname</label>
-              <input
-                id="hostname"
-                v-model="form.hostname"
-                type="text"
-                class="form-control"
-                placeholder="e.g., sw-bldg1-floor2"
-              />
-            </div>
-            <div class="form-group">
-              <label for="networkdevicetypeid">Device Type</label>
-              <select id="networkdevicetypeid" v-model="form.networkdevicetypeid" class="form-control">
-                <option value="">Select Type</option>
-                <option v-for="t in deviceTypes" :key="t.networkdevicetypeid" :value="t.networkdevicetypeid">
-                  {{ t.networkdevicetype }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="vendorid">Vendor</label>
-              <select id="vendorid" v-model="form.vendorid" class="form-control">
-                <option value="">Select Vendor</option>
-                <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
-                  {{ v.vendor }}
-                </option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label for="firmwareversion">Firmware Version</label>
-              <input
-                id="firmwareversion"
-                v-model="form.firmwareversion"
-                type="text"
-                class="form-control"
-              />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="portcount">Port Count</label>
-              <input
-                id="portcount"
-                v-model.number="form.portcount"
-                type="number"
-                class="form-control"
-                min="0"
-              />
-            </div>
-            <div class="form-group">
-              <label for="rackunit">Rack Unit</label>
-              <input
-                id="rackunit"
-                v-model="form.rackunit"
-                type="text"
-                class="form-control"
-                placeholder="e.g., U1, U5-U8"
-              />
-            </div>
-          </div>
-
-          <div class="form-row checkboxes">
-            <div class="form-group checkbox-group">
-              <label>
-                <input type="checkbox" v-model="form.ispoe" />
-                <span>PoE Capable</span>
-              </label>
-              <small>Device supports Power over Ethernet</small>
-            </div>
-            <div class="form-group checkbox-group">
-              <label>
-                <input type="checkbox" v-model="form.ismanaged" />
-                <span>Managed Device</span>
-              </label>
-              <small>Device has SNMP, web interface, or CLI management</small>
-            </div>
-          </div>
-        </fieldset>
-
-        <!-- Map Position (optional) -->
-        <fieldset>
-          <legend>Map Position (Optional)</legend>
-          <div class="form-row">
-            <div class="form-group">
-              <label for="mapx">Map X Position</label>
-              <input
-                id="mapx"
-                v-model.number="form.mapx"
-                type="number"
-                class="form-control"
-                min="0"
-              />
-            </div>
-            <div class="form-group">
-              <label for="mapy">Map Y Position</label>
-              <input
-                id="mapy"
-                v-model.number="form.mapy"
-                type="number"
-                class="form-control"
-                min="0"
-              />
-            </div>
-          </div>
-        </fieldset>
-
-        <!-- Notes -->
-        <fieldset>
-          <legend>Notes</legend>
-          <div class="form-group">
-            <textarea
-              id="notes"
-              v-model="form.notes"
-              class="form-control"
-              rows="4"
-              placeholder="Additional notes about this device..."
-            ></textarea>
-          </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>
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : (isEdit ? 'Save Changes' : 'Create Device') }}
-          </button>
-        </div>
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import {
-  networkApi,
-  vendorsApi,
-  locationsApi,
-  assetsApi,
-  businessunitsApi
-} from '../../api'
-import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
-import { useIdentifierFlags } from '../../composables/identifierSettings'
-
-const { isEnabled } = useIdentifierFlags()
-
-const route = useRoute()
-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: '',
-  serialnumber: '',
-  gaugelabreference: '',
-  maintenancereference: '',
-  statusid: '',
-  locationid: '',
-  businessunitid: '',
-  hostname: '',
-  networkdevicetypeid: '',
-  vendorid: '',
-  firmwareversion: '',
-  portcount: null,
-  rackunit: '',
-  ispoe: false,
-  ismanaged: false,
-  mapx: null,
-  mapy: null,
-  notes: ''
-})
-
-const deviceTypes = ref([])
-const vendors = ref([])
-const locations = ref([])
-const statuses = ref([])
-const businessUnits = ref([])
-const saving = ref(false)
-const error = ref('')
-
-onMounted(async () => {
-  await Promise.all([
-    loadDeviceTypes(),
-    loadVendors(),
-    loadLocations(),
-    loadStatuses(),
-    loadBusinessUnits()
-  ])
-
-  if (isEdit.value) {
-    await loadDevice()
-  }
-})
-
-async function loadDeviceTypes() {
-  try {
-    const response = await networkApi.types.list({ perpage: 100 })
-    deviceTypes.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading device types:', err)
-  }
-}
-
-async function loadVendors() {
-  try {
-    const response = await vendorsApi.list({ perpage: 100 })
-    vendors.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading vendors:', err)
-  }
-}
-
-async function loadLocations() {
-  try {
-    const response = await locationsApi.list({ perpage: 100 })
-    locations.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading locations:', err)
-  }
-}
-
-async function loadStatuses() {
-  try {
-    const response = await assetsApi.statuses.list()
-    statuses.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading statuses:', err)
-  }
-}
-
-async function loadBusinessUnits() {
-  try {
-    const response = await businessunitsApi.list({ perpage: 100 })
-    businessUnits.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading business units:', err)
-  }
-}
-
-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 || ''
-    form.value.name = data.name || ''
-    form.value.serialnumber = data.serialnumber || ''
-    form.value.gaugelabreference = data.gaugelabreference || ''
-    form.value.maintenancereference = data.maintenancereference || ''
-    form.value.statusid = data.statusid || ''
-    form.value.locationid = data.locationid || ''
-    form.value.businessunitid = data.businessunitid || ''
-    form.value.mapx = data.mapx
-    form.value.mapy = data.mapy
-    form.value.notes = data.notes || ''
-
-    // Network device specific
-    if (data.networkdevice) {
-      form.value.hostname = data.networkdevice.hostname || ''
-      form.value.networkdevicetypeid = data.networkdevice.networkdevicetypeid || ''
-      form.value.vendorid = data.networkdevice.vendorid || ''
-      form.value.firmwareversion = data.networkdevice.firmwareversion || ''
-      form.value.portcount = data.networkdevice.portcount
-      form.value.rackunit = data.networkdevice.rackunit || ''
-      form.value.ispoe = data.networkdevice.ispoe || false
-      form.value.ismanaged = data.networkdevice.ismanaged || false
-    }
-  } catch (err) {
-    console.error('Error loading device:', err)
-    error.value = 'Failed to load device'
-  }
-}
-
-async function submitForm() {
-  saving.value = true
-  error.value = ''
-
-  try {
-    const payload = {
-      assetnumber: form.value.assetnumber,
-      name: form.value.name || null,
-      serialnumber: form.value.serialnumber || null,
-      gaugelabreference: form.value.gaugelabreference || null,
-      maintenancereference: form.value.maintenancereference || null,
-      statusid: form.value.statusid || null,
-      locationid: form.value.locationid || null,
-      businessunitid: form.value.businessunitid || null,
-      hostname: form.value.hostname || null,
-      networkdevicetypeid: form.value.networkdevicetypeid || null,
-      vendorid: form.value.vendorid || null,
-      firmwareversion: form.value.firmwareversion || null,
-      portcount: form.value.portcount || null,
-      rackunit: form.value.rackunit || null,
-      ispoe: form.value.ispoe,
-      ismanaged: form.value.ismanaged,
-      mapx: form.value.mapx,
-      mapy: form.value.mapy,
-      notes: form.value.notes || null
-    }
-
-    let assetId = currentAssetId.value
-    let redirectId = deviceId
-    if (isEdit.value) {
-      const response = await networkApi.update(deviceId, payload)
-      assetId = assetId || response.data?.data?.assetid
-    } else {
-      const response = await networkApi.create(payload)
-      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'
-  } finally {
-    saving.value = false
-  }
-}
-
-function cancel() {
-  if (isEdit.value) {
-    router.push(`/network/${deviceId}`)
-  } else {
-    router.push('/network')
-  }
-}
-</script>
-
-<style scoped>
-.form-card {
-  max-width: 800px;
-}
-
-fieldset {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-legend {
-  font-weight: 600;
-  padding: 0 0.5rem;
-  color: var(--text);
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.form-row:last-child {
-  margin-bottom: 0;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group label {
-  margin-bottom: 0.375rem;
-  font-weight: 500;
-  color: var(--text);
-}
-
-.form-group small {
-  margin-top: 0.25rem;
-  color: var(--text-light);
-  font-size: 0.8rem;
-}
-
-.checkboxes {
-  margin-top: 1rem;
-}
-
-.checkbox-group label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.checkbox-group input[type="checkbox"] {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.checkbox-group span {
-  font-weight: 500;
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-.error-message {
-  margin-top: 1rem;
-  padding: 0.75rem 1rem;
-  background: var(--danger);
-  color: white;
-  border-radius: 6px;
-}
-
-@media (max-width: 600px) {
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Network Device' : 'Add Network Device' }}</h2>
+    </div>
+
+    <div class="card form-card">
+      <form @submit.prevent="submitForm">
+        <!-- Asset Information -->
+        <fieldset>
+          <legend>Asset Information</legend>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="assetnumber">Asset Number *</label>
+              <input
+                id="assetnumber"
+                v-model="form.assetnumber"
+                type="text"
+                class="form-control"
+                required
+                :disabled="isEdit"
+              />
+            </div>
+            <div class="form-group">
+              <label for="name">Name</label>
+              <input
+                id="name"
+                v-model="form.name"
+                type="text"
+                class="form-control"
+              />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="serialnumber">Serial Number</label>
+              <input
+                id="serialnumber"
+                v-model="form.serialnumber"
+                type="text"
+                class="form-control"
+              />
+            </div>
+            <div class="form-group">
+              <label for="statusid">Status</label>
+              <select id="statusid" v-model="form.statusid" class="form-control">
+                <option value="">Select Status</option>
+                <option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
+                  {{ s.status }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-row" v-if="isEnabled('gaugelabreference', 'network_device') || isEnabled('maintenancereference', 'network_device')">
+            <div class="form-group" v-if="isEnabled('gaugelabreference', 'network_device')">
+              <label for="gaugelabreference">Gauge Lab Reference</label>
+              <input
+                id="gaugelabreference"
+                v-model="form.gaugelabreference"
+                type="text"
+                class="form-control"
+              />
+            </div>
+            <div class="form-group" v-if="isEnabled('maintenancereference', 'network_device')">
+              <label for="maintenancereference">Maintenance Reference</label>
+              <input
+                id="maintenancereference"
+                v-model="form.maintenancereference"
+                type="text"
+                class="form-control"
+              />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="locationid">Location</label>
+              <select id="locationid" v-model="form.locationid" class="form-control">
+                <option value="">Select Location</option>
+                <option v-for="loc in locations" :key="loc.locationid" :value="loc.locationid">
+                  {{ loc.location }}
+                </option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="businessunitid">Business Unit</label>
+              <select id="businessunitid" v-model="form.businessunitid" class="form-control">
+                <option value="">Select Business Unit</option>
+                <option v-for="bu in businessUnits" :key="bu.businessunitid" :value="bu.businessunitid">
+                  {{ bu.businessunit }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </fieldset>
+
+        <!-- Network Device Information -->
+        <fieldset>
+          <legend>Network Device Details</legend>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="hostname">Hostname</label>
+              <input
+                id="hostname"
+                v-model="form.hostname"
+                type="text"
+                class="form-control"
+                placeholder="e.g., sw-bldg1-floor2"
+              />
+            </div>
+            <div class="form-group">
+              <label for="networkdevicetypeid">Device Type</label>
+              <select id="networkdevicetypeid" v-model="form.networkdevicetypeid" class="form-control">
+                <option value="">Select Type</option>
+                <option v-for="t in deviceTypes" :key="t.networkdevicetypeid" :value="t.networkdevicetypeid">
+                  {{ t.networkdevicetype }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="vendorid">Vendor</label>
+              <select id="vendorid" v-model="form.vendorid" class="form-control">
+                <option value="">Select Vendor</option>
+                <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
+                  {{ v.vendor }}
+                </option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="firmwareversion">Firmware Version</label>
+              <input
+                id="firmwareversion"
+                v-model="form.firmwareversion"
+                type="text"
+                class="form-control"
+              />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="portcount">Port Count</label>
+              <input
+                id="portcount"
+                v-model.number="form.portcount"
+                type="number"
+                class="form-control"
+                min="0"
+              />
+            </div>
+            <div class="form-group">
+              <label for="rackunit">Rack Unit</label>
+              <input
+                id="rackunit"
+                v-model="form.rackunit"
+                type="text"
+                class="form-control"
+                placeholder="e.g., U1, U5-U8"
+              />
+            </div>
+          </div>
+
+          <div class="form-row checkboxes">
+            <div class="form-group checkbox-group">
+              <label>
+                <input type="checkbox" v-model="form.ispoe" />
+                <span>PoE Capable</span>
+              </label>
+              <small>Device supports Power over Ethernet</small>
+            </div>
+            <div class="form-group checkbox-group">
+              <label>
+                <input type="checkbox" v-model="form.ismanaged" />
+                <span>Managed Device</span>
+              </label>
+              <small>Device has SNMP, web interface, or CLI management</small>
+            </div>
+          </div>
+        </fieldset>
+
+        <!-- Map Position (optional) -->
+        <fieldset>
+          <legend>Map Position (Optional)</legend>
+          <div class="form-row">
+            <div class="form-group">
+              <label for="mapx">Map X Position</label>
+              <input
+                id="mapx"
+                v-model.number="form.mapx"
+                type="number"
+                class="form-control"
+                min="0"
+              />
+            </div>
+            <div class="form-group">
+              <label for="mapy">Map Y Position</label>
+              <input
+                id="mapy"
+                v-model.number="form.mapy"
+                type="number"
+                class="form-control"
+                min="0"
+              />
+            </div>
+          </div>
+        </fieldset>
+
+        <!-- Notes -->
+        <fieldset>
+          <legend>Notes</legend>
+          <div class="form-group">
+            <textarea
+              id="notes"
+              v-model="form.notes"
+              class="form-control"
+              rows="4"
+              placeholder="Additional notes about this device..."
+            ></textarea>
+          </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>
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : (isEdit ? 'Save Changes' : 'Create Device') }}
+          </button>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  networkApi,
+  vendorsApi,
+  locationsApi,
+  assetsApi,
+  businessunitsApi
+} from '../../api'
+import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
+import { useIdentifierFlags } from '../../composables/identifierSettings'
+import { apiError } from '../../utils/apiError'
+
+const { isEnabled } = useIdentifierFlags()
+
+const route = useRoute()
+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: '',
+  serialnumber: '',
+  gaugelabreference: '',
+  maintenancereference: '',
+  statusid: '',
+  locationid: '',
+  businessunitid: '',
+  hostname: '',
+  networkdevicetypeid: '',
+  vendorid: '',
+  firmwareversion: '',
+  portcount: null,
+  rackunit: '',
+  ispoe: false,
+  ismanaged: false,
+  mapx: null,
+  mapy: null,
+  notes: ''
+})
+
+const deviceTypes = ref([])
+const vendors = ref([])
+const locations = ref([])
+const statuses = ref([])
+const businessUnits = ref([])
+const saving = ref(false)
+const error = ref('')
+
+onMounted(async () => {
+  await Promise.all([
+    loadDeviceTypes(),
+    loadVendors(),
+    loadLocations(),
+    loadStatuses(),
+    loadBusinessUnits()
+  ])
+
+  if (isEdit.value) {
+    await loadDevice()
+  }
+})
+
+async function loadDeviceTypes() {
+  try {
+    const response = await networkApi.types.list({ perpage: 100 })
+    deviceTypes.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading device types:', err)
+  }
+}
+
+async function loadVendors() {
+  try {
+    const response = await vendorsApi.list({ perpage: 100 })
+    vendors.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading vendors:', err)
+  }
+}
+
+async function loadLocations() {
+  try {
+    const response = await locationsApi.list({ perpage: 100 })
+    locations.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading locations:', err)
+  }
+}
+
+async function loadStatuses() {
+  try {
+    const response = await assetsApi.statuses.list()
+    statuses.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading statuses:', err)
+  }
+}
+
+async function loadBusinessUnits() {
+  try {
+    const response = await businessunitsApi.list({ perpage: 100 })
+    businessUnits.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading business units:', err)
+  }
+}
+
+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 || ''
+    form.value.name = data.name || ''
+    form.value.serialnumber = data.serialnumber || ''
+    form.value.gaugelabreference = data.gaugelabreference || ''
+    form.value.maintenancereference = data.maintenancereference || ''
+    form.value.statusid = data.statusid || ''
+    form.value.locationid = data.locationid || ''
+    form.value.businessunitid = data.businessunitid || ''
+    form.value.mapx = data.mapx
+    form.value.mapy = data.mapy
+    form.value.notes = data.notes || ''
+
+    // Network device specific
+    if (data.networkdevice) {
+      form.value.hostname = data.networkdevice.hostname || ''
+      form.value.networkdevicetypeid = data.networkdevice.networkdevicetypeid || ''
+      form.value.vendorid = data.networkdevice.vendorid || ''
+      form.value.firmwareversion = data.networkdevice.firmwareversion || ''
+      form.value.portcount = data.networkdevice.portcount
+      form.value.rackunit = data.networkdevice.rackunit || ''
+      form.value.ispoe = data.networkdevice.ispoe || false
+      form.value.ismanaged = data.networkdevice.ismanaged || false
+    }
+  } catch (err) {
+    console.error('Error loading device:', err)
+    error.value = 'Failed to load device'
+  }
+}
+
+async function submitForm() {
+  saving.value = true
+  error.value = ''
+
+  try {
+    const payload = {
+      assetnumber: form.value.assetnumber,
+      name: form.value.name || null,
+      serialnumber: form.value.serialnumber || null,
+      gaugelabreference: form.value.gaugelabreference || null,
+      maintenancereference: form.value.maintenancereference || null,
+      statusid: form.value.statusid || null,
+      locationid: form.value.locationid || null,
+      businessunitid: form.value.businessunitid || null,
+      hostname: form.value.hostname || null,
+      networkdevicetypeid: form.value.networkdevicetypeid || null,
+      vendorid: form.value.vendorid || null,
+      firmwareversion: form.value.firmwareversion || null,
+      portcount: form.value.portcount || null,
+      rackunit: form.value.rackunit || null,
+      ispoe: form.value.ispoe,
+      ismanaged: form.value.ismanaged,
+      mapx: form.value.mapx,
+      mapy: form.value.mapy,
+      notes: form.value.notes || null
+    }
+
+    let assetId = currentAssetId.value
+    let redirectId = deviceId
+    if (isEdit.value) {
+      const response = await networkApi.update(deviceId, payload)
+      assetId = assetId || response.data?.data?.assetid
+    } else {
+      const response = await networkApi.create(payload)
+      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 = apiError(err, 'Failed to save device')
+  } finally {
+    saving.value = false
+  }
+}
+
+function cancel() {
+  if (isEdit.value) {
+    router.push(`/network/${deviceId}`)
+  } else {
+    router.push('/network')
+  }
+}
+</script>
+
+<style scoped>
+.form-card {
+  max-width: 800px;
+}
+
+fieldset {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+legend {
+  font-weight: 600;
+  padding: 0 0.5rem;
+  color: var(--text);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.form-row:last-child {
+  margin-bottom: 0;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 0.375rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.form-group small {
+  margin-top: 0.25rem;
+  color: var(--text-light);
+  font-size: 0.8rem;
+}
+
+.checkboxes {
+  margin-top: 1rem;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.checkbox-group span {
+  font-weight: 500;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+}
+
+.error-message {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--danger);
+  color: white;
+  border-radius: 6px;
+}
+
+@media (max-width: 600px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/notifications/NotificationForm.vue b/frontend/src/views/notifications/NotificationForm.vue
index a23f561..d985791 100644
--- a/frontend/src/views/notifications/NotificationForm.vue
+++ b/frontend/src/views/notifications/NotificationForm.vue
@@ -1,641 +1,642 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit Notification' : (isDetail ? 'Notification Details' : 'New Notification') }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="saveNotification">
-        <div class="form-group">
-          <label for="notificationtypeid">Type *</label>
-          <select
-            id="notificationtypeid"
-            v-model="form.notificationtypeid"
-            class="form-control"
-            required
-            :disabled="isDetail"
-            @change="onTypeChange"
-          >
-            <option value="">-- Select Type --</option>
-            <option
-              v-for="type in types"
-              :key="type.notificationtypeid"
-              :value="type.notificationtypeid"
-            >
-              {{ type.typename }}
-            </option>
-          </select>
-          <small class="form-hint">Classification type for this notification</small>
-        </div>
-
-        <div class="form-group">
-          <label for="notification">{{ messageLabel }} *</label>
-          <textarea
-            id="notification"
-            v-model="form.notification"
-            class="form-control"
-            rows="4"
-            required
-            :disabled="isDetail"
-            :placeholder="messagePlaceholder"
-          ></textarea>
-        </div>
-
-        <!-- Employee Search - for Recognition and Recertification -->
-        <div v-if="isEmployeeType" class="form-group">
-          <label>Employee(s) *</label>
-          <div class="employee-search-container">
-            <input
-              v-model="employeeSearch"
-              type="text"
-              class="form-control"
-              placeholder="Search by name..."
-              :disabled="isDetail"
-              @input="searchEmployees"
-              @keydown.enter.prevent="addCustomEmployee"
-            />
-            <div v-if="employeeResults.length" class="employee-dropdown">
-              <div
-                v-for="emp in employeeResults"
-                :key="emp.SSO"
-                class="employee-option"
-                @click="selectEmployee(emp)"
-              >
-                <span class="emp-name">{{ emp.First_Name }} {{ emp.Last_Name }}</span>
-                <span class="emp-sso">{{ emp.SSO }}</span>
-              </div>
-            </div>
-          </div>
-          <small class="form-hint">Search and pick, or paste multiple SSOs / names separated by commas and press Enter</small>
-
-          <!-- Selected Employees -->
-          <div v-if="selectedEmployees.length" class="selected-employees">
-            <div
-              v-for="(emp, idx) in selectedEmployees"
-              :key="idx"
-              class="selected-employee"
-            >
-              <span>{{ emp.name }}</span>
-              <button v-if="!isDetail" type="button" class="btn-remove" @click="removeEmployee(idx)">&times;</button>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="!isEmployeeType" class="form-group">
-          <label for="businessunitid">Business Unit</label>
-          <select
-            id="businessunitid"
-            v-model="form.businessunitid"
-            class="form-control"
-            :disabled="isDetail"
-          >
-            <option value="">-- All Business Units --</option>
-            <option
-              v-for="bu in businessUnits"
-              :key="bu.businessunitid"
-              :value="bu.businessunitid"
-            >
-              {{ bu.businessunit }}
-            </option>
-          </select>
-          <small class="form-hint">Leave blank to apply to all</small>
-        </div>
-
-        <div v-if="!isEmployeeType" class="form-group">
-          <label for="appid">Related Application</label>
-          <select
-            id="appid"
-            v-model="form.appid"
-            class="form-control"
-            :disabled="isDetail"
-          >
-            <option value="">-- No Application --</option>
-            <option
-              v-for="app in applications"
-              :key="app.appid"
-              :value="app.appid"
-            >
-              {{ app.appname }}
-            </option>
-          </select>
-          <small class="form-hint">Link to a specific application (e.g., for software updates)</small>
-        </div>
-
-        <div v-if="!isEmployeeType" class="form-group">
-          <label for="ticketnumber">Ticket Number</label>
-          <input
-            id="ticketnumber"
-            v-model="form.ticketnumber"
-            type="text"
-            class="form-control"
-            maxlength="50"
-            :disabled="isDetail"
-            placeholder="GEINC123456 or GECHG123456"
-          />
-          <small class="form-hint">Optional ServiceNow ticket number</small>
-        </div>
-
-        <div class="form-group">
-          <label for="link">More Info URL</label>
-          <input
-            id="link"
-            v-model="form.link"
-            type="url"
-            class="form-control"
-            maxlength="500"
-            :disabled="isDetail"
-            placeholder="https://..."
-          />
-        </div>
-
-        <!-- Time fields - Hidden for Recognition (auto-set) -->
-        <div v-if="!isEmployeeType" class="form-row">
-          <div class="form-group">
-            <label for="starttime">Start Time *</label>
-            <div class="input-group">
-              <input
-                id="starttime"
-                v-model="form.starttime"
-                type="datetime-local"
-                class="form-control"
-                required
-                :disabled="isDetail"
-              />
-              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="setNow('starttime')">
-                Now
-              </button>
-            </div>
-            <small class="form-hint">When notification becomes visible</small>
-          </div>
-
-          <div class="form-group">
-            <label for="endtime">End Time</label>
-            <div class="input-group">
-              <input
-                id="endtime"
-                v-model="form.endtime"
-                type="datetime-local"
-                class="form-control"
-                :disabled="isDetail"
-              />
-              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="setNow('endtime')">
-                Now
-              </button>
-              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="form.endtime = ''">
-                Clear
-              </button>
-            </div>
-            <small class="form-hint">Leave blank for indefinite</small>
-          </div>
-        </div>
-
-        <div class="form-row checkbox-row">
-          <div class="form-group">
-            <label>
-              <input
-                type="checkbox"
-                v-model="form.isactive"
-                :disabled="isDetail"
-              />
-              Active
-            </label>
-            <small class="form-hint">Uncheck to save as draft</small>
-          </div>
-
-          <div class="form-group">
-            <label>
-              <input
-                type="checkbox"
-                v-model="form.isshopfloor"
-                :disabled="isDetail"
-              />
-              Show on Shopfloor Dashboard
-            </label>
-            <small class="form-hint">Display on TV dashboard</small>
-          </div>
-        </div>
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div class="form-actions">
-          <template v-if="isDetail">
-            <router-link :to="`/notifications/${route.params.id}/edit`" class="btn btn-primary">
-              Edit
-            </router-link>
-            <router-link to="/notifications" class="btn btn-secondary">Back</router-link>
-          </template>
-          <template v-else>
-            <button type="submit" class="btn btn-primary" :disabled="saving">
-              {{ saving ? 'Saving...' : (isEdit ? 'Update' : 'Create') }}
-            </button>
-            <router-link to="/notifications" class="btn btn-secondary">Cancel</router-link>
-          </template>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { notificationsApi, applicationsApi, businessUnitsApi, employeesApi } from '@/api'
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => route.name === 'notification-edit')
-const isDetail = computed(() => route.name === 'notification-detail')
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-const types = ref([])
-const businessUnits = ref([])
-const applications = ref([])
-
-// Employee search
-const employeeSearch = ref('')
-const employeeResults = ref([])
-const selectedEmployees = ref([])
-
-const form = ref({
-  notification: '',
-  notificationtypeid: '',
-  businessunitid: '',
-  appid: '',
-  ticketnumber: '',
-  link: '',
-  starttime: '',
-  endtime: '',
-  isactive: true,
-  isshopfloor: false,
-  employeesso: ''
-})
-
-function selectedTypeName() {
-  const selectedType = types.value.find(t => t.notificationtypeid === parseInt(form.value.notificationtypeid))
-  return selectedType?.typename?.toLowerCase() || ''
-}
-
-// Recognition and recertification are the employee-photo types: both show the
-// employee picker, hide the time/BU/app fields, and get a server-computed
-// display window.
-const isRecognition = computed(() => selectedTypeName() === 'recognition')
-const isRecertification = computed(() => selectedTypeName() === 'recertification')
-const isEmployeeType = computed(() => isRecognition.value || isRecertification.value)
-
-const messageLabel = computed(() =>
-  isRecertification.value ? 'Recertification Message'
-    : isRecognition.value ? 'Recognition Message'
-      : 'Notification'
-)
-const messagePlaceholder = computed(() =>
-  isRecertification.value ? 'Enter the recertification message...'
-    : isRecognition.value ? 'Enter the recognition message...'
-      : 'Enter the notification message...'
-)
-
-onMounted(async () => {
-  try {
-    // Load dropdown data in parallel
-    const [typesRes, buRes, appsRes] = await Promise.all([
-      notificationsApi.types.list(),
-      businessUnitsApi.list().catch(() => ({ data: { data: [] } })),
-      applicationsApi.list({ perpage: 500 }).catch(() => ({ data: { data: [] } }))
-    ])
-
-    types.value = typesRes.data.data || []
-    businessUnits.value = buRes.data?.data || []
-    applications.value = appsRes.data?.data || []
-
-    // Load notification if editing or viewing
-    if (route.params.id) {
-      const response = await notificationsApi.get(route.params.id)
-      const n = response.data.data
-
-      form.value = {
-        notification: n.notification || '',
-        notificationtypeid: n.notificationtypeid || '',
-        businessunitid: n.businessunitid || '',
-        appid: n.appid || '',
-        ticketnumber: n.ticketnumber || '',
-        link: n.link || '',
-        starttime: formatDateForInput(n.starttime),
-        endtime: formatDateForInput(n.endtime),
-        isactive: n.isactive !== false,
-        isshopfloor: n.isshopfloor || false,
-        employeesso: n.employeesso || ''
-      }
-
-      // Parse existing employee data: SSOs are comma-joined and names are
-      // ", "-joined, so pair them up by index (one chip per person). Falling
-      // back to the SSO when a name is missing.
-      if (n.employeesso) {
-        const ssos = n.employeesso.split(',')
-        const names = (n.employeename || '').split(',')
-        ssos.forEach((rawSso, i) => {
-          const sso = rawSso.trim()
-          if (!sso) return
-          const name = (names[i] || '').trim() || sso
-          selectedEmployees.value.push({ sso, name })
-        })
-      }
-    } else {
-      // Set default start date to now
-      form.value.starttime = formatDateForInput(new Date().toISOString())
-      // Default to Recognition type
-      const recognitionType = types.value.find(t => t.typename?.toLowerCase() === 'recognition')
-      if (recognitionType) {
-        form.value.notificationtypeid = recognitionType.notificationtypeid
-        onTypeChange()
-      }
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-function formatDateForInput(dateStr) {
-  if (!dateStr) return ''
-  const date = new Date(dateStr)
-  return date.toISOString().slice(0, 16)
-}
-
-function setNow(field) {
-  form.value[field] = formatDateForInput(new Date().toISOString())
-}
-
-function onTypeChange() {
-  // Recognition and recertification get a server-computed display window
-  // (recognition clears at 8 AM Eastern; recertification runs two weeks). Set
-  // start to now and leave end blank so the backend applies the per-type rule.
-  if (isEmployeeType.value) {
-    form.value.starttime = formatDateForInput(new Date().toISOString())
-    form.value.endtime = ''
-  }
-}
-
-// Employee search
-let searchTimeout = null
-async function searchEmployees() {
-  if (searchTimeout) clearTimeout(searchTimeout)
-
-  const query = employeeSearch.value.trim()
-  if (query.length < 2) {
-    employeeResults.value = []
-    return
-  }
-
-  searchTimeout = setTimeout(async () => {
-    try {
-      const response = await employeesApi.search(query)
-      employeeResults.value = response.data.data || []
-    } catch (err) {
-      console.error('Employee search error:', err)
-      employeeResults.value = []
-    }
-  }, 300)
-}
-
-function selectEmployee(emp) {
-  // Check if already selected
-  if (selectedEmployees.value.some(e => e.sso === String(emp.SSO))) {
-    return
-  }
-
-  selectedEmployees.value.push({
-    sso: String(emp.SSO),
-    name: `${emp.First_Name} ${emp.Last_Name}`.trim()
-  })
-
-  employeeSearch.value = ''
-  employeeResults.value = []
-  updateEmployeeSso()
-}
-
-// Add one or many at once. The input may hold a single value or a
-// comma-separated list of SSOs and/or names. Numeric tokens are treated as
-// SSOs and resolved to a real name; everything else is a custom name.
-async function addCustomEmployee() {
-  const raw = employeeSearch.value.trim()
-  if (!raw) return
-
-  const tokens = raw.split(',').map(t => t.trim()).filter(Boolean)
-  for (const token of tokens) {
-    if (/^\d{4,}$/.test(token)) {
-      if (selectedEmployees.value.some(e => e.sso === token)) continue
-      let name = token
-      try {
-        const emp = (await employeesApi.lookup(token)).data.data
-        if (emp) name = `${emp.First_Name} ${emp.Last_Name}`.trim() || token
-      } catch (err) {
-        // SSO not found - keep the number as the label
-      }
-      selectedEmployees.value.push({ sso: token, name })
-    } else {
-      const key = `NAME:${token}`
-      if (selectedEmployees.value.some(e => e.sso === key)) continue
-      selectedEmployees.value.push({ sso: key, name: token })
-    }
-  }
-
-  employeeSearch.value = ''
-  employeeResults.value = []
-  updateEmployeeSso()
-}
-
-function removeEmployee(idx) {
-  selectedEmployees.value.splice(idx, 1)
-  updateEmployeeSso()
-}
-
-function updateEmployeeSso() {
-  form.value.employeesso = selectedEmployees.value.map(e => e.sso).join(',')
-}
-
-async function saveNotification() {
-  error.value = ''
-
-  // Employee-photo types require at least one employee
-  if (isEmployeeType.value && selectedEmployees.value.length === 0) {
-    error.value = `Please select at least one employee for ${isRecertification.value ? 'recertification' : 'recognition'}`
-    return
-  }
-
-  saving.value = true
-
-  try {
-    const data = {
-      notification: form.value.notification,
-      notificationtypeid: parseInt(form.value.notificationtypeid) || null,
-      businessunitid: parseInt(form.value.businessunitid) || null,
-      appid: parseInt(form.value.appid) || null,
-      ticketnumber: form.value.ticketnumber || null,
-      link: form.value.link || null,
-      starttime: form.value.starttime ? new Date(form.value.starttime).toISOString() : null,
-      endtime: form.value.endtime ? new Date(form.value.endtime).toISOString() : null,
-      isactive: form.value.isactive,
-      isshopfloor: form.value.isshopfloor,
-      employeesso: form.value.employeesso || null
-    }
-
-    // For employee-photo types, also send employeename
-    if (isEmployeeType.value && selectedEmployees.value.length > 0) {
-      data.employeename = selectedEmployees.value.map(e => e.name).join(', ')
-    }
-
-    if (isEdit.value) {
-      await notificationsApi.update(route.params.id, data)
-    } else {
-      await notificationsApi.create(data)
-    }
-
-    router.push('/notifications')
-  } catch (err) {
-    console.error('Error saving notification:', err)
-    error.value = err.response?.data?.message || 'Failed to save notification'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.input-group {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.input-group .form-control {
-  flex: 1;
-}
-
-.input-group .btn {
-  flex-shrink: 0;
-}
-
-.checkbox-row {
-  display: flex;
-  gap: 2rem;
-  margin-top: 1rem;
-}
-
-.checkbox-row .form-group {
-  flex: none;
-}
-
-.checkbox-row label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.form-hint {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--text-light);
-}
-
-.form-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-}
-
-/* Employee search styles */
-.employee-search-container {
-  position: relative;
-}
-
-.employee-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--bg-card-solid, #1a1a1a);
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  max-height: 200px;
-  overflow-y: auto;
-  z-index: 100;
-}
-
-.employee-option {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.employee-option:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.emp-name {
-  font-weight: 500;
-}
-
-.emp-sso {
-  font-size: 0.85rem;
-  color: var(--text-light);
-}
-
-.selected-employees {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.selected-employee {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--primary);
-  color: white;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.9rem;
-}
-
-.btn-remove {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  padding: 0;
-  font-size: 1.2rem;
-  line-height: 1;
-  opacity: 0.7;
-}
-
-.btn-remove:hover {
-  opacity: 1;
-}
-
-@media (max-width: 600px) {
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .checkbox-row {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Notification' : (isDetail ? 'Notification Details' : 'New Notification') }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveNotification">
+        <div class="form-group">
+          <label for="notificationtypeid">Type *</label>
+          <select
+            id="notificationtypeid"
+            v-model="form.notificationtypeid"
+            class="form-control"
+            required
+            :disabled="isDetail"
+            @change="onTypeChange"
+          >
+            <option value="">-- Select Type --</option>
+            <option
+              v-for="type in types"
+              :key="type.notificationtypeid"
+              :value="type.notificationtypeid"
+            >
+              {{ type.typename }}
+            </option>
+          </select>
+          <small class="form-hint">Classification type for this notification</small>
+        </div>
+
+        <div class="form-group">
+          <label for="notification">{{ messageLabel }} *</label>
+          <textarea
+            id="notification"
+            v-model="form.notification"
+            class="form-control"
+            rows="4"
+            required
+            :disabled="isDetail"
+            :placeholder="messagePlaceholder"
+          ></textarea>
+        </div>
+
+        <!-- Employee Search - for Recognition and Recertification -->
+        <div v-if="isEmployeeType" class="form-group">
+          <label>Employee(s) *</label>
+          <div class="employee-search-container">
+            <input
+              v-model="employeeSearch"
+              type="text"
+              class="form-control"
+              placeholder="Search by name..."
+              :disabled="isDetail"
+              @input="searchEmployees"
+              @keydown.enter.prevent="addCustomEmployee"
+            />
+            <div v-if="employeeResults.length" class="employee-dropdown">
+              <div
+                v-for="emp in employeeResults"
+                :key="emp.SSO"
+                class="employee-option"
+                @click="selectEmployee(emp)"
+              >
+                <span class="emp-name">{{ emp.First_Name }} {{ emp.Last_Name }}</span>
+                <span class="emp-sso">{{ emp.SSO }}</span>
+              </div>
+            </div>
+          </div>
+          <small class="form-hint">Search and pick, or paste multiple SSOs / names separated by commas and press Enter</small>
+
+          <!-- Selected Employees -->
+          <div v-if="selectedEmployees.length" class="selected-employees">
+            <div
+              v-for="(emp, idx) in selectedEmployees"
+              :key="idx"
+              class="selected-employee"
+            >
+              <span>{{ emp.name }}</span>
+              <button v-if="!isDetail" type="button" class="btn-remove" @click="removeEmployee(idx)">&times;</button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="!isEmployeeType" class="form-group">
+          <label for="businessunitid">Business Unit</label>
+          <select
+            id="businessunitid"
+            v-model="form.businessunitid"
+            class="form-control"
+            :disabled="isDetail"
+          >
+            <option value="">-- All Business Units --</option>
+            <option
+              v-for="bu in businessUnits"
+              :key="bu.businessunitid"
+              :value="bu.businessunitid"
+            >
+              {{ bu.businessunit }}
+            </option>
+          </select>
+          <small class="form-hint">Leave blank to apply to all</small>
+        </div>
+
+        <div v-if="!isEmployeeType" class="form-group">
+          <label for="appid">Related Application</label>
+          <select
+            id="appid"
+            v-model="form.appid"
+            class="form-control"
+            :disabled="isDetail"
+          >
+            <option value="">-- No Application --</option>
+            <option
+              v-for="app in applications"
+              :key="app.appid"
+              :value="app.appid"
+            >
+              {{ app.appname }}
+            </option>
+          </select>
+          <small class="form-hint">Link to a specific application (e.g., for software updates)</small>
+        </div>
+
+        <div v-if="!isEmployeeType" class="form-group">
+          <label for="ticketnumber">Ticket Number</label>
+          <input
+            id="ticketnumber"
+            v-model="form.ticketnumber"
+            type="text"
+            class="form-control"
+            maxlength="50"
+            :disabled="isDetail"
+            placeholder="GEINC123456 or GECHG123456"
+          />
+          <small class="form-hint">Optional ServiceNow ticket number</small>
+        </div>
+
+        <div class="form-group">
+          <label for="link">More Info URL</label>
+          <input
+            id="link"
+            v-model="form.link"
+            type="url"
+            class="form-control"
+            maxlength="500"
+            :disabled="isDetail"
+            placeholder="https://..."
+          />
+        </div>
+
+        <!-- Time fields - Hidden for Recognition (auto-set) -->
+        <div v-if="!isEmployeeType" class="form-row">
+          <div class="form-group">
+            <label for="starttime">Start Time *</label>
+            <div class="input-group">
+              <input
+                id="starttime"
+                v-model="form.starttime"
+                type="datetime-local"
+                class="form-control"
+                required
+                :disabled="isDetail"
+              />
+              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="setNow('starttime')">
+                Now
+              </button>
+            </div>
+            <small class="form-hint">When notification becomes visible</small>
+          </div>
+
+          <div class="form-group">
+            <label for="endtime">End Time</label>
+            <div class="input-group">
+              <input
+                id="endtime"
+                v-model="form.endtime"
+                type="datetime-local"
+                class="form-control"
+                :disabled="isDetail"
+              />
+              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="setNow('endtime')">
+                Now
+              </button>
+              <button v-if="!isDetail" type="button" class="btn btn-secondary" @click="form.endtime = ''">
+                Clear
+              </button>
+            </div>
+            <small class="form-hint">Leave blank for indefinite</small>
+          </div>
+        </div>
+
+        <div class="form-row checkbox-row">
+          <div class="form-group">
+            <label>
+              <input
+                type="checkbox"
+                v-model="form.isactive"
+                :disabled="isDetail"
+              />
+              Active
+            </label>
+            <small class="form-hint">Uncheck to save as draft</small>
+          </div>
+
+          <div class="form-group">
+            <label>
+              <input
+                type="checkbox"
+                v-model="form.isshopfloor"
+                :disabled="isDetail"
+              />
+              Show on Shopfloor Dashboard
+            </label>
+            <small class="form-hint">Display on TV dashboard</small>
+          </div>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div class="form-actions">
+          <template v-if="isDetail">
+            <router-link :to="`/notifications/${route.params.id}/edit`" class="btn btn-primary">
+              Edit
+            </router-link>
+            <router-link to="/notifications" class="btn btn-secondary">Back</router-link>
+          </template>
+          <template v-else>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : (isEdit ? 'Update' : 'Create') }}
+            </button>
+            <router-link to="/notifications" class="btn btn-secondary">Cancel</router-link>
+          </template>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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()
+
+const isEdit = computed(() => route.name === 'notification-edit')
+const isDetail = computed(() => route.name === 'notification-detail')
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const types = ref([])
+const businessUnits = ref([])
+const applications = ref([])
+
+// Employee search
+const employeeSearch = ref('')
+const employeeResults = ref([])
+const selectedEmployees = ref([])
+
+const form = ref({
+  notification: '',
+  notificationtypeid: '',
+  businessunitid: '',
+  appid: '',
+  ticketnumber: '',
+  link: '',
+  starttime: '',
+  endtime: '',
+  isactive: true,
+  isshopfloor: false,
+  employeesso: ''
+})
+
+function selectedTypeName() {
+  const selectedType = types.value.find(t => t.notificationtypeid === parseInt(form.value.notificationtypeid))
+  return selectedType?.typename?.toLowerCase() || ''
+}
+
+// Recognition and recertification are the employee-photo types: both show the
+// employee picker, hide the time/BU/app fields, and get a server-computed
+// display window.
+const isRecognition = computed(() => selectedTypeName() === 'recognition')
+const isRecertification = computed(() => selectedTypeName() === 'recertification')
+const isEmployeeType = computed(() => isRecognition.value || isRecertification.value)
+
+const messageLabel = computed(() =>
+  isRecertification.value ? 'Recertification Message'
+    : isRecognition.value ? 'Recognition Message'
+      : 'Notification'
+)
+const messagePlaceholder = computed(() =>
+  isRecertification.value ? 'Enter the recertification message...'
+    : isRecognition.value ? 'Enter the recognition message...'
+      : 'Enter the notification message...'
+)
+
+onMounted(async () => {
+  try {
+    // Load dropdown data in parallel
+    const [typesRes, buRes, appsRes] = await Promise.all([
+      notificationsApi.types.list(),
+      businessUnitsApi.list().catch(() => ({ data: { data: [] } })),
+      applicationsApi.list({ perpage: 500 }).catch(() => ({ data: { data: [] } }))
+    ])
+
+    types.value = typesRes.data.data || []
+    businessUnits.value = buRes.data?.data || []
+    applications.value = appsRes.data?.data || []
+
+    // Load notification if editing or viewing
+    if (route.params.id) {
+      const response = await notificationsApi.get(route.params.id)
+      const n = response.data.data
+
+      form.value = {
+        notification: n.notification || '',
+        notificationtypeid: n.notificationtypeid || '',
+        businessunitid: n.businessunitid || '',
+        appid: n.appid || '',
+        ticketnumber: n.ticketnumber || '',
+        link: n.link || '',
+        starttime: formatDateForInput(n.starttime),
+        endtime: formatDateForInput(n.endtime),
+        isactive: n.isactive !== false,
+        isshopfloor: n.isshopfloor || false,
+        employeesso: n.employeesso || ''
+      }
+
+      // Parse existing employee data: SSOs are comma-joined and names are
+      // ", "-joined, so pair them up by index (one chip per person). Falling
+      // back to the SSO when a name is missing.
+      if (n.employeesso) {
+        const ssos = n.employeesso.split(',')
+        const names = (n.employeename || '').split(',')
+        ssos.forEach((rawSso, i) => {
+          const sso = rawSso.trim()
+          if (!sso) return
+          const name = (names[i] || '').trim() || sso
+          selectedEmployees.value.push({ sso, name })
+        })
+      }
+    } else {
+      // Set default start date to now
+      form.value.starttime = formatDateForInput(new Date().toISOString())
+      // Default to Recognition type
+      const recognitionType = types.value.find(t => t.typename?.toLowerCase() === 'recognition')
+      if (recognitionType) {
+        form.value.notificationtypeid = recognitionType.notificationtypeid
+        onTypeChange()
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function formatDateForInput(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  return date.toISOString().slice(0, 16)
+}
+
+function setNow(field) {
+  form.value[field] = formatDateForInput(new Date().toISOString())
+}
+
+function onTypeChange() {
+  // Recognition and recertification get a server-computed display window
+  // (recognition clears at 8 AM Eastern; recertification runs two weeks). Set
+  // start to now and leave end blank so the backend applies the per-type rule.
+  if (isEmployeeType.value) {
+    form.value.starttime = formatDateForInput(new Date().toISOString())
+    form.value.endtime = ''
+  }
+}
+
+// Employee search
+let searchTimeout = null
+async function searchEmployees() {
+  if (searchTimeout) clearTimeout(searchTimeout)
+
+  const query = employeeSearch.value.trim()
+  if (query.length < 2) {
+    employeeResults.value = []
+    return
+  }
+
+  searchTimeout = setTimeout(async () => {
+    try {
+      const response = await employeesApi.search(query)
+      employeeResults.value = response.data.data || []
+    } catch (err) {
+      console.error('Employee search error:', err)
+      employeeResults.value = []
+    }
+  }, 300)
+}
+
+function selectEmployee(emp) {
+  // Check if already selected
+  if (selectedEmployees.value.some(e => e.sso === String(emp.SSO))) {
+    return
+  }
+
+  selectedEmployees.value.push({
+    sso: String(emp.SSO),
+    name: `${emp.First_Name} ${emp.Last_Name}`.trim()
+  })
+
+  employeeSearch.value = ''
+  employeeResults.value = []
+  updateEmployeeSso()
+}
+
+// Add one or many at once. The input may hold a single value or a
+// comma-separated list of SSOs and/or names. Numeric tokens are treated as
+// SSOs and resolved to a real name; everything else is a custom name.
+async function addCustomEmployee() {
+  const raw = employeeSearch.value.trim()
+  if (!raw) return
+
+  const tokens = raw.split(',').map(t => t.trim()).filter(Boolean)
+  for (const token of tokens) {
+    if (/^\d{4,}$/.test(token)) {
+      if (selectedEmployees.value.some(e => e.sso === token)) continue
+      let name = token
+      try {
+        const emp = (await employeesApi.lookup(token)).data.data
+        if (emp) name = `${emp.First_Name} ${emp.Last_Name}`.trim() || token
+      } catch (err) {
+        // SSO not found - keep the number as the label
+      }
+      selectedEmployees.value.push({ sso: token, name })
+    } else {
+      const key = `NAME:${token}`
+      if (selectedEmployees.value.some(e => e.sso === key)) continue
+      selectedEmployees.value.push({ sso: key, name: token })
+    }
+  }
+
+  employeeSearch.value = ''
+  employeeResults.value = []
+  updateEmployeeSso()
+}
+
+function removeEmployee(idx) {
+  selectedEmployees.value.splice(idx, 1)
+  updateEmployeeSso()
+}
+
+function updateEmployeeSso() {
+  form.value.employeesso = selectedEmployees.value.map(e => e.sso).join(',')
+}
+
+async function saveNotification() {
+  error.value = ''
+
+  // Employee-photo types require at least one employee
+  if (isEmployeeType.value && selectedEmployees.value.length === 0) {
+    error.value = `Please select at least one employee for ${isRecertification.value ? 'recertification' : 'recognition'}`
+    return
+  }
+
+  saving.value = true
+
+  try {
+    const data = {
+      notification: form.value.notification,
+      notificationtypeid: parseInt(form.value.notificationtypeid) || null,
+      businessunitid: parseInt(form.value.businessunitid) || null,
+      appid: parseInt(form.value.appid) || null,
+      ticketnumber: form.value.ticketnumber || null,
+      link: form.value.link || null,
+      starttime: form.value.starttime ? new Date(form.value.starttime).toISOString() : null,
+      endtime: form.value.endtime ? new Date(form.value.endtime).toISOString() : null,
+      isactive: form.value.isactive,
+      isshopfloor: form.value.isshopfloor,
+      employeesso: form.value.employeesso || null
+    }
+
+    // For employee-photo types, also send employeename
+    if (isEmployeeType.value && selectedEmployees.value.length > 0) {
+      data.employeename = selectedEmployees.value.map(e => e.name).join(', ')
+    }
+
+    if (isEdit.value) {
+      await notificationsApi.update(route.params.id, data)
+    } else {
+      await notificationsApi.create(data)
+    }
+
+    router.push('/notifications')
+  } catch (err) {
+    console.error('Error saving notification:', err)
+    error.value = apiError(err, 'Failed to save notification')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.input-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.input-group .form-control {
+  flex: 1;
+}
+
+.input-group .btn {
+  flex-shrink: 0;
+}
+
+.checkbox-row {
+  display: flex;
+  gap: 2rem;
+  margin-top: 1rem;
+}
+
+.checkbox-row .form-group {
+  flex: none;
+}
+
+.checkbox-row label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light);
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+/* Employee search styles */
+.employee-search-container {
+  position: relative;
+}
+
+.employee-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-card-solid, #1a1a1a);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 100;
+}
+
+.employee-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.employee-option:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.emp-name {
+  font-weight: 500;
+}
+
+.emp-sso {
+  font-size: 0.85rem;
+  color: var(--text-light);
+}
+
+.selected-employees {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.selected-employee {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--primary);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.btn-remove {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 0;
+  font-size: 1.2rem;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.btn-remove:hover {
+  opacity: 1;
+}
+
+@media (max-width: 600px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .checkbox-row {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+</style>
diff --git a/frontend/src/views/notifications/NotificationTypesList.vue b/frontend/src/views/notifications/NotificationTypesList.vue
index e7058e2..6d47777 100644
--- a/frontend/src/views/notifications/NotificationTypesList.vue
+++ b/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
   }
diff --git a/frontend/src/views/pcs/PCDetail.vue b/frontend/src/views/pcs/PCDetail.vue
index 6dd31e3..368ef1c 100644
--- a/frontend/src/views/pcs/PCDetail.vue
+++ b/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.
-const heroWarranty = computed(() => {
-  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()
-}
+// Warranty fetch + hero badge (shared across asset detail pages).
+const { warranties, heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
 
 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)
     }
-
-    // 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)
-      }
-    }
+    // Warranties load via useWarrantyBadge (watches computer.assetid).
   } catch (error) {
     console.error('Error loading computer:', error)
   } finally {
diff --git a/frontend/src/views/pcs/PCForm.vue b/frontend/src/views/pcs/PCForm.vue
index e9f4e89..f42bb7d 100644
--- a/frontend/src/views/pcs/PCForm.vue
+++ b/frontend/src/views/pcs/PCForm.vue
@@ -1,608 +1,609 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit PC' : 'New PC' }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="savePC">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="machinenumber">PC Number *</label>
-            <input
-              id="machinenumber"
-              v-model="form.machinenumber"
-              type="text"
-              class="form-control"
-              required
-              @input="onPcNumberInput"
-            />
-            <small class="form-hint">Defaults to the serial number; editable</small>
-          </div>
-
-          <div class="form-group">
-            <label for="alias">Alias</label>
-            <input
-              id="alias"
-              v-model="form.alias"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group" v-if="isEnabled('fqdn', 'computer')">
-            <label for="hostname">Hostname</label>
-            <input
-              id="hostname"
-              v-model="form.hostname"
-              type="text"
-              class="form-control"
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="serialnumber">Serial Number</label>
-            <input
-              id="serialnumber"
-              v-model="form.serialnumber"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row" v-if="isEnabled('gaugelabreference', 'computer') || isEnabled('maintenancereference', 'computer')">
-          <div class="form-group" v-if="isEnabled('gaugelabreference', 'computer')">
-            <label for="gaugelabreference">Gauge Lab Reference</label>
-            <input
-              id="gaugelabreference"
-              v-model="form.gaugelabreference"
-              type="text"
-              class="form-control"
-            />
-          </div>
-
-          <div class="form-group" v-if="isEnabled('maintenancereference', 'computer')">
-            <label for="maintenancereference">Maintenance Reference</label>
-            <input
-              id="maintenancereference"
-              v-model="form.maintenancereference"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="machinetypeid">PC Type *</label>
-            <select
-              id="machinetypeid"
-              v-model="form.machinetypeid"
-              class="form-control"
-              required
-              @change="form.modelnumberid = ''"
-            >
-              <option value="">Select type...</option>
-              <option
-                v-for="pt in pcTypes"
-                :key="pt.computertypeid"
-                :value="pt.computertypeid"
-              >
-                {{ pt.computertype }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="osid">Operating System</label>
-            <select
-              id="osid"
-              v-model="form.osid"
-              class="form-control"
-            >
-              <option value="">Select OS...</option>
-              <option
-                v-for="os in operatingsystems"
-                :key="os.osid"
-                :value="os.osid"
-              >
-                {{ os.osname }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="statusid">Status</label>
-            <select
-              id="statusid"
-              v-model="form.statusid"
-              class="form-control"
-            >
-              <option value="">Select status...</option>
-              <option
-                v-for="s in statuses"
-                :key="s.statusid"
-                :value="s.statusid"
-              >
-                {{ s.status }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="locationid">Location</label>
-            <select
-              id="locationid"
-              v-model="form.locationid"
-              class="form-control"
-            >
-              <option value="">Select location...</option>
-              <option
-                v-for="l in locations"
-                :key="l.locationid"
-                :value="l.locationid"
-              >
-                {{ l.location }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="vendorid">Vendor</label>
-            <select
-              id="vendorid"
-              v-model="form.vendorid"
-              class="form-control"
-              @change="form.modelnumberid = ''"
-            >
-              <option value="">Select vendor...</option>
-              <option
-                v-for="v in vendors"
-                :key="v.vendorid"
-                :value="v.vendorid"
-              >
-                {{ v.vendor }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <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 filteredModels"
-                :key="m.modelnumberid"
-                :value="m.modelnumberid"
-              >
-                {{ m.modelnumber }}
-              </option>
-            </select>
-            <small v-if="!form.vendorid && !form.machinetypeid" class="form-hint">
-              Select vendor or PC type to filter models
-            </small>
-          </div>
-        </div>
-
-        <!-- PC-specific fields -->
-        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Network Settings</h4>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="ipaddress">IP Address</label>
-            <input
-              id="ipaddress"
-              v-model="form.ipaddress"
-              type="text"
-              class="form-control"
-              placeholder="e.g., 192.168.1.100"
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="loggedinuser">Logged In User</label>
-            <input
-              id="loggedinuser"
-              v-model="form.loggedinuser"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>Remote Access Protocols</label>
-          <div class="protocol-list">
-            <label v-for="p in protocols" :key="p.protocolid" class="protocol-item">
-              <input type="checkbox" :checked="isProtocolOn(p.protocolid)" @change="toggleProtocol(p.protocolid, $event.target.checked)" />
-              <span>{{ p.name }}</span>
-              <input
-                v-if="isProtocolOn(p.protocolid)"
-                type="number"
-                class="port-override"
-                :value="protocolPort(p.protocolid)"
-                :placeholder="p.defaultport || 'port'"
-                min="1"
-                max="65535"
-                title="Port override (blank = default)"
-                @input="setProtocolPort(p.protocolid, $event.target.value)"
-              />
-            </label>
-            <span v-if="!protocols.length" class="muted">No protocols defined. Add them under Settings &gt; PC Access Protocols.</span>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="notes">Notes</label>
-          <textarea
-            id="notes"
-            v-model="form.notes"
-            class="form-control"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <!-- Map Location Picker -->
-        <div class="form-group">
-          <label>Map Location</label>
-          <div class="map-location-control">
-            <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
-              Position: {{ form.mapx }}, {{ form.mapy }}
-              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
-            </div>
-            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
-              Set Location on Map
-            </button>
-          </div>
-        </div>
-
-        <!-- Map Picker Modal -->
-        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
-          <div class="map-modal-content">
-            <ShopFloorMap
-              :pickerMode="true"
-              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
-              :theme="currentTheme"
-              @positionPicked="handlePositionPicked"
-            />
-          </div>
-          <template #footer>
-            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
-            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
-          </template>
-        </Modal>
-
-        <!-- Site-defined custom fields for computers -->
-        <CustomFieldsInputs ref="customFieldsRef" :assettypeid="COMPUTER_ASSETTYPEID" :assetid="currentAssetId" />
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : 'Save PC' }}
-          </button>
-          <router-link to="/pcs" class="btn btn-secondary">Cancel</router-link>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { computersApi, assetsApi, vendorsApi, locationsApi, modelsApi, operatingsystemsApi } 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'
-
-const { isEnabled } = useIdentifierFlags()
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => !!route.params.id)
-
-// Seeded asset-type id for computers (see /api/assets/types). Custom-field
-// values are keyed by the underlying asset id, captured on load / create.
-const COMPUTER_ASSETTYPEID = 2
-const customFieldsRef = ref(null)
-const currentAssetId = ref(null)
-
-// PC Number (assetnumber) defaults to the serial number while the user hasn't
-// typed their own. Editable; only auto-fills on a new PC.
-const manualPcNumber = ref(false)
-function onPcNumberInput() {
-  manualPcNumber.value = true
-}
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-const showMapPicker = ref(false)
-const tempMapPosition = ref(null)
-
-const form = ref({
-  machinenumber: '',
-  alias: '',
-  hostname: '',
-  serialnumber: '',
-  gaugelabreference: '',
-  maintenancereference: '',
-  machinetypeid: '',
-  statusid: '',
-  vendorid: '',
-  modelnumberid: '',
-  locationid: '',
-  osid: '',
-  loggedinuser: '',
-  accessmethods: [],
-  notes: '',
-  mapx: null,
-  mapy: null,
-  ipaddress: ''
-})
-
-const pcTypes = ref([])
-const protocols = ref([])
-const statuses = ref([])
-
-// Access-method editor helpers (form.accessmethods = [{protocolid, portoverride}])
-function isProtocolOn(protocolid) {
-  return form.value.accessmethods.some(a => a.protocolid === protocolid)
-}
-function protocolPort(protocolid) {
-  const found = form.value.accessmethods.find(a => a.protocolid === protocolid)
-  return found && found.portoverride != null ? found.portoverride : ''
-}
-function toggleProtocol(protocolid, on) {
-  if (on) {
-    if (!isProtocolOn(protocolid)) {
-      form.value.accessmethods.push({ protocolid, portoverride: null })
-    }
-  } else {
-    form.value.accessmethods = form.value.accessmethods.filter(a => a.protocolid !== protocolid)
-  }
-}
-function setProtocolPort(protocolid, value) {
-  const found = form.value.accessmethods.find(a => a.protocolid === protocolid)
-  if (found) {
-    const n = parseInt(value, 10)
-    found.portoverride = Number.isFinite(n) ? n : null
-  }
-}
-const vendors = ref([])
-const models = ref([])
-const locations = ref([])
-const operatingsystems = ref([])
-
-// Default PC Number to serial while the user hasn't typed their own (new PC only)
-watch(() => form.value.serialnumber, (serial) => {
-  if (!isEdit.value && !manualPcNumber.value && serial) {
-    form.value.machinenumber = serial
-  }
-})
-
-// Filter models by selected vendor and PC type
-const filteredModels = computed(() => {
-  // filter by vendor only (PC type now maps to computertypeid, a different id
-  // space than a model's machinetypeid)
-  if (!form.value.vendorid) return models.value
-  return models.value.filter(m => m.vendorid === form.value.vendorid)
-})
-
-onMounted(async () => {
-  try {
-    // Load reference data
-    // perpage 100 so dropdowns aren't truncated to the default 20-row page
-    const [ptRes, statusRes, vendorRes, allModels, locRes, osRes, protoRes] = await Promise.all([
-      computersApi.types.list({ perpage: 100 }),
-      assetsApi.statuses.list(),
-      vendorsApi.list({ perpage: 100 }),
-      modelsApi.listAll(),  // backend caps perpage at 100; page through all
-      locationsApi.list({ perpage: 100 }),
-      operatingsystemsApi.list({ perpage: 100 }),
-      computersApi.protocols.list()
-    ])
-
-    pcTypes.value = ptRes.data.data || []
-    statuses.value = statusRes.data.data || []
-    vendors.value = vendorRes.data.data || []
-    models.value = allModels
-    locations.value = locRes.data.data || []
-    operatingsystems.value = osRes.data.data || []
-    protocols.value = protoRes.data.data || []
-
-    // Load PC if editing (asset-based shape: extension under pc.computer)
-    if (isEdit.value) {
-      const response = await computersApi.get(route.params.id)
-      const pc = response.data.data
-      const ext = pc.computer || {}
-      currentAssetId.value = pc.assetid || null
-
-      const primaryComm = pc.communications?.find(c => c.isprimary) || pc.communications?.[0]
-
-      form.value = {
-        machinenumber: pc.assetnumber || '',
-        alias: pc.name && pc.name.toUpperCase() !== 'NONE' ? pc.name : '',
-        hostname: ext.hostname || '',
-        serialnumber: pc.serialnumber || '',
-        gaugelabreference: pc.gaugelabreference || '',
-        maintenancereference: pc.maintenancereference || '',
-        machinetypeid: ext.computertypeid || '',
-        statusid: pc.statusid || '',
-        vendorid: ext.vendorid || '',
-        modelnumberid: ext.modelnumberid || '',
-        locationid: pc.locationid || '',
-        osid: ext.osid || '',
-        loggedinuser: ext.loggedinuser || '',
-        accessmethods: (pc.accessmethods || []).map(a => ({
-          protocolid: a.protocolid,
-          portoverride: a.portoverride ?? null
-        })),
-        notes: pc.notes || '',
-        mapx: pc.mapx ?? null,
-        mapy: pc.mapy ?? null,
-        ipaddress: primaryComm?.ipaddress || ''
-      }
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-function handlePositionPicked(position) {
-  tempMapPosition.value = position
-}
-
-function confirmMapPosition() {
-  if (tempMapPosition.value) {
-    form.value.mapx = tempMapPosition.value.left
-    form.value.mapy = tempMapPosition.value.top
-  }
-  showMapPicker.value = false
-}
-
-function clearMapPosition() {
-  form.value.mapx = null
-  form.value.mapy = null
-  tempMapPosition.value = null
-}
-
-async function savePC() {
-  error.value = ''
-  saving.value = true
-
-  try {
-    // One payload for the computers plugin (asset core + computer extension +
-    // primary IP). "PC Number" is the business identifier (assetnumber).
-    const payload = {
-      assetnumber: form.value.machinenumber,
-      hostname: form.value.hostname || null,
-      serialnumber: form.value.serialnumber || null,
-      gaugelabreference: form.value.gaugelabreference || null,
-      maintenancereference: form.value.maintenancereference || null,
-      computertypeid: form.value.machinetypeid || null,
-      statusid: form.value.statusid || null,
-      vendorid: form.value.vendorid || null,
-      modelnumberid: form.value.modelnumberid || null,
-      locationid: form.value.locationid || null,
-      osid: form.value.osid || null,
-      loggedinuser: form.value.loggedinuser || null,
-      accessmethods: form.value.accessmethods,
-      notes: form.value.notes || null,
-      ipaddress: form.value.ipaddress || null,
-      mapx: form.value.mapx,
-      mapy: form.value.mapy
-    }
-    // only set display name when an alias is given, so we don't clobber it
-    if (form.value.alias) {
-      payload.name = form.value.alias
-    }
-
-    let assetId = currentAssetId.value
-    if (isEdit.value) {
-      const response = await computersApi.update(route.params.id, payload)
-      assetId = assetId || response.data?.data?.assetid || response.data?.data?.asset?.assetid
-    } else {
-      const response = await computersApi.create(payload)
-      assetId = response.data?.data?.assetid || response.data?.data?.asset?.assetid
-    }
-
-    // Persist any custom-field values now that we have an asset id.
-    if (assetId && customFieldsRef.value) {
-      try {
-        await customFieldsRef.value.save(assetId)
-      } catch (cfErr) {
-        console.error('Error saving custom fields:', cfErr)
-      }
-    }
-
-    router.push('/pcs')
-  } catch (err) {
-    console.error('Error saving PC:', err)
-    error.value = err.response?.data?.message || 'Failed to save PC'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.protocol-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 14px;
-}
-.protocol-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.protocol-item .port-override {
-  width: 78px;
-  padding: 4px 6px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-}
-.muted {
-  color: var(--text-light);
-}
-
-.map-location-control {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.current-position {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  font-family: monospace;
-  color: var(--text);
-}
-
-.map-modal-content {
-  height: calc(90vh - 140px);
-}
-
-.map-modal-content :deep(.shopfloor-map) {
-  height: 100%;
-}
-
-.map-modal-content :deep(.map-container) {
-  height: calc(100% - 50px);
-}
-
-.form-hint {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--text-light, #666);
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit PC' : 'New PC' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="savePC">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">PC Number *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+              @input="onPcNumberInput"
+            />
+            <small class="form-hint">Defaults to the serial number; editable</small>
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group" v-if="isEnabled('fqdn', 'computer')">
+            <label for="hostname">Hostname</label>
+            <input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              class="form-control"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="serialnumber">Serial Number</label>
+            <input
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row" v-if="isEnabled('gaugelabreference', 'computer') || isEnabled('maintenancereference', 'computer')">
+          <div class="form-group" v-if="isEnabled('gaugelabreference', 'computer')">
+            <label for="gaugelabreference">Gauge Lab Reference</label>
+            <input
+              id="gaugelabreference"
+              v-model="form.gaugelabreference"
+              type="text"
+              class="form-control"
+            />
+          </div>
+
+          <div class="form-group" v-if="isEnabled('maintenancereference', 'computer')">
+            <label for="maintenancereference">Maintenance Reference</label>
+            <input
+              id="maintenancereference"
+              v-model="form.maintenancereference"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinetypeid">PC Type *</label>
+            <select
+              id="machinetypeid"
+              v-model="form.machinetypeid"
+              class="form-control"
+              required
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="pt in pcTypes"
+                :key="pt.computertypeid"
+                :value="pt.computertypeid"
+              >
+                {{ pt.computertype }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="osid">Operating System</label>
+            <select
+              id="osid"
+              v-model="form.osid"
+              class="form-control"
+            >
+              <option value="">Select OS...</option>
+              <option
+                v-for="os in operatingsystems"
+                :key="os.osid"
+                :value="os.osid"
+              >
+                {{ os.osname }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="statusid">Status</label>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="locationid">Location</label>
+            <select
+              id="locationid"
+              v-model="form.locationid"
+              class="form-control"
+            >
+              <option value="">Select location...</option>
+              <option
+                v-for="l in locations"
+                :key="l.locationid"
+                :value="l.locationid"
+              >
+                {{ l.location }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.vendorid"
+              class="form-control"
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <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 filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small v-if="!form.vendorid && !form.machinetypeid" class="form-hint">
+              Select vendor or PC type to filter models
+            </small>
+          </div>
+        </div>
+
+        <!-- PC-specific fields -->
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Network Settings</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="ipaddress">IP Address</label>
+            <input
+              id="ipaddress"
+              v-model="form.ipaddress"
+              type="text"
+              class="form-control"
+              placeholder="e.g., 192.168.1.100"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="loggedinuser">Logged In User</label>
+            <input
+              id="loggedinuser"
+              v-model="form.loggedinuser"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>Remote Access Protocols</label>
+          <div class="protocol-list">
+            <label v-for="p in protocols" :key="p.protocolid" class="protocol-item">
+              <input type="checkbox" :checked="isProtocolOn(p.protocolid)" @change="toggleProtocol(p.protocolid, $event.target.checked)" />
+              <span>{{ p.name }}</span>
+              <input
+                v-if="isProtocolOn(p.protocolid)"
+                type="number"
+                class="port-override"
+                :value="protocolPort(p.protocolid)"
+                :placeholder="p.defaultport || 'port'"
+                min="1"
+                max="65535"
+                title="Port override (blank = default)"
+                @input="setProtocolPort(p.protocolid, $event.target.value)"
+              />
+            </label>
+            <span v-if="!protocols.length" class="muted">No protocols defined. Add them under Settings &gt; PC Access Protocols.</span>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Map Location Picker -->
+        <div class="form-group">
+          <label>Map Location</label>
+          <div class="map-location-control">
+            <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
+              Position: {{ form.mapx }}, {{ form.mapy }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
+              :theme="currentTheme"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <!-- Site-defined custom fields for computers -->
+        <CustomFieldsInputs ref="customFieldsRef" :assettypeid="COMPUTER_ASSETTYPEID" :assetid="currentAssetId" />
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save PC' }}
+          </button>
+          <router-link to="/pcs" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { computersApi, assetsApi, vendorsApi, locationsApi, modelsApi, operatingsystemsApi } 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'
+import { apiError } from '../../utils/apiError'
+
+const { isEnabled } = useIdentifierFlags()
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+// Seeded asset-type id for computers (see /api/assets/types). Custom-field
+// values are keyed by the underlying asset id, captured on load / create.
+const COMPUTER_ASSETTYPEID = 2
+const customFieldsRef = ref(null)
+const currentAssetId = ref(null)
+
+// PC Number (assetnumber) defaults to the serial number while the user hasn't
+// typed their own. Editable; only auto-fills on a new PC.
+const manualPcNumber = ref(false)
+function onPcNumberInput() {
+  manualPcNumber.value = true
+}
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  gaugelabreference: '',
+  maintenancereference: '',
+  machinetypeid: '',
+  statusid: '',
+  vendorid: '',
+  modelnumberid: '',
+  locationid: '',
+  osid: '',
+  loggedinuser: '',
+  accessmethods: [],
+  notes: '',
+  mapx: null,
+  mapy: null,
+  ipaddress: ''
+})
+
+const pcTypes = ref([])
+const protocols = ref([])
+const statuses = ref([])
+
+// Access-method editor helpers (form.accessmethods = [{protocolid, portoverride}])
+function isProtocolOn(protocolid) {
+  return form.value.accessmethods.some(a => a.protocolid === protocolid)
+}
+function protocolPort(protocolid) {
+  const found = form.value.accessmethods.find(a => a.protocolid === protocolid)
+  return found && found.portoverride != null ? found.portoverride : ''
+}
+function toggleProtocol(protocolid, on) {
+  if (on) {
+    if (!isProtocolOn(protocolid)) {
+      form.value.accessmethods.push({ protocolid, portoverride: null })
+    }
+  } else {
+    form.value.accessmethods = form.value.accessmethods.filter(a => a.protocolid !== protocolid)
+  }
+}
+function setProtocolPort(protocolid, value) {
+  const found = form.value.accessmethods.find(a => a.protocolid === protocolid)
+  if (found) {
+    const n = parseInt(value, 10)
+    found.portoverride = Number.isFinite(n) ? n : null
+  }
+}
+const vendors = ref([])
+const models = ref([])
+const locations = ref([])
+const operatingsystems = ref([])
+
+// Default PC Number to serial while the user hasn't typed their own (new PC only)
+watch(() => form.value.serialnumber, (serial) => {
+  if (!isEdit.value && !manualPcNumber.value && serial) {
+    form.value.machinenumber = serial
+  }
+})
+
+// Filter models by selected vendor and PC type
+const filteredModels = computed(() => {
+  // filter by vendor only (PC type now maps to computertypeid, a different id
+  // space than a model's machinetypeid)
+  if (!form.value.vendorid) return models.value
+  return models.value.filter(m => m.vendorid === form.value.vendorid)
+})
+
+onMounted(async () => {
+  try {
+    // Load reference data
+    // perpage 100 so dropdowns aren't truncated to the default 20-row page
+    const [ptRes, statusRes, vendorRes, allModels, locRes, osRes, protoRes] = await Promise.all([
+      computersApi.types.list({ perpage: 100 }),
+      assetsApi.statuses.list(),
+      vendorsApi.list({ perpage: 100 }),
+      modelsApi.listAll(),  // backend caps perpage at 100; page through all
+      locationsApi.list({ perpage: 100 }),
+      operatingsystemsApi.list({ perpage: 100 }),
+      computersApi.protocols.list()
+    ])
+
+    pcTypes.value = ptRes.data.data || []
+    statuses.value = statusRes.data.data || []
+    vendors.value = vendorRes.data.data || []
+    models.value = allModels
+    locations.value = locRes.data.data || []
+    operatingsystems.value = osRes.data.data || []
+    protocols.value = protoRes.data.data || []
+
+    // Load PC if editing (asset-based shape: extension under pc.computer)
+    if (isEdit.value) {
+      const response = await computersApi.get(route.params.id)
+      const pc = response.data.data
+      const ext = pc.computer || {}
+      currentAssetId.value = pc.assetid || null
+
+      const primaryComm = pc.communications?.find(c => c.isprimary) || pc.communications?.[0]
+
+      form.value = {
+        machinenumber: pc.assetnumber || '',
+        alias: pc.name && pc.name.toUpperCase() !== 'NONE' ? pc.name : '',
+        hostname: ext.hostname || '',
+        serialnumber: pc.serialnumber || '',
+        gaugelabreference: pc.gaugelabreference || '',
+        maintenancereference: pc.maintenancereference || '',
+        machinetypeid: ext.computertypeid || '',
+        statusid: pc.statusid || '',
+        vendorid: ext.vendorid || '',
+        modelnumberid: ext.modelnumberid || '',
+        locationid: pc.locationid || '',
+        osid: ext.osid || '',
+        loggedinuser: ext.loggedinuser || '',
+        accessmethods: (pc.accessmethods || []).map(a => ({
+          protocolid: a.protocolid,
+          portoverride: a.portoverride ?? null
+        })),
+        notes: pc.notes || '',
+        mapx: pc.mapx ?? null,
+        mapy: pc.mapy ?? null,
+        ipaddress: primaryComm?.ipaddress || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapx = tempMapPosition.value.left
+    form.value.mapy = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapx = null
+  form.value.mapy = null
+  tempMapPosition.value = null
+}
+
+async function savePC() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    // One payload for the computers plugin (asset core + computer extension +
+    // primary IP). "PC Number" is the business identifier (assetnumber).
+    const payload = {
+      assetnumber: form.value.machinenumber,
+      hostname: form.value.hostname || null,
+      serialnumber: form.value.serialnumber || null,
+      gaugelabreference: form.value.gaugelabreference || null,
+      maintenancereference: form.value.maintenancereference || null,
+      computertypeid: form.value.machinetypeid || null,
+      statusid: form.value.statusid || null,
+      vendorid: form.value.vendorid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      locationid: form.value.locationid || null,
+      osid: form.value.osid || null,
+      loggedinuser: form.value.loggedinuser || null,
+      accessmethods: form.value.accessmethods,
+      notes: form.value.notes || null,
+      ipaddress: form.value.ipaddress || null,
+      mapx: form.value.mapx,
+      mapy: form.value.mapy
+    }
+    // only set display name when an alias is given, so we don't clobber it
+    if (form.value.alias) {
+      payload.name = form.value.alias
+    }
+
+    let assetId = currentAssetId.value
+    if (isEdit.value) {
+      const response = await computersApi.update(route.params.id, payload)
+      assetId = assetId || response.data?.data?.assetid || response.data?.data?.asset?.assetid
+    } else {
+      const response = await computersApi.create(payload)
+      assetId = response.data?.data?.assetid || response.data?.data?.asset?.assetid
+    }
+
+    // Persist any custom-field values now that we have an asset id.
+    if (assetId && customFieldsRef.value) {
+      try {
+        await customFieldsRef.value.save(assetId)
+      } catch (cfErr) {
+        console.error('Error saving custom fields:', cfErr)
+      }
+    }
+
+    router.push('/pcs')
+  } catch (err) {
+    console.error('Error saving PC:', err)
+    error.value = apiError(err, 'Failed to save PC')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.protocol-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+.protocol-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.protocol-item .port-override {
+  width: 78px;
+  padding: 4px 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+}
+.muted {
+  color: var(--text-light);
+}
+
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-family: monospace;
+  color: var(--text);
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/printers/PrinterDetail.vue b/frontend/src/views/printers/PrinterDetail.vue
index e7588d5..77e27b9 100644
--- a/frontend/src/views/printers/PrinterDetail.vue
+++ b/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([])
 
diff --git a/frontend/src/views/printers/PrinterForm.vue b/frontend/src/views/printers/PrinterForm.vue
index 788c22c..2999031 100644
--- a/frontend/src/views/printers/PrinterForm.vue
+++ b/frontend/src/views/printers/PrinterForm.vue
@@ -1,651 +1,652 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit Printer' : 'New Printer' }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="savePrinter">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="machinenumber">Windows Name *</label>
-            <input
-              id="machinenumber"
-              v-model="form.machinenumber"
-              type="text"
-              class="form-control"
-              required
-              @input="onWindowsNameInput"
-              :class="{ 'auto-generated': !manualWindowsName && form.machinenumber }"
-            />
-            <small class="form-hint">Auto-generated from CSF Name, Alias, Vendor & Model</small>
-          </div>
-
-          <div class="form-group">
-            <label for="alias">Alias / Location</label>
-            <input
-              id="alias"
-              v-model="form.alias"
-              type="text"
-              class="form-control"
-              placeholder="e.g., SpoolsInspection"
-            />
-            <small class="form-hint">Used in Windows name generation</small>
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group" v-if="isEnabled('fqdn', 'printer')">
-            <label for="hostname">Hostname (FQDN)</label>
-            <input
-              id="hostname"
-              v-model="form.hostname"
-              type="text"
-              class="form-control"
-              @input="onHostnameInput"
-              :class="{ 'auto-generated': !manualHostname && form.hostname }"
-            />
-            <small class="form-hint">Auto-generated from IP address</small>
-          </div>
-
-          <div class="form-group">
-            <label for="serialnumber">Serial Number</label>
-            <input
-              id="serialnumber"
-              v-model="form.serialnumber"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row" v-if="isEnabled('gaugelabreference', 'printer') || isEnabled('maintenancereference', 'printer')">
-          <div class="form-group" v-if="isEnabled('gaugelabreference', 'printer')">
-            <label for="gaugelabreference">Gauge Lab Reference</label>
-            <input
-              id="gaugelabreference"
-              v-model="form.gaugelabreference"
-              type="text"
-              class="form-control"
-            />
-          </div>
-
-          <div class="form-group" v-if="isEnabled('maintenancereference', 'printer')">
-            <label for="maintenancereference">Maintenance Reference</label>
-            <input
-              id="maintenancereference"
-              v-model="form.maintenancereference"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="machinetypeid">Printer Type *</label>
-            <select
-              id="machinetypeid"
-              v-model="form.machinetypeid"
-              class="form-control"
-              required
-              @change="form.modelnumberid = ''"
-            >
-              <option value="">Select type...</option>
-              <option
-                v-for="pt in printerTypes"
-                :key="pt.printertypeid"
-                :value="pt.printertypeid"
-              >
-                {{ pt.printertype }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="statusid">Status</label>
-            <select
-              id="statusid"
-              v-model="form.statusid"
-              class="form-control"
-            >
-              <option value="">Select status...</option>
-              <option
-                v-for="s in statuses"
-                :key="s.statusid"
-                :value="s.statusid"
-              >
-                {{ s.status }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="vendorid">Vendor</label>
-            <select
-              id="vendorid"
-              v-model="form.vendorid"
-              class="form-control"
-              @change="form.modelnumberid = ''"
-            >
-              <option value="">Select vendor...</option>
-              <option
-                v-for="v in vendors"
-                :key="v.vendorid"
-                :value="v.vendorid"
-              >
-                {{ v.vendor }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="modelnumberid">Model</label>
-            <select
-              id="modelnumberid"
-              v-model="form.modelnumberid"
-              class="form-control"
-              :disabled="!form.vendorid"
-            >
-              <option value="">{{ form.vendorid ? 'Select model...' : 'Select a vendor first' }}</option>
-              <option
-                v-for="m in filteredModels"
-                :key="m.modelnumberid"
-                :value="m.modelnumberid"
-              >
-                {{ m.modelnumber }}
-              </option>
-            </select>
-            <small v-if="!form.vendorid" class="form-hint">
-              Select a vendor first to choose a model
-            </small>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="locationid">Location</label>
-          <select
-            id="locationid"
-            v-model="form.locationid"
-            class="form-control"
-          >
-            <option value="">Select location...</option>
-            <option
-              v-for="l in locations"
-              :key="l.locationid"
-              :value="l.locationid"
-            >
-              {{ l.location }}
-            </option>
-          </select>
-        </div>
-
-        <!-- Printer-specific fields -->
-        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Printer Settings</h4>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="ipaddress">IP Address</label>
-            <input
-              id="ipaddress"
-              v-model="form.ipaddress"
-              type="text"
-              class="form-control"
-              placeholder="e.g., 192.168.1.100"
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="csfname">CSF Name</label>
-            <input
-              id="csfname"
-              v-model="form.csfname"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="pin">PIN</label>
-            <input
-              id="pin"
-              v-model="form.pin"
-              type="text"
-              class="form-control"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="installpath">Driver Install Path</label>
-          <input
-            id="installpath"
-            v-model="form.installpath"
-            type="text"
-            class="form-control"
-            placeholder="Leave empty for universal driver"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="notes">Notes</label>
-          <textarea
-            id="notes"
-            v-model="form.notes"
-            class="form-control"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <!-- Map Location Picker -->
-        <div class="form-group">
-          <label>Map Location</label>
-          <div class="map-location-control">
-            <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
-              Position: {{ form.mapx }}, {{ form.mapy }}
-              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
-            </div>
-            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
-              Set Location on Map
-            </button>
-          </div>
-        </div>
-
-        <!-- Map Picker Modal -->
-        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
-          <div class="map-modal-content">
-            <ShopFloorMap
-              :pickerMode="true"
-              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
-              :theme="currentTheme"
-              @positionPicked="handlePositionPicked"
-            />
-          </div>
-          <template #footer>
-            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
-            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
-          </template>
-        </Modal>
-
-        <!-- Site-defined custom fields for printers -->
-        <CustomFieldsInputs ref="customFieldsRef" :assettypeid="PRINTER_ASSETTYPEID" :assetid="currentAssetId" />
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : 'Save Printer' }}
-          </button>
-          <router-link to="/printers" class="btn btn-secondary">Cancel</router-link>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { assetsApi, vendorsApi, locationsApi, printersApi, modelsApi } 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'
-
-const { isEnabled } = useIdentifierFlags()
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => !!route.params.id)
-
-// Seeded asset-type id for printers (see /api/assets/types).
-const PRINTER_ASSETTYPEID = 4
-const customFieldsRef = ref(null)
-const currentAssetId = ref(null)
-const manualHostname = ref(false)
-const manualWindowsName = ref(false)
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-const showMapPicker = ref(false)
-const tempMapPosition = ref(null)
-
-const form = ref({
-  machinenumber: '',
-  alias: '',
-  hostname: '',
-  serialnumber: '',
-  gaugelabreference: '',
-  maintenancereference: '',
-  machinetypeid: '',
-  statusid: '',
-  vendorid: '',
-  modelnumberid: '',
-  locationid: '',
-  notes: '',
-  mapx: null,
-  mapy: null,
-  // Printer-specific
-  ipaddress: '',
-  csfname: '',
-  installpath: '',
-  pin: ''
-})
-
-const printerTypes = ref([])
-const statuses = ref([])
-const vendors = ref([])
-const models = ref([])
-const locations = ref([])
-
-// Filter models by selected vendor and printer type
-const filteredModels = computed(() => {
-  return models.value.filter(m => {
-    // Filter by vendor if selected
-    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
-      return false
-    }
-    // Filter by printer type if selected, but only exclude models that have a
-    // type set and it differs. Most models have no machinetypeid, so excluding
-    // null-typed models would hide the printer's own model from the dropdown.
-    if (form.value.machinetypeid && m.machinetypeid && m.machinetypeid !== form.value.machinetypeid) {
-      return false
-    }
-    return true
-  })
-})
-
-// Get short description from model number for naming
-function getModelShortDesc(modelNumber) {
-  if (!modelNumber) return ''
-  const mn = modelNumber.toLowerCase()
-
-  if (mn.includes('colorlaserjet')) return 'ColorLaserJet'
-  if (mn.includes('laserjetpro') || mn.includes('laserjet pro')) return 'LaserJetPro'
-  if (mn.includes('laserjet')) return 'LaserJet'
-  if (mn.includes('altalink')) return 'Altalink'
-  if (mn.includes('versalink')) return 'Versalink'
-  if (mn.includes('designjet')) return 'DesignJet'
-  if (mn.includes('dtc')) return 'DTC'
-  if (mn.includes('officejet')) return 'OfficeJet'
-  if (mn.includes('pagewide')) return 'PageWide'
-
-  // Fallback: get letters before first digit
-  const match = modelNumber.match(/^([A-Za-z]+)/)
-  return match ? match[1] : modelNumber.substring(0, 5)
-}
-
-// Auto-generate hostname from IP address
-function generateHostname(ip) {
-  if (!ip) return ''
-  const ipDashed = ip.replace(/\./g, '-')
-  return `Printer-${ipDashed}.printer.geaerospace.net`
-}
-
-// Auto-generate Windows name (machinenumber)
-function generateWindowsName() {
-  const parts = []
-
-  // 1. CSF Name (if set and not "NONE")
-  const csfName = form.value.csfname?.trim()
-  if (csfName && csfName.toUpperCase() !== 'NONE') {
-    parts.push(csfName.replace(/\s+/g, ''))
-  }
-
-  // 2. Location (from alias, removing spaces and "Machine")
-  const alias = form.value.alias?.trim()
-  if (alias) {
-    const location = alias.replace(/\s+/g, '').replace(/Machine/gi, '')
-    // Skip if same as CSF name
-    if (location.toLowerCase() !== csfName?.toLowerCase()) {
-      parts.push(location)
-    }
-  }
-
-  // 3. Vendor + Model short description
-  const selectedModel = models.value.find(m => m.modelnumberid === form.value.modelnumberid)
-  const selectedVendor = vendors.value.find(v => v.vendorid === form.value.vendorid)
-
-  let vendorModel = ''
-  if (selectedVendor) {
-    vendorModel = selectedVendor.vendor.replace(/\s+/g, '')
-  }
-  if (selectedModel) {
-    vendorModel += getModelShortDesc(selectedModel.modelnumber)
-  }
-  if (vendorModel) {
-    parts.push(vendorModel)
-  }
-
-  return parts.join('-')
-}
-
-// Watch IP address and auto-generate hostname
-watch(() => form.value.ipaddress, (newIp) => {
-  if (!manualHostname.value && newIp) {
-    form.value.hostname = generateHostname(newIp)
-  }
-})
-
-// Watch fields that affect Windows name generation
-watch(
-  () => [form.value.csfname, form.value.alias, form.value.vendorid, form.value.modelnumberid],
-  () => {
-    if (!manualWindowsName.value && !isEdit.value) {
-      const generated = generateWindowsName()
-      if (generated) {
-        form.value.machinenumber = generated
-      }
-    }
-  }
-)
-
-// Track manual edits to hostname
-function onHostnameInput() {
-  manualHostname.value = true
-}
-
-// Track manual edits to Windows name
-function onWindowsNameInput() {
-  manualWindowsName.value = true
-}
-
-onMounted(async () => {
-  try {
-    // Load reference data (models paged in full via listAll, see api/index.js)
-    // perpage 100 so dropdowns aren't truncated to the default 20-row page
-    // (e.g. 44 vendors; the editing record's vendor can be past row 20)
-    const [mtRes, statusRes, vendorRes, allModels, locRes] = await Promise.all([
-      printersApi.types.list({ perpage: 100 }),
-      assetsApi.statuses.list(),
-      vendorsApi.list({ perpage: 100 }),
-      modelsApi.listAll(),
-      locationsApi.list({ perpage: 100 })
-    ])
-
-    printerTypes.value = mtRes.data.data || []
-    statuses.value = statusRes.data.data || []
-    vendors.value = vendorRes.data.data || []
-    models.value = allModels
-    locations.value = locRes.data.data || []
-
-    // Load printer if editing
-    if (isEdit.value) {
-      const response = await printersApi.get(route.params.id)
-      const printer = response.data.data
-      currentAssetId.value = printer.assetid || null
-      // asset-based shape: printer extension fields live under printer.printer
-      const ext = printer.printer || {}
-
-      // Get IP from communications
-      const primaryComm = printer.communications?.find(c => c.isprimary) || printer.communications?.[0]
-
-      form.value = {
-        // "Windows Name" is the printer's business identifier (assetnumber).
-        // Prefer the explicit windowsname, then fall back to assetnumber.
-        machinenumber: ext.windowsname || printer.assetnumber || '',
-        alias: printer.name && printer.name.toUpperCase() !== 'NONE' ? printer.name : '',
-        hostname: ext.hostname || '',
-        serialnumber: printer.serialnumber || '',
-        gaugelabreference: printer.gaugelabreference || '',
-        maintenancereference: printer.maintenancereference || '',
-        machinetypeid: ext.printertypeid || '',
-        statusid: printer.statusid || '',
-        vendorid: ext.vendorid || '',
-        modelnumberid: ext.modelnumberid || '',
-        locationid: printer.locationid || '',
-        notes: printer.notes || '',
-        mapx: printer.mapx ?? null,
-        mapy: printer.mapy ?? null,
-        // Printer-specific
-        ipaddress: primaryComm?.ipaddress || '',
-        csfname: ext.sharename || '',
-        installpath: ext.installpath || '',
-        pin: ext.pin || ''
-      }
-
-      // Don't auto-generate for existing printers
-      manualWindowsName.value = true
-      manualHostname.value = true
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-function handlePositionPicked(position) {
-  tempMapPosition.value = position
-}
-
-function confirmMapPosition() {
-  if (tempMapPosition.value) {
-    form.value.mapx = tempMapPosition.value.left
-    form.value.mapy = tempMapPosition.value.top
-  }
-  showMapPicker.value = false
-}
-
-function clearMapPosition() {
-  form.value.mapx = null
-  form.value.mapy = null
-  tempMapPosition.value = null
-}
-
-async function savePrinter() {
-  error.value = ''
-  saving.value = true
-
-  try {
-    // One payload for the printers plugin, which owns asset core + extension +
-    // primary communication. The "Windows Name" field is the business
-    // identifier, written to both assetnumber and the extension windowsname.
-    const payload = {
-      assetnumber: form.value.machinenumber,
-      windowsname: form.value.machinenumber || null,
-      hostname: form.value.hostname || null,
-      serialnumber: form.value.serialnumber || null,
-      gaugelabreference: form.value.gaugelabreference || null,
-      maintenancereference: form.value.maintenancereference || null,
-      printertypeid: form.value.machinetypeid || null,
-      statusid: form.value.statusid || null,
-      vendorid: form.value.vendorid || null,
-      modelnumberid: form.value.modelnumberid || null,
-      locationid: form.value.locationid || null,
-      sharename: form.value.csfname || null,
-      iscsf: !!form.value.csfname,
-      installpath: form.value.installpath || null,
-      pin: form.value.pin || null,
-      ipaddress: form.value.ipaddress || null,
-      mapx: form.value.mapx,
-      mapy: form.value.mapy
-    }
-    // only set the display name when an alias is given, so we don't clobber it
-    if (form.value.alias) {
-      payload.name = form.value.alias
-    }
-
-    let assetId = currentAssetId.value
-    if (isEdit.value) {
-      const response = await printersApi.update(route.params.id, payload)
-      assetId = assetId || response.data?.data?.assetid || response.data?.data?.asset?.assetid
-    } else {
-      const response = await printersApi.create(payload)
-      assetId = response.data?.data?.assetid || response.data?.data?.asset?.assetid
-    }
-
-    if (assetId && customFieldsRef.value) {
-      try {
-        await customFieldsRef.value.save(assetId)
-      } catch (cfErr) {
-        console.error('Error saving custom fields:', cfErr)
-      }
-    }
-
-    router.push('/printers')
-  } catch (err) {
-    console.error('Error saving printer:', err)
-    error.value = err.response?.data?.message || 'Failed to save printer'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.map-location-control {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.current-position {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  font-family: monospace;
-  color: var(--text);
-}
-
-.map-modal-content {
-  height: calc(90vh - 140px);
-}
-
-.map-modal-content :deep(.shopfloor-map) {
-  height: 100%;
-}
-
-.map-modal-content :deep(.map-container) {
-  height: calc(100% - 50px);
-}
-
-.form-hint {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--text-light, #666);
-}
-
-/* auto-fill cue: a subtle translucent blue tint + accent border that reads
-   correctly over both light and dark backgrounds. Text color stays themed
-   (no solid light fill that turns into an unreadable white box in dark mode). */
-.auto-generated {
-  background-color: rgba(33, 150, 243, 0.12);
-  border-color: #90caf9;
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Printer' : 'New Printer' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="savePrinter">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">Windows Name *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+              @input="onWindowsNameInput"
+              :class="{ 'auto-generated': !manualWindowsName && form.machinenumber }"
+            />
+            <small class="form-hint">Auto-generated from CSF Name, Alias, Vendor & Model</small>
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias / Location</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+              placeholder="e.g., SpoolsInspection"
+            />
+            <small class="form-hint">Used in Windows name generation</small>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group" v-if="isEnabled('fqdn', 'printer')">
+            <label for="hostname">Hostname (FQDN)</label>
+            <input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              class="form-control"
+              @input="onHostnameInput"
+              :class="{ 'auto-generated': !manualHostname && form.hostname }"
+            />
+            <small class="form-hint">Auto-generated from IP address</small>
+          </div>
+
+          <div class="form-group">
+            <label for="serialnumber">Serial Number</label>
+            <input
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row" v-if="isEnabled('gaugelabreference', 'printer') || isEnabled('maintenancereference', 'printer')">
+          <div class="form-group" v-if="isEnabled('gaugelabreference', 'printer')">
+            <label for="gaugelabreference">Gauge Lab Reference</label>
+            <input
+              id="gaugelabreference"
+              v-model="form.gaugelabreference"
+              type="text"
+              class="form-control"
+            />
+          </div>
+
+          <div class="form-group" v-if="isEnabled('maintenancereference', 'printer')">
+            <label for="maintenancereference">Maintenance Reference</label>
+            <input
+              id="maintenancereference"
+              v-model="form.maintenancereference"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinetypeid">Printer Type *</label>
+            <select
+              id="machinetypeid"
+              v-model="form.machinetypeid"
+              class="form-control"
+              required
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="pt in printerTypes"
+                :key="pt.printertypeid"
+                :value="pt.printertypeid"
+              >
+                {{ pt.printertype }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="statusid">Status</label>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.vendorid"
+              class="form-control"
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="modelnumberid">Model</label>
+            <select
+              id="modelnumberid"
+              v-model="form.modelnumberid"
+              class="form-control"
+              :disabled="!form.vendorid"
+            >
+              <option value="">{{ form.vendorid ? 'Select model...' : 'Select a vendor first' }}</option>
+              <option
+                v-for="m in filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small v-if="!form.vendorid" class="form-hint">
+              Select a vendor first to choose a model
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="locationid">Location</label>
+          <select
+            id="locationid"
+            v-model="form.locationid"
+            class="form-control"
+          >
+            <option value="">Select location...</option>
+            <option
+              v-for="l in locations"
+              :key="l.locationid"
+              :value="l.locationid"
+            >
+              {{ l.location }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Printer-specific fields -->
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Printer Settings</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="ipaddress">IP Address</label>
+            <input
+              id="ipaddress"
+              v-model="form.ipaddress"
+              type="text"
+              class="form-control"
+              placeholder="e.g., 192.168.1.100"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="csfname">CSF Name</label>
+            <input
+              id="csfname"
+              v-model="form.csfname"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="pin">PIN</label>
+            <input
+              id="pin"
+              v-model="form.pin"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="installpath">Driver Install Path</label>
+          <input
+            id="installpath"
+            v-model="form.installpath"
+            type="text"
+            class="form-control"
+            placeholder="Leave empty for universal driver"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Map Location Picker -->
+        <div class="form-group">
+          <label>Map Location</label>
+          <div class="map-location-control">
+            <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
+              Position: {{ form.mapx }}, {{ form.mapy }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
+              :theme="currentTheme"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <!-- Site-defined custom fields for printers -->
+        <CustomFieldsInputs ref="customFieldsRef" :assettypeid="PRINTER_ASSETTYPEID" :assetid="currentAssetId" />
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Printer' }}
+          </button>
+          <router-link to="/printers" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { assetsApi, vendorsApi, locationsApi, printersApi, modelsApi } 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'
+import { apiError } from '../../utils/apiError'
+
+const { isEnabled } = useIdentifierFlags()
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+// Seeded asset-type id for printers (see /api/assets/types).
+const PRINTER_ASSETTYPEID = 4
+const customFieldsRef = ref(null)
+const currentAssetId = ref(null)
+const manualHostname = ref(false)
+const manualWindowsName = ref(false)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  gaugelabreference: '',
+  maintenancereference: '',
+  machinetypeid: '',
+  statusid: '',
+  vendorid: '',
+  modelnumberid: '',
+  locationid: '',
+  notes: '',
+  mapx: null,
+  mapy: null,
+  // Printer-specific
+  ipaddress: '',
+  csfname: '',
+  installpath: '',
+  pin: ''
+})
+
+const printerTypes = ref([])
+const statuses = ref([])
+const vendors = ref([])
+const models = ref([])
+const locations = ref([])
+
+// Filter models by selected vendor and printer type
+const filteredModels = computed(() => {
+  return models.value.filter(m => {
+    // Filter by vendor if selected
+    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
+      return false
+    }
+    // Filter by printer type if selected, but only exclude models that have a
+    // type set and it differs. Most models have no machinetypeid, so excluding
+    // null-typed models would hide the printer's own model from the dropdown.
+    if (form.value.machinetypeid && m.machinetypeid && m.machinetypeid !== form.value.machinetypeid) {
+      return false
+    }
+    return true
+  })
+})
+
+// Get short description from model number for naming
+function getModelShortDesc(modelNumber) {
+  if (!modelNumber) return ''
+  const mn = modelNumber.toLowerCase()
+
+  if (mn.includes('colorlaserjet')) return 'ColorLaserJet'
+  if (mn.includes('laserjetpro') || mn.includes('laserjet pro')) return 'LaserJetPro'
+  if (mn.includes('laserjet')) return 'LaserJet'
+  if (mn.includes('altalink')) return 'Altalink'
+  if (mn.includes('versalink')) return 'Versalink'
+  if (mn.includes('designjet')) return 'DesignJet'
+  if (mn.includes('dtc')) return 'DTC'
+  if (mn.includes('officejet')) return 'OfficeJet'
+  if (mn.includes('pagewide')) return 'PageWide'
+
+  // Fallback: get letters before first digit
+  const match = modelNumber.match(/^([A-Za-z]+)/)
+  return match ? match[1] : modelNumber.substring(0, 5)
+}
+
+// Auto-generate hostname from IP address
+function generateHostname(ip) {
+  if (!ip) return ''
+  const ipDashed = ip.replace(/\./g, '-')
+  return `Printer-${ipDashed}.printer.geaerospace.net`
+}
+
+// Auto-generate Windows name (machinenumber)
+function generateWindowsName() {
+  const parts = []
+
+  // 1. CSF Name (if set and not "NONE")
+  const csfName = form.value.csfname?.trim()
+  if (csfName && csfName.toUpperCase() !== 'NONE') {
+    parts.push(csfName.replace(/\s+/g, ''))
+  }
+
+  // 2. Location (from alias, removing spaces and "Machine")
+  const alias = form.value.alias?.trim()
+  if (alias) {
+    const location = alias.replace(/\s+/g, '').replace(/Machine/gi, '')
+    // Skip if same as CSF name
+    if (location.toLowerCase() !== csfName?.toLowerCase()) {
+      parts.push(location)
+    }
+  }
+
+  // 3. Vendor + Model short description
+  const selectedModel = models.value.find(m => m.modelnumberid === form.value.modelnumberid)
+  const selectedVendor = vendors.value.find(v => v.vendorid === form.value.vendorid)
+
+  let vendorModel = ''
+  if (selectedVendor) {
+    vendorModel = selectedVendor.vendor.replace(/\s+/g, '')
+  }
+  if (selectedModel) {
+    vendorModel += getModelShortDesc(selectedModel.modelnumber)
+  }
+  if (vendorModel) {
+    parts.push(vendorModel)
+  }
+
+  return parts.join('-')
+}
+
+// Watch IP address and auto-generate hostname
+watch(() => form.value.ipaddress, (newIp) => {
+  if (!manualHostname.value && newIp) {
+    form.value.hostname = generateHostname(newIp)
+  }
+})
+
+// Watch fields that affect Windows name generation
+watch(
+  () => [form.value.csfname, form.value.alias, form.value.vendorid, form.value.modelnumberid],
+  () => {
+    if (!manualWindowsName.value && !isEdit.value) {
+      const generated = generateWindowsName()
+      if (generated) {
+        form.value.machinenumber = generated
+      }
+    }
+  }
+)
+
+// Track manual edits to hostname
+function onHostnameInput() {
+  manualHostname.value = true
+}
+
+// Track manual edits to Windows name
+function onWindowsNameInput() {
+  manualWindowsName.value = true
+}
+
+onMounted(async () => {
+  try {
+    // Load reference data (models paged in full via listAll, see api/index.js)
+    // perpage 100 so dropdowns aren't truncated to the default 20-row page
+    // (e.g. 44 vendors; the editing record's vendor can be past row 20)
+    const [mtRes, statusRes, vendorRes, allModels, locRes] = await Promise.all([
+      printersApi.types.list({ perpage: 100 }),
+      assetsApi.statuses.list(),
+      vendorsApi.list({ perpage: 100 }),
+      modelsApi.listAll(),
+      locationsApi.list({ perpage: 100 })
+    ])
+
+    printerTypes.value = mtRes.data.data || []
+    statuses.value = statusRes.data.data || []
+    vendors.value = vendorRes.data.data || []
+    models.value = allModels
+    locations.value = locRes.data.data || []
+
+    // Load printer if editing
+    if (isEdit.value) {
+      const response = await printersApi.get(route.params.id)
+      const printer = response.data.data
+      currentAssetId.value = printer.assetid || null
+      // asset-based shape: printer extension fields live under printer.printer
+      const ext = printer.printer || {}
+
+      // Get IP from communications
+      const primaryComm = printer.communications?.find(c => c.isprimary) || printer.communications?.[0]
+
+      form.value = {
+        // "Windows Name" is the printer's business identifier (assetnumber).
+        // Prefer the explicit windowsname, then fall back to assetnumber.
+        machinenumber: ext.windowsname || printer.assetnumber || '',
+        alias: printer.name && printer.name.toUpperCase() !== 'NONE' ? printer.name : '',
+        hostname: ext.hostname || '',
+        serialnumber: printer.serialnumber || '',
+        gaugelabreference: printer.gaugelabreference || '',
+        maintenancereference: printer.maintenancereference || '',
+        machinetypeid: ext.printertypeid || '',
+        statusid: printer.statusid || '',
+        vendorid: ext.vendorid || '',
+        modelnumberid: ext.modelnumberid || '',
+        locationid: printer.locationid || '',
+        notes: printer.notes || '',
+        mapx: printer.mapx ?? null,
+        mapy: printer.mapy ?? null,
+        // Printer-specific
+        ipaddress: primaryComm?.ipaddress || '',
+        csfname: ext.sharename || '',
+        installpath: ext.installpath || '',
+        pin: ext.pin || ''
+      }
+
+      // Don't auto-generate for existing printers
+      manualWindowsName.value = true
+      manualHostname.value = true
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapx = tempMapPosition.value.left
+    form.value.mapy = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapx = null
+  form.value.mapy = null
+  tempMapPosition.value = null
+}
+
+async function savePrinter() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    // One payload for the printers plugin, which owns asset core + extension +
+    // primary communication. The "Windows Name" field is the business
+    // identifier, written to both assetnumber and the extension windowsname.
+    const payload = {
+      assetnumber: form.value.machinenumber,
+      windowsname: form.value.machinenumber || null,
+      hostname: form.value.hostname || null,
+      serialnumber: form.value.serialnumber || null,
+      gaugelabreference: form.value.gaugelabreference || null,
+      maintenancereference: form.value.maintenancereference || null,
+      printertypeid: form.value.machinetypeid || null,
+      statusid: form.value.statusid || null,
+      vendorid: form.value.vendorid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      locationid: form.value.locationid || null,
+      sharename: form.value.csfname || null,
+      iscsf: !!form.value.csfname,
+      installpath: form.value.installpath || null,
+      pin: form.value.pin || null,
+      ipaddress: form.value.ipaddress || null,
+      mapx: form.value.mapx,
+      mapy: form.value.mapy
+    }
+    // only set the display name when an alias is given, so we don't clobber it
+    if (form.value.alias) {
+      payload.name = form.value.alias
+    }
+
+    let assetId = currentAssetId.value
+    if (isEdit.value) {
+      const response = await printersApi.update(route.params.id, payload)
+      assetId = assetId || response.data?.data?.assetid || response.data?.data?.asset?.assetid
+    } else {
+      const response = await printersApi.create(payload)
+      assetId = response.data?.data?.assetid || response.data?.data?.asset?.assetid
+    }
+
+    if (assetId && customFieldsRef.value) {
+      try {
+        await customFieldsRef.value.save(assetId)
+      } catch (cfErr) {
+        console.error('Error saving custom fields:', cfErr)
+      }
+    }
+
+    router.push('/printers')
+  } catch (err) {
+    console.error('Error saving printer:', err)
+    error.value = apiError(err, 'Failed to save printer')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-family: monospace;
+  color: var(--text);
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+
+/* auto-fill cue: a subtle translucent blue tint + accent border that reads
+   correctly over both light and dark backgrounds. Text color stays themed
+   (no solid light fill that turns into an unreadable white box in dark mode). */
+.auto-generated {
+  background-color: rgba(33, 150, 243, 0.12);
+  border-color: #90caf9;
+}
+</style>
diff --git a/frontend/src/views/reports/WarrantyReport.vue b/frontend/src/views/reports/WarrantyReport.vue
index 3cccc4f..00f63ba 100644
--- a/frontend/src/views/reports/WarrantyReport.vue
+++ b/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>
diff --git a/frontend/src/views/settings/AccessProtocolsList.vue b/frontend/src/views/settings/AccessProtocolsList.vue
index 14c571f..ec4b71b 100644
--- a/frontend/src/views/settings/AccessProtocolsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/AssetTypesList.vue b/frontend/src/views/settings/AssetTypesList.vue
index e3aeaf3..6067799 100644
--- a/frontend/src/views/settings/AssetTypesList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/BusinessUnitsList.vue b/frontend/src/views/settings/BusinessUnitsList.vue
index 5f374e0..327b80a 100644
--- a/frontend/src/views/settings/BusinessUnitsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/CustomFieldsList.vue b/frontend/src/views/settings/CustomFieldsList.vue
index bc994be..39b9557 100644
--- a/frontend/src/views/settings/CustomFieldsList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/DashboardDefaultsList.vue b/frontend/src/views/settings/DashboardDefaultsList.vue
index 7b0653b..17a9b64 100644
--- a/frontend/src/views/settings/DashboardDefaultsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/EquipmentTypesList.vue b/frontend/src/views/settings/EquipmentTypesList.vue
index 6b4d2eb..29c901b 100644
--- a/frontend/src/views/settings/EquipmentTypesList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/LocationTypesList.vue b/frontend/src/views/settings/LocationTypesList.vue
index 616b262..c71115b 100644
--- a/frontend/src/views/settings/LocationTypesList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/LocationsList.vue b/frontend/src/views/settings/LocationsList.vue
index 2ac8a98..492ff07 100644
--- a/frontend/src/views/settings/LocationsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/MachineTypesList.vue b/frontend/src/views/settings/MachineTypesList.vue
index 16ca6b5..84ec488 100644
--- a/frontend/src/views/settings/MachineTypesList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/ModelSuppliesList.vue b/frontend/src/views/settings/ModelSuppliesList.vue
index 41497fd..421959e 100644
--- a/frontend/src/views/settings/ModelSuppliesList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/ModelsList.vue b/frontend/src/views/settings/ModelsList.vue
index 3b03107..297317f 100644
--- a/frontend/src/views/settings/ModelsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/NetworkTypesList.vue b/frontend/src/views/settings/NetworkTypesList.vue
index e67ffbe..ef9ce57 100644
--- a/frontend/src/views/settings/NetworkTypesList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/OperatingSystemsList.vue b/frontend/src/views/settings/OperatingSystemsList.vue
index 4d07911..9dd56d0 100644
--- a/frontend/src/views/settings/OperatingSystemsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/PCTypesList.vue b/frontend/src/views/settings/PCTypesList.vue
index 61e2871..0118bfd 100644
--- a/frontend/src/views/settings/PCTypesList.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/PrinterDriversList.vue b/frontend/src/views/settings/PrinterDriversList.vue
index 3eb5b52..efa2d14 100644
--- a/frontend/src/views/settings/PrinterDriversList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/PrinterTypesList.vue b/frontend/src/views/settings/PrinterTypesList.vue
index ef05974..7510cd0 100644
--- a/frontend/src/views/settings/PrinterTypesList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/RelationshipTypesList.vue b/frontend/src/views/settings/RelationshipTypesList.vue
index 8a79490..3615c23 100644
--- a/frontend/src/views/settings/RelationshipTypesList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/SiteSettings.vue b/frontend/src/views/settings/SiteSettings.vue
index 4501f11..00d5f69 100644
--- a/frontend/src/views/settings/SiteSettings.vue
+++ b/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
   }
diff --git a/frontend/src/views/settings/StatusesList.vue b/frontend/src/views/settings/StatusesList.vue
index e1a9129..4309395 100644
--- a/frontend/src/views/settings/StatusesList.vue
+++ b/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)
   }
 }
diff --git a/frontend/src/views/settings/SubnetsList.vue b/frontend/src/views/settings/SubnetsList.vue
index 0304314..7c24d7d 100644
--- a/frontend/src/views/settings/SubnetsList.vue
+++ b/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>
diff --git a/frontend/src/views/settings/SystemSettings.vue b/frontend/src/views/settings/SystemSettings.vue
index 366631a..c117ba1 100644
--- a/frontend/src/views/settings/SystemSettings.vue
+++ b/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)
diff --git a/frontend/src/views/settings/UsersList.vue b/frontend/src/views/settings/UsersList.vue
index 6b6b8c4..f9dc557 100644
--- a/frontend/src/views/settings/UsersList.vue
+++ b/frontend/src/views/settings/UsersList.vue
@@ -1,745 +1,746 @@
-<template>
-  <div class="page-header">
-    <h1>User Management</h1>
-    <button class="btn-primary" @click="showCreateModal = true">Add User</button>
-  </div>
-
-  <div class="card">
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            <th>Username</th>
-            <th>Email</th>
-            <th>Name</th>
-            <th>Roles</th>
-            <th>Status</th>
-            <th>Last Login</th>
-            <th class="actions">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="loading">
-            <td colspan="7" class="loading">Loading...</td>
-          </tr>
-          <tr v-else-if="!users.length">
-            <td colspan="7" class="empty">No users found</td>
-          </tr>
-          <tr v-for="user in users" :key="user.userid">
-            <td>{{ user.username }}</td>
-            <td>{{ user.email }}</td>
-            <td>{{ [user.firstname, user.lastname].filter(Boolean).join(' ') || '-' }}</td>
-            <td>
-              <span
-                v-for="role in user.roles"
-                :key="role.roleid"
-                class="badge"
-                :class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'"
-              >
-                {{ role.rolename }}
-              </span>
-              <span v-if="!user.roles.length" class="text-muted">None</span>
-            </td>
-            <td>
-              <span v-if="user.islocked" class="badge badge-danger">Locked</span>
-              <span v-else-if="!user.isactive" class="badge badge-warning">Inactive</span>
-              <span v-else class="badge badge-success">Active</span>
-            </td>
-            <td>{{ formatDate(user.lastlogindate) }}</td>
-            <td class="actions">
-              <button class="btn-sm" @click="editUser(user)">Edit</button>
-              <button
-                class="btn-sm btn-danger"
-                @click="confirmDelete(user)"
-                :disabled="user.userid === currentUserId"
-              >
-                Delete
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <!-- Roles Section -->
-  <div class="page-header" style="margin-top: 2rem">
-    <h2>Roles</h2>
-    <button class="btn-secondary" @click="showRoleModal = true">Add Role</button>
-  </div>
-
-  <div class="card">
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            <th>Role Name</th>
-            <th>Description</th>
-            <th>Permissions</th>
-            <th>Users</th>
-            <th class="actions">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="role in roles" :key="role.roleid">
-            <td>
-              <span class="badge" :class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'">
-                {{ role.rolename }}
-              </span>
-            </td>
-            <td class="cell-truncate" :title="role.description">{{ role.description || '-' }}</td>
-            <td>
-              <span v-if="role.isadmin" class="text-muted">All permissions</span>
-              <span v-else-if="role.permissions?.length">{{ role.permissions.length }} permissions</span>
-              <span v-else class="text-muted">None</span>
-            </td>
-            <td>{{ role.usercount }}</td>
-            <td class="actions">
-              <button class="btn-sm" @click="editRole(role)">Edit</button>
-              <button
-                class="btn-sm btn-danger"
-                @click="confirmDeleteRole(role)"
-                :disabled="role.rolename === 'admin' || role.usercount > 0"
-              >
-                Delete
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <!-- User Modal -->
-  <div v-if="showCreateModal || editingUser" class="modal-overlay" @click.self="closeUserModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3>{{ editingUser ? 'Edit User' : 'Create User' }}</h3>
-        <button class="close-btn" @click="closeUserModal">&times;</button>
-      </div>
-      <div class="modal-body">
-        <form @submit.prevent="saveUser">
-          <div class="form-group">
-            <label>Username</label>
-            <input
-              type="text"
-              v-model="userForm.username"
-              required
-              :disabled="!!editingUser"
-              placeholder="username"
-            >
-          </div>
-          <div class="form-group">
-            <label>Email</label>
-            <input type="email" v-model="userForm.email" required placeholder="user@example.com">
-          </div>
-          <div class="form-row">
-            <div class="form-group">
-              <label>First Name</label>
-              <input type="text" v-model="userForm.firstname" placeholder="John">
-            </div>
-            <div class="form-group">
-              <label>Last Name</label>
-              <input type="text" v-model="userForm.lastname" placeholder="Doe">
-            </div>
-          </div>
-          <div class="form-group">
-            <label>{{ editingUser ? 'New Password (leave blank to keep current)' : 'Password' }}</label>
-            <input
-              type="password"
-              v-model="userForm.password"
-              :required="!editingUser"
-              placeholder="********"
-            >
-          </div>
-          <div class="form-group">
-            <label>Roles</label>
-            <div class="checkbox-group">
-              <label v-for="role in roles" :key="role.roleid" class="checkbox-label">
-                <input
-                  type="checkbox"
-                  :value="role.roleid"
-                  v-model="userForm.roles"
-                >
-                {{ role.rolename }}
-              </label>
-            </div>
-          </div>
-          <div class="form-group" v-if="editingUser">
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="userForm.isactive">
-              Account Active
-            </label>
-          </div>
-          <div class="form-group" v-if="editingUser && editingUser.islocked">
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="userForm.unlock">
-              Unlock Account
-            </label>
-          </div>
-          <div class="form-actions">
-            <button type="button" class="btn-secondary" @click="closeUserModal">Cancel</button>
-            <button type="submit" class="btn-primary" :disabled="saving">
-              {{ saving ? 'Saving...' : (editingUser ? 'Update' : 'Create') }}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <!-- Role Modal -->
-  <div v-if="showRoleModal || editingRole" class="modal-overlay" @click.self="closeRoleModal">
-    <div class="modal modal-lg">
-      <div class="modal-header">
-        <h3>{{ editingRole ? 'Edit Role' : 'Create Role' }}</h3>
-        <button class="close-btn" @click="closeRoleModal">&times;</button>
-      </div>
-      <div class="modal-body">
-        <form @submit.prevent="saveRole">
-          <div class="form-row">
-            <div class="form-group">
-              <label>Role Name</label>
-              <input
-                type="text"
-                v-model="roleForm.rolename"
-                required
-                :disabled="!!editingRole"
-                placeholder="rolename"
-              >
-            </div>
-            <div class="form-group">
-              <label>Description</label>
-              <input type="text" v-model="roleForm.description" placeholder="Role description">
-            </div>
-          </div>
-
-          <div class="form-group" v-if="!editingRole?.isadmin">
-            <label>Permissions</label>
-            <p class="text-muted" style="font-size: 0.85rem; margin: 0 0 0.5rem 0">
-              Select which actions this role can perform
-            </p>
-            <div class="permissions-grid">
-              <div v-for="(perms, category) in permissionsGrouped" :key="category" class="permission-category">
-                <div class="category-header">
-                  <label class="checkbox-label">
-                    <input
-                      type="checkbox"
-                      :checked="isCategoryFullySelected(category)"
-                      :indeterminate="isCategoryPartiallySelected(category)"
-                      @change="toggleCategory(category, $event.target.checked)"
-                    >
-                    <strong>{{ formatCategory(category) }}</strong>
-                  </label>
-                </div>
-                <div class="category-perms">
-                  <label v-for="p in perms" :key="p.name" class="checkbox-label perm-item">
-                    <input
-                      type="checkbox"
-                      :value="p.name"
-                      v-model="roleForm.permissions"
-                    >
-                    {{ p.description }}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else class="form-group">
-            <label>Permissions</label>
-            <p class="text-muted">Admin role has all permissions by default</p>
-          </div>
-
-          <div class="form-actions">
-            <button type="button" class="btn-secondary" @click="closeRoleModal">Cancel</button>
-            <button type="submit" class="btn-primary" :disabled="saving">
-              {{ saving ? 'Saving...' : (editingRole ? 'Update' : 'Create') }}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete Confirmation -->
-  <div v-if="deletingUser" class="modal-overlay" @click.self="deletingUser = null">
-    <div class="modal modal-sm">
-      <div class="modal-header">
-        <h3>Delete User</h3>
-        <button class="close-btn" @click="deletingUser = null">&times;</button>
-      </div>
-      <div class="modal-body">
-        <p>Are you sure you want to delete user <strong>{{ deletingUser.username }}</strong>?</p>
-        <p class="text-muted">This action cannot be undone.</p>
-        <div class="form-actions">
-          <button class="btn-secondary" @click="deletingUser = null">Cancel</button>
-          <button class="btn-danger" @click="deleteUser" :disabled="saving">
-            {{ saving ? 'Deleting...' : 'Delete' }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div v-if="error" class="error-toast">{{ error }}</div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { usersApi } from '../../api'
-import { useAuthStore } from '../../stores/auth'
-
-const authStore = useAuthStore()
-const currentUserId = authStore.user?.userid
-
-const users = ref([])
-const roles = ref([])
-const permissions = ref([])
-const permissionsGrouped = ref({})
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-
-// Modals
-const showCreateModal = ref(false)
-const showRoleModal = ref(false)
-const editingUser = ref(null)
-const editingRole = ref(null)
-const deletingUser = ref(null)
-
-// Forms
-const userForm = reactive({
-  username: '',
-  email: '',
-  firstname: '',
-  lastname: '',
-  password: '',
-  roles: [],
-  isactive: true,
-  unlock: false
-})
-
-const roleForm = reactive({
-  rolename: '',
-  description: '',
-  permissions: []
-})
-
-async function loadData() {
-  loading.value = true
-  try {
-    const [usersRes, rolesRes, permsRes] = await Promise.all([
-      usersApi.list(),
-      usersApi.roles.list(),
-      usersApi.permissions.list()
-    ])
-    users.value = usersRes.data.data
-    roles.value = rolesRes.data.data
-    permissions.value = permsRes.data.data.permissions
-    permissionsGrouped.value = permsRes.data.data.grouped
-  } catch (e) {
-    error.value = 'Failed to load users'
-    setTimeout(() => error.value = '', 3000)
-  } finally {
-    loading.value = false
-  }
-}
-
-function formatCategory(cat) {
-  return cat.charAt(0).toUpperCase() + cat.slice(1)
-}
-
-function isCategoryFullySelected(category) {
-  const catPerms = permissionsGrouped.value[category] || []
-  return catPerms.length > 0 && catPerms.every(p => roleForm.permissions.includes(p.name))
-}
-
-function isCategoryPartiallySelected(category) {
-  const catPerms = permissionsGrouped.value[category] || []
-  const selected = catPerms.filter(p => roleForm.permissions.includes(p.name))
-  return selected.length > 0 && selected.length < catPerms.length
-}
-
-function toggleCategory(category, checked) {
-  const catPerms = permissionsGrouped.value[category] || []
-  const permNames = catPerms.map(p => p.name)
-
-  if (checked) {
-    // Add all perms from this category
-    for (const name of permNames) {
-      if (!roleForm.permissions.includes(name)) {
-        roleForm.permissions.push(name)
-      }
-    }
-  } else {
-    // Remove all perms from this category
-    roleForm.permissions = roleForm.permissions.filter(p => !permNames.includes(p))
-  }
-}
-
-function formatDate(iso) {
-  if (!iso) return 'Never'
-  return new Date(iso).toLocaleDateString()
-}
-
-function editUser(user) {
-  editingUser.value = user
-  userForm.username = user.username
-  userForm.email = user.email
-  userForm.firstname = user.firstname || ''
-  userForm.lastname = user.lastname || ''
-  userForm.password = ''
-  userForm.roles = user.roles.map(r => r.roleid)
-  userForm.isactive = user.isactive
-  userForm.unlock = false
-}
-
-function closeUserModal() {
-  showCreateModal.value = false
-  editingUser.value = null
-  Object.assign(userForm, {
-    username: '', email: '', firstname: '', lastname: '',
-    password: '', roles: [], isactive: true, unlock: false
-  })
-}
-
-async function saveUser() {
-  saving.value = true
-  error.value = ''
-  try {
-    const data = {
-      email: userForm.email,
-      firstname: userForm.firstname || null,
-      lastname: userForm.lastname || null,
-      roles: userForm.roles
-    }
-
-    if (editingUser.value) {
-      data.isactive = userForm.isactive
-      if (userForm.password) data.password = userForm.password
-      if (userForm.unlock) data.unlock = true
-      await usersApi.update(editingUser.value.userid, data)
-    } else {
-      data.username = userForm.username
-      data.password = userForm.password
-      await usersApi.create(data)
-    }
-
-    closeUserModal()
-    await loadData()
-  } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save user'
-    setTimeout(() => error.value = '', 3000)
-  } finally {
-    saving.value = false
-  }
-}
-
-function confirmDelete(user) {
-  deletingUser.value = user
-}
-
-async function deleteUser() {
-  saving.value = true
-  try {
-    await usersApi.delete(deletingUser.value.userid)
-    deletingUser.value = null
-    await loadData()
-  } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to delete user'
-    setTimeout(() => error.value = '', 3000)
-  } finally {
-    saving.value = false
-  }
-}
-
-// Roles
-function editRole(role) {
-  editingRole.value = role
-  roleForm.rolename = role.rolename
-  roleForm.description = role.description || ''
-  roleForm.permissions = role.permissions ? [...role.permissions] : []
-}
-
-function closeRoleModal() {
-  showRoleModal.value = false
-  editingRole.value = null
-  roleForm.rolename = ''
-  roleForm.description = ''
-  roleForm.permissions = []
-}
-
-async function saveRole() {
-  saving.value = true
-  error.value = ''
-  try {
-    const data = {
-      description: roleForm.description,
-      permissions: roleForm.permissions
-    }
-
-    if (editingRole.value) {
-      await usersApi.roles.update(editingRole.value.roleid, data)
-    } else {
-      data.rolename = roleForm.rolename
-      await usersApi.roles.create(data)
-    }
-    closeRoleModal()
-    await loadData()
-  } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to save role'
-    setTimeout(() => error.value = '', 3000)
-  } finally {
-    saving.value = false
-  }
-}
-
-function confirmDeleteRole(role) {
-  if (confirm(`Delete role "${role.rolename}"?`)) {
-    deleteRole(role)
-  }
-}
-
-async function deleteRole(role) {
-  try {
-    await usersApi.roles.delete(role.roleid)
-    await loadData()
-  } catch (e) {
-    error.value = e.response?.data?.message || 'Failed to delete role'
-    setTimeout(() => error.value = '', 3000)
-  }
-}
-
-onMounted(loadData)
-</script>
-
-<style scoped>
-.badge {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  margin-right: 0.25rem;
-}
-
-.badge-primary { background: var(--primary); color: white; }
-.badge-secondary { background: var(--secondary); color: white; }
-.badge-success { background: var(--success); color: white; }
-.badge-warning { background: var(--warning); color: #000; }
-.badge-danger { background: var(--danger); color: white; }
-
-.text-muted { color: var(--text-light); }
-
-.btn-primary {
-  background: var(--primary);
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-primary:hover { background: var(--primary-dark); }
-
-.btn-secondary {
-  background: var(--secondary);
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-danger {
-  background: var(--danger);
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.85rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--text);
-}
-
-.btn-sm:hover { background: var(--border); }
-.btn-sm.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
-.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.actions {
-  white-space: nowrap;
-}
-
-.actions button { margin-right: 0.25rem; }
-
-.loading, .empty {
-  text-align: center;
-  color: var(--text-light);
-  padding: 2rem;
-}
-
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  width: 500px;
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-sm { width: 400px; }
-.modal-lg { width: 700px; }
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h3 { margin: 0; }
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--text-light);
-  line-height: 1;
-}
-
-.modal-body {
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.9rem;
-  color: var(--text);
-}
-
-.form-group input,
-.form-group textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--text);
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: var(--primary);
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.checkbox-label input[type="checkbox"] {
-  width: auto;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-
-.error-toast {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  background: var(--danger);
-  color: white;
-  padding: 0.75rem 1rem;
-  border-radius: 4px;
-  z-index: 1001;
-}
-
-/* Permissions grid */
-.permissions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-}
-
-.permission-category {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0.5rem;
-}
-
-.category-header {
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.category-perms {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.perm-item {
-  font-size: 0.85rem;
-  padding: 0.25rem 0;
-}
-</style>
+<template>
+  <div class="page-header">
+    <h1>User Management</h1>
+    <button class="btn-primary" @click="showCreateModal = true">Add User</button>
+  </div>
+
+  <div class="card">
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Name</th>
+            <th>Roles</th>
+            <th>Status</th>
+            <th>Last Login</th>
+            <th class="actions">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td colspan="7" class="loading">Loading...</td>
+          </tr>
+          <tr v-else-if="!users.length">
+            <td colspan="7" class="empty">No users found</td>
+          </tr>
+          <tr v-for="user in users" :key="user.userid">
+            <td>{{ user.username }}</td>
+            <td>{{ user.email }}</td>
+            <td>{{ [user.firstname, user.lastname].filter(Boolean).join(' ') || '-' }}</td>
+            <td>
+              <span
+                v-for="role in user.roles"
+                :key="role.roleid"
+                class="badge"
+                :class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'"
+              >
+                {{ role.rolename }}
+              </span>
+              <span v-if="!user.roles.length" class="text-muted">None</span>
+            </td>
+            <td>
+              <span v-if="user.islocked" class="badge badge-danger">Locked</span>
+              <span v-else-if="!user.isactive" class="badge badge-warning">Inactive</span>
+              <span v-else class="badge badge-success">Active</span>
+            </td>
+            <td>{{ formatDate(user.lastlogindate) }}</td>
+            <td class="actions">
+              <button class="btn-sm" @click="editUser(user)">Edit</button>
+              <button
+                class="btn-sm btn-danger"
+                @click="confirmDelete(user)"
+                :disabled="user.userid === currentUserId"
+              >
+                Delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Roles Section -->
+  <div class="page-header" style="margin-top: 2rem">
+    <h2>Roles</h2>
+    <button class="btn-secondary" @click="showRoleModal = true">Add Role</button>
+  </div>
+
+  <div class="card">
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Role Name</th>
+            <th>Description</th>
+            <th>Permissions</th>
+            <th>Users</th>
+            <th class="actions">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="role in roles" :key="role.roleid">
+            <td>
+              <span class="badge" :class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'">
+                {{ role.rolename }}
+              </span>
+            </td>
+            <td class="cell-truncate" :title="role.description">{{ role.description || '-' }}</td>
+            <td>
+              <span v-if="role.isadmin" class="text-muted">All permissions</span>
+              <span v-else-if="role.permissions?.length">{{ role.permissions.length }} permissions</span>
+              <span v-else class="text-muted">None</span>
+            </td>
+            <td>{{ role.usercount }}</td>
+            <td class="actions">
+              <button class="btn-sm" @click="editRole(role)">Edit</button>
+              <button
+                class="btn-sm btn-danger"
+                @click="confirmDeleteRole(role)"
+                :disabled="role.rolename === 'admin' || role.usercount > 0"
+              >
+                Delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- User Modal -->
+  <div v-if="showCreateModal || editingUser" class="modal-overlay" @click.self="closeUserModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>{{ editingUser ? 'Edit User' : 'Create User' }}</h3>
+        <button class="close-btn" @click="closeUserModal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form @submit.prevent="saveUser">
+          <div class="form-group">
+            <label>Username</label>
+            <input
+              type="text"
+              v-model="userForm.username"
+              required
+              :disabled="!!editingUser"
+              placeholder="username"
+            >
+          </div>
+          <div class="form-group">
+            <label>Email</label>
+            <input type="email" v-model="userForm.email" required placeholder="user@example.com">
+          </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label>First Name</label>
+              <input type="text" v-model="userForm.firstname" placeholder="John">
+            </div>
+            <div class="form-group">
+              <label>Last Name</label>
+              <input type="text" v-model="userForm.lastname" placeholder="Doe">
+            </div>
+          </div>
+          <div class="form-group">
+            <label>{{ editingUser ? 'New Password (leave blank to keep current)' : 'Password' }}</label>
+            <input
+              type="password"
+              v-model="userForm.password"
+              :required="!editingUser"
+              placeholder="********"
+            >
+          </div>
+          <div class="form-group">
+            <label>Roles</label>
+            <div class="checkbox-group">
+              <label v-for="role in roles" :key="role.roleid" class="checkbox-label">
+                <input
+                  type="checkbox"
+                  :value="role.roleid"
+                  v-model="userForm.roles"
+                >
+                {{ role.rolename }}
+              </label>
+            </div>
+          </div>
+          <div class="form-group" v-if="editingUser">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="userForm.isactive">
+              Account Active
+            </label>
+          </div>
+          <div class="form-group" v-if="editingUser && editingUser.islocked">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="userForm.unlock">
+              Unlock Account
+            </label>
+          </div>
+          <div class="form-actions">
+            <button type="button" class="btn-secondary" @click="closeUserModal">Cancel</button>
+            <button type="submit" class="btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : (editingUser ? 'Update' : 'Create') }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <!-- Role Modal -->
+  <div v-if="showRoleModal || editingRole" class="modal-overlay" @click.self="closeRoleModal">
+    <div class="modal modal-lg">
+      <div class="modal-header">
+        <h3>{{ editingRole ? 'Edit Role' : 'Create Role' }}</h3>
+        <button class="close-btn" @click="closeRoleModal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form @submit.prevent="saveRole">
+          <div class="form-row">
+            <div class="form-group">
+              <label>Role Name</label>
+              <input
+                type="text"
+                v-model="roleForm.rolename"
+                required
+                :disabled="!!editingRole"
+                placeholder="rolename"
+              >
+            </div>
+            <div class="form-group">
+              <label>Description</label>
+              <input type="text" v-model="roleForm.description" placeholder="Role description">
+            </div>
+          </div>
+
+          <div class="form-group" v-if="!editingRole?.isadmin">
+            <label>Permissions</label>
+            <p class="text-muted" style="font-size: 0.85rem; margin: 0 0 0.5rem 0">
+              Select which actions this role can perform
+            </p>
+            <div class="permissions-grid">
+              <div v-for="(perms, category) in permissionsGrouped" :key="category" class="permission-category">
+                <div class="category-header">
+                  <label class="checkbox-label">
+                    <input
+                      type="checkbox"
+                      :checked="isCategoryFullySelected(category)"
+                      :indeterminate="isCategoryPartiallySelected(category)"
+                      @change="toggleCategory(category, $event.target.checked)"
+                    >
+                    <strong>{{ formatCategory(category) }}</strong>
+                  </label>
+                </div>
+                <div class="category-perms">
+                  <label v-for="p in perms" :key="p.name" class="checkbox-label perm-item">
+                    <input
+                      type="checkbox"
+                      :value="p.name"
+                      v-model="roleForm.permissions"
+                    >
+                    {{ p.description }}
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="form-group">
+            <label>Permissions</label>
+            <p class="text-muted">Admin role has all permissions by default</p>
+          </div>
+
+          <div class="form-actions">
+            <button type="button" class="btn-secondary" @click="closeRoleModal">Cancel</button>
+            <button type="submit" class="btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : (editingRole ? 'Update' : 'Create') }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Confirmation -->
+  <div v-if="deletingUser" class="modal-overlay" @click.self="deletingUser = null">
+    <div class="modal modal-sm">
+      <div class="modal-header">
+        <h3>Delete User</h3>
+        <button class="close-btn" @click="deletingUser = null">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to delete user <strong>{{ deletingUser.username }}</strong>?</p>
+        <p class="text-muted">This action cannot be undone.</p>
+        <div class="form-actions">
+          <button class="btn-secondary" @click="deletingUser = null">Cancel</button>
+          <button class="btn-danger" @click="deleteUser" :disabled="saving">
+            {{ saving ? 'Deleting...' : 'Delete' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="error" class="error-toast">{{ error }}</div>
+</template>
+
+<script setup>
+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
+
+const users = ref([])
+const roles = ref([])
+const permissions = ref([])
+const permissionsGrouped = ref({})
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+// Modals
+const showCreateModal = ref(false)
+const showRoleModal = ref(false)
+const editingUser = ref(null)
+const editingRole = ref(null)
+const deletingUser = ref(null)
+
+// Forms
+const userForm = reactive({
+  username: '',
+  email: '',
+  firstname: '',
+  lastname: '',
+  password: '',
+  roles: [],
+  isactive: true,
+  unlock: false
+})
+
+const roleForm = reactive({
+  rolename: '',
+  description: '',
+  permissions: []
+})
+
+async function loadData() {
+  loading.value = true
+  try {
+    const [usersRes, rolesRes, permsRes] = await Promise.all([
+      usersApi.list(),
+      usersApi.roles.list(),
+      usersApi.permissions.list()
+    ])
+    users.value = usersRes.data.data
+    roles.value = rolesRes.data.data
+    permissions.value = permsRes.data.data.permissions
+    permissionsGrouped.value = permsRes.data.data.grouped
+  } catch (e) {
+    error.value = 'Failed to load users'
+    setTimeout(() => error.value = '', 3000)
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatCategory(cat) {
+  return cat.charAt(0).toUpperCase() + cat.slice(1)
+}
+
+function isCategoryFullySelected(category) {
+  const catPerms = permissionsGrouped.value[category] || []
+  return catPerms.length > 0 && catPerms.every(p => roleForm.permissions.includes(p.name))
+}
+
+function isCategoryPartiallySelected(category) {
+  const catPerms = permissionsGrouped.value[category] || []
+  const selected = catPerms.filter(p => roleForm.permissions.includes(p.name))
+  return selected.length > 0 && selected.length < catPerms.length
+}
+
+function toggleCategory(category, checked) {
+  const catPerms = permissionsGrouped.value[category] || []
+  const permNames = catPerms.map(p => p.name)
+
+  if (checked) {
+    // Add all perms from this category
+    for (const name of permNames) {
+      if (!roleForm.permissions.includes(name)) {
+        roleForm.permissions.push(name)
+      }
+    }
+  } else {
+    // Remove all perms from this category
+    roleForm.permissions = roleForm.permissions.filter(p => !permNames.includes(p))
+  }
+}
+
+function formatDate(iso) {
+  if (!iso) return 'Never'
+  return new Date(iso).toLocaleDateString()
+}
+
+function editUser(user) {
+  editingUser.value = user
+  userForm.username = user.username
+  userForm.email = user.email
+  userForm.firstname = user.firstname || ''
+  userForm.lastname = user.lastname || ''
+  userForm.password = ''
+  userForm.roles = user.roles.map(r => r.roleid)
+  userForm.isactive = user.isactive
+  userForm.unlock = false
+}
+
+function closeUserModal() {
+  showCreateModal.value = false
+  editingUser.value = null
+  Object.assign(userForm, {
+    username: '', email: '', firstname: '', lastname: '',
+    password: '', roles: [], isactive: true, unlock: false
+  })
+}
+
+async function saveUser() {
+  saving.value = true
+  error.value = ''
+  try {
+    const data = {
+      email: userForm.email,
+      firstname: userForm.firstname || null,
+      lastname: userForm.lastname || null,
+      roles: userForm.roles
+    }
+
+    if (editingUser.value) {
+      data.isactive = userForm.isactive
+      if (userForm.password) data.password = userForm.password
+      if (userForm.unlock) data.unlock = true
+      await usersApi.update(editingUser.value.userid, data)
+    } else {
+      data.username = userForm.username
+      data.password = userForm.password
+      await usersApi.create(data)
+    }
+
+    closeUserModal()
+    await loadData()
+  } catch (e) {
+    error.value = apiError(e, 'Failed to save user')
+    setTimeout(() => error.value = '', 3000)
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(user) {
+  deletingUser.value = user
+}
+
+async function deleteUser() {
+  saving.value = true
+  try {
+    await usersApi.delete(deletingUser.value.userid)
+    deletingUser.value = null
+    await loadData()
+  } catch (e) {
+    error.value = apiError(e, 'Failed to delete user')
+    setTimeout(() => error.value = '', 3000)
+  } finally {
+    saving.value = false
+  }
+}
+
+// Roles
+function editRole(role) {
+  editingRole.value = role
+  roleForm.rolename = role.rolename
+  roleForm.description = role.description || ''
+  roleForm.permissions = role.permissions ? [...role.permissions] : []
+}
+
+function closeRoleModal() {
+  showRoleModal.value = false
+  editingRole.value = null
+  roleForm.rolename = ''
+  roleForm.description = ''
+  roleForm.permissions = []
+}
+
+async function saveRole() {
+  saving.value = true
+  error.value = ''
+  try {
+    const data = {
+      description: roleForm.description,
+      permissions: roleForm.permissions
+    }
+
+    if (editingRole.value) {
+      await usersApi.roles.update(editingRole.value.roleid, data)
+    } else {
+      data.rolename = roleForm.rolename
+      await usersApi.roles.create(data)
+    }
+    closeRoleModal()
+    await loadData()
+  } catch (e) {
+    error.value = apiError(e, 'Failed to save role')
+    setTimeout(() => error.value = '', 3000)
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDeleteRole(role) {
+  if (confirm(`Delete role "${role.rolename}"?`)) {
+    deleteRole(role)
+  }
+}
+
+async function deleteRole(role) {
+  try {
+    await usersApi.roles.delete(role.roleid)
+    await loadData()
+  } catch (e) {
+    error.value = apiError(e, 'Failed to delete role')
+    setTimeout(() => error.value = '', 3000)
+  }
+}
+
+onMounted(loadData)
+</script>
+
+<style scoped>
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  margin-right: 0.25rem;
+}
+
+.badge-primary { background: var(--primary); color: white; }
+.badge-secondary { background: var(--secondary); color: white; }
+.badge-success { background: var(--success); color: white; }
+.badge-warning { background: var(--warning); color: #000; }
+.badge-danger { background: var(--danger); color: white; }
+
+.text-muted { color: var(--text-light); }
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-primary:hover { background: var(--primary-dark); }
+
+.btn-secondary {
+  background: var(--secondary);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text);
+}
+
+.btn-sm:hover { background: var(--border); }
+.btn-sm.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
+.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.actions {
+  white-space: nowrap;
+}
+
+.actions button { margin-right: 0.25rem; }
+
+.loading, .empty {
+  text-align: center;
+  color: var(--text-light);
+  padding: 2rem;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-sm { width: 400px; }
+.modal-lg { width: 700px; }
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 { margin: 0; }
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-light);
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: auto;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.error-toast {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  background: var(--danger);
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  z-index: 1001;
+}
+
+/* Permissions grid */
+.permissions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.permission-category {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.5rem;
+}
+
+.category-header {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.category-perms {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.perm-item {
+  font-size: 0.85rem;
+  padding: 0.25rem 0;
+}
+</style>
diff --git a/frontend/src/views/settings/VLANsList.vue b/frontend/src/views/settings/VLANsList.vue
index 4f423ae..66f505e 100644
--- a/frontend/src/views/settings/VLANsList.vue
+++ b/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>
diff --git a/frontend/src/views/usb/USBDetail.vue b/frontend/src/views/usb/USBDetail.vue
index 7a848f3..dd0a9de 100644
--- a/frontend/src/views/usb/USBDetail.vue
+++ b/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'))
   }
 }
 
diff --git a/frontend/src/views/usb/USBForm.vue b/frontend/src/views/usb/USBForm.vue
index 78c24ef..8b92658 100644
--- a/frontend/src/views/usb/USBForm.vue
+++ b/frontend/src/views/usb/USBForm.vue
@@ -1,230 +1,231 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>{{ isEdit ? 'Edit USB Device' : 'Add USB Device' }}</h2>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <form v-else @submit.prevent="saveDevice">
-        <div class="form-group">
-          <label for="serialnumber">Serial Number *</label>
-          <input
-            id="serialnumber"
-            v-model="form.serialnumber"
-            type="text"
-            class="form-control"
-            required
-            maxlength="100"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="displayname">Display Name *</label>
-          <input
-            id="displayname"
-            v-model="form.displayname"
-            type="text"
-            class="form-control"
-            required
-            maxlength="100"
-            placeholder="e.g., USB Flash Drive #1"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="label">Label</label>
-          <input
-            id="label"
-            v-model="form.label"
-            type="text"
-            class="form-control"
-            maxlength="100"
-            placeholder="Physical label on device"
-          />
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="usbtypeid">Device Type</label>
-            <select
-              id="usbtypeid"
-              v-model="form.usbtypeid"
-              class="form-control"
-            >
-              <option value="">-- Select Type --</option>
-              <option
-                v-for="type in types"
-                :key="type.usbtypeid"
-                :value="type.usbtypeid"
-              >
-                {{ type.typename }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label for="capacitygb">Capacity (GB)</label>
-            <input
-              id="capacitygb"
-              v-model.number="form.capacitygb"
-              type="number"
-              class="form-control"
-              min="0"
-              step="1"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="vendorid">Vendor</label>
-          <select
-            id="vendorid"
-            v-model="form.vendorid"
-            class="form-control"
-          >
-            <option value="">-- Select Vendor --</option>
-            <option
-              v-for="vendor in vendors"
-              :key="vendor.vendorid"
-              :value="vendor.vendorid"
-            >
-              {{ vendor.vendorname }}
-            </option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="notes">Notes</label>
-          <textarea
-            id="notes"
-            v-model="form.notes"
-            class="form-control"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <div v-if="error" class="error-message">{{ error }}</div>
-
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary" :disabled="saving">
-            {{ saving ? 'Saving...' : (isEdit ? 'Update Device' : 'Add Device') }}
-          </button>
-          <router-link to="/usb" class="btn btn-secondary">Cancel</router-link>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { usbApi, vendorsApi } from '@/api'
-
-const route = useRoute()
-const router = useRouter()
-
-const isEdit = computed(() => !!route.params.id)
-
-const loading = ref(true)
-const saving = ref(false)
-const error = ref('')
-
-const types = ref([])
-const vendors = ref([])
-
-const form = ref({
-  serialnumber: '',
-  displayname: '',
-  label: '',
-  usbtypeid: '',
-  capacitygb: null,
-  vendorid: '',
-  notes: ''
-})
-
-onMounted(async () => {
-  try {
-    // Load types and vendors
-    const [typesRes, vendorsRes] = await Promise.all([
-      usbApi.types.list(),
-      vendorsApi.list({ perpage: 1000 })
-    ])
-    types.value = typesRes.data.data || []
-    vendors.value = vendorsRes.data.data || []
-
-    // Load device if editing
-    if (isEdit.value) {
-      const response = await usbApi.get(route.params.id)
-      const device = response.data.data
-
-      form.value = {
-        serialnumber: device.serialnumber || '',
-        displayname: device.displayname || '',
-        label: device.label || '',
-        usbtypeid: device.usbtypeid || '',
-        capacitygb: device.capacitygb || null,
-        vendorid: device.vendorid || '',
-        notes: device.notes || ''
-      }
-    }
-  } catch (err) {
-    console.error('Error loading data:', err)
-    error.value = 'Failed to load data'
-  } finally {
-    loading.value = false
-  }
-})
-
-async function saveDevice() {
-  error.value = ''
-  saving.value = true
-
-  try {
-    const data = {
-      serialnumber: form.value.serialnumber,
-      displayname: form.value.displayname,
-      label: form.value.label || null,
-      usbtypeid: form.value.usbtypeid || null,
-      capacitygb: form.value.capacitygb || null,
-      vendorid: form.value.vendorid || null,
-      notes: form.value.notes || null
-    }
-
-    if (isEdit.value) {
-      await usbApi.update(route.params.id, data)
-    } else {
-      await usbApi.create(data)
-    }
-
-    router.push('/usb')
-  } catch (err) {
-    console.error('Error saving device:', err)
-    error.value = err.response?.data?.message || 'Failed to save device'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.form-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-}
-
-@media (max-width: 600px) {
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit USB Device' : 'Add USB Device' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveDevice">
+        <div class="form-group">
+          <label for="serialnumber">Serial Number *</label>
+          <input
+            id="serialnumber"
+            v-model="form.serialnumber"
+            type="text"
+            class="form-control"
+            required
+            maxlength="100"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="displayname">Display Name *</label>
+          <input
+            id="displayname"
+            v-model="form.displayname"
+            type="text"
+            class="form-control"
+            required
+            maxlength="100"
+            placeholder="e.g., USB Flash Drive #1"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="label">Label</label>
+          <input
+            id="label"
+            v-model="form.label"
+            type="text"
+            class="form-control"
+            maxlength="100"
+            placeholder="Physical label on device"
+          />
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="usbtypeid">Device Type</label>
+            <select
+              id="usbtypeid"
+              v-model="form.usbtypeid"
+              class="form-control"
+            >
+              <option value="">-- Select Type --</option>
+              <option
+                v-for="type in types"
+                :key="type.usbtypeid"
+                :value="type.usbtypeid"
+              >
+                {{ type.typename }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="capacitygb">Capacity (GB)</label>
+            <input
+              id="capacitygb"
+              v-model.number="form.capacitygb"
+              type="number"
+              class="form-control"
+              min="0"
+              step="1"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="vendorid">Vendor</label>
+          <select
+            id="vendorid"
+            v-model="form.vendorid"
+            class="form-control"
+          >
+            <option value="">-- Select Vendor --</option>
+            <option
+              v-for="vendor in vendors"
+              :key="vendor.vendorid"
+              :value="vendor.vendorid"
+            >
+              {{ vendor.vendorname }}
+            </option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : (isEdit ? 'Update Device' : 'Add Device') }}
+          </button>
+          <router-link to="/usb" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const types = ref([])
+const vendors = ref([])
+
+const form = ref({
+  serialnumber: '',
+  displayname: '',
+  label: '',
+  usbtypeid: '',
+  capacitygb: null,
+  vendorid: '',
+  notes: ''
+})
+
+onMounted(async () => {
+  try {
+    // Load types and vendors
+    const [typesRes, vendorsRes] = await Promise.all([
+      usbApi.types.list(),
+      vendorsApi.list({ perpage: 1000 })
+    ])
+    types.value = typesRes.data.data || []
+    vendors.value = vendorsRes.data.data || []
+
+    // Load device if editing
+    if (isEdit.value) {
+      const response = await usbApi.get(route.params.id)
+      const device = response.data.data
+
+      form.value = {
+        serialnumber: device.serialnumber || '',
+        displayname: device.displayname || '',
+        label: device.label || '',
+        usbtypeid: device.usbtypeid || '',
+        capacitygb: device.capacitygb || null,
+        vendorid: device.vendorid || '',
+        notes: device.notes || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveDevice() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const data = {
+      serialnumber: form.value.serialnumber,
+      displayname: form.value.displayname,
+      label: form.value.label || null,
+      usbtypeid: form.value.usbtypeid || null,
+      capacitygb: form.value.capacitygb || null,
+      vendorid: form.value.vendorid || null,
+      notes: form.value.notes || null
+    }
+
+    if (isEdit.value) {
+      await usbApi.update(route.params.id, data)
+    } else {
+      await usbApi.create(data)
+    }
+
+    router.push('/usb')
+  } catch (err) {
+    console.error('Error saving device:', err)
+    error.value = apiError(err, 'Failed to save device')
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 600px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/usb/USBList.vue b/frontend/src/views/usb/USBList.vue
index c6aa94a..469eb8d 100644
--- a/frontend/src/views/usb/USBList.vue
+++ b/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'))
   }
 }
 
diff --git a/frontend/src/views/vendors/VendorsList.vue b/frontend/src/views/vendors/VendorsList.vue
index 6f63483..3697352 100644
--- a/frontend/src/views/vendors/VendorsList.vue
+++ b/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
   }
diff --git a/frontend/src/views/warranty/WarrantiesList.vue b/frontend/src/views/warranty/WarrantiesList.vue
index f6d3e69..c01f4ea 100644
--- a/frontend/src/views/warranty/WarrantiesList.vue
+++ b/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; }
diff --git a/plugins/warranty/api/routes.py b/plugins/warranty/api/routes.py
index 10a1189..bed5156 100644
--- a/plugins/warranty/api/routes.py
+++ b/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():
-        w = Warranty.query.get(link.warrantyid)
-        if w and w.isactive and w.enddate:
-            covered.add(link.assetid)
+    if not recheck_all:
+        for link in WarrantyAsset.query.all():
+            w = Warranty.query.get(link.warrantyid)
+            if w and w.isactive and w.enddate:
+                covered.add(link.assetid)
 
     # Candidate assets: active, have a serial, not already covered.
     candidates = (Asset.query