Frontend: asset identifiers, statuses, printer types, UI fixes

- Wire gauge/maintenance refs + identifier toggles into equipment pages.
- Repoint status dropdowns and Settings>Statuses to asset statuses.
- Printer type column/filter; require vendor before model; printer-model picker.
- Per-type identifier labels; printer detail title fallback.
- Fixes: truncate long description cells, opaque supply modal, readable
  dark-mode autofill, drum/waste default colorless.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/printers/PrintersList.vue

@@ -17,6 +17,12 @@
         placeholder="Search printers..."
         @input="debouncedSearch"
       />
+      <select v-model="typeFilter" class="form-control" @change="onFilterChange">
+        <option value="">All types</option>
+        <option v-for="pt in printerTypes" :key="pt.printertypeid" :value="pt.printertypeid">
+          {{ pt.printertype }}
+        </option>
+      </select>
     </div>
 
     <div class="card">
@@ -27,9 +33,10 @@
           <table>
             <thead>
               <tr>
-                <th>Asset #</th>
+                <th>Asset Tag</th>
                 <th>Name</th>
                 <th>Business Unit</th>
+                <th>Type</th>
                 <th>Model</th>
                 <th>Status</th>
                 <th>Actions</th>
@@ -38,8 +45,9 @@
             <tbody>
               <tr v-for="printer in printers" :key="printer.printer?.printerid || printer.assetid">
                 <td>{{ printer.assetnumber }}</td>
-                <td>{{ printer.name || '-' }}</td>
+                <td>{{ printer.name && printer.name.toUpperCase() !== 'NONE' ? printer.name : (printer.printer?.hostname || '-') }}</td>
                 <td>{{ printer.businessunitname || '-' }}</td>
+                <td>{{ printer.printer?.printertypename || '-' }}</td>
                 <td>{{ printer.printer?.modelname || '-' }}</td>
                 <td>
                   <span class="badge" :class="getStatusClass(printer.statusname)">
@@ -56,7 +64,7 @@
                 </td>
               </tr>
               <tr v-if="printers.length === 0">
-                <td colspan="6" style="text-align: center; color: var(--text-light);">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
                   No printers found
                 </td>
               </tr>
@@ -83,6 +91,8 @@ import { printersApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 
 const printers = ref([])
+const printerTypes = ref([])
+const typeFilter = ref('')
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
@@ -91,7 +101,13 @@ const perPage = ref(20)
 
 let searchTimeout = null
 
-onMounted(() => {
+onMounted(async () => {
+  try {
+    const response = await printersApi.types.list({ perpage: 100 })
+    printerTypes.value = response.data.data || []
+  } catch (error) {
+    console.error('Error loading printer types:', error)
+  }
   loadPrinters()
 })
 
@@ -103,6 +119,7 @@ async function loadPrinters() {
       perpage: perPage.value
     }
     if (search.value) params.search = search.value
+    if (typeFilter.value) params.typeid = typeFilter.value
 
     const response = await printersApi.list(params)
     printers.value = response.data.data || []
@@ -122,6 +139,11 @@ function debouncedSearch() {
   }, 300)
 }
 
+function onFilterChange() {
+  page.value = 1
+  loadPrinters()
+}
+
 function goToPage(p) {
   page.value = p
   loadPrinters()