Add custom fields + warranty plugin, rework settings into two-pane shell

Feature work from the 2026-07 session:

Settings IA
- Replace the flat 27-card settings hub with a persistent two-pane shell
  (SettingsLayout.vue): grouped, searchable left rail + content pane.
- Nest all settings/* routes under the shell via router post-processing;
  shared nav catalog in settingsNav.js. Group by asset class (PCs, Printers,
  Equipment, Network) so per-type settings stop scattering.

Custom fields (core)
- customfields + customfieldvalues tables (migration 7d14), CRUD API at
  /api/customfields, per-asset value get/save.
- Settings management page + reusable CustomFieldsSection (detail) and
  CustomFieldsInputs (form) wired into all four asset types.

Warranty (new plugin)
- plugins/warranty: warranties + warrantyassets (migration 7d15), derived
  coverage status, provider abstraction (manual now; Dell/Lenovo/HP stubs).
- API CRUD + per-asset panel + report buckets; WarrantyPanel on all four
  detail pages; Warranties management page; Warranty report + Reports card.
- Seed warranty.* permissions.

Printer drivers
- printerdrivers table (migration 7d13) linked to printer models; drivers now
  surface on the matching printer's detail page.

Other
- PCDetail rebalanced (Network + Status + Warranty + custom fields on the right).
- Rename PCs list "Features" column to "Remote Access"; fix badge hover underline.
- Drop equipment islocationonly field.
- Centralize asset-type label/route maps into utils/assetTypes.js.

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

frontend/src/views/reports/ReportsIndex.vue

@@ -9,6 +9,11 @@
       <p>View printers with low or critical toner/supply levels</p>
       <span class="badge">Printers</span>
     </div>
+    <div class="report-card card" @click="router.push('/reports/warranty')">
+      <h3>Warranty Report</h3>
+      <p>Assets bucketed by coverage: expired, expiring soon, active</p>
+      <span class="badge">Warranty</span>
+    </div>
     <div v-for="report in reports" :key="report.id" class="report-card card" @click="runReport(report)">
       <h3>{{ report.name }}</h3>
       <p>{{ report.description }}</p>

frontend/src/views/reports/WarrantyReport.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Warranty Report</h1>
+      <router-link to="/reports" class="btn btn-secondary">Back to Reports</router-link>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+    <template v-else>
+      <div class="summary-row">
+        <div v-for="b in bucketOrder" :key="b.key" class="summary-card" :style="cardStyle(b.color)">
+          <span class="summary-count">{{ counts[b.key] || 0 }}</span>
+          <span class="summary-label">{{ b.label }}</span>
+        </div>
+      </div>
+
+      <template v-for="b in bucketOrder" :key="b.key">
+      <div class="bucket card" v-if="(buckets[b.key] || []).length">
+        <h3 class="bucket-title">
+          <span class="dot" :style="{ background: b.color }"></span>
+          {{ b.label }} ({{ (buckets[b.key] || []).length }})
+        </h3>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Vendor</th>
+                <th>Service Level</th>
+                <th>Ends</th>
+                <th>Covers</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="w in buckets[b.key]" :key="w.warrantyid">
+                <td><strong>{{ w.vendor }}</strong></td>
+                <td>{{ 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>
+                  <span v-if="!w.assets.length" class="muted">-</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { warrantyApi } from '../../api'
+
+const loading = ref(true)
+const counts = ref({})
+const buckets = ref({})
+
+const bucketOrder = [
+  { key: 'expired', label: 'Expired', color: '#F44336' },
+  { key: 'expiring', label: 'Expiring Soon', color: '#FF9800' },
+  { key: 'active', label: 'Active', color: '#4CAF50' },
+  { key: 'unknown', label: 'Unknown', color: '#9E9E9E' },
+]
+
+function formatDate(d) { return new Date(d + 'T00:00:00').toLocaleDateString() }
+function cardStyle(color) { return { borderTop: `3px solid ${color}` } }
+function assetLink(a) {
+  const map = { computer: '/pcs/', printer: '/printers/', network_device: '/network/', equipment: '/machines/' }
+  return (map[a.assettypename] || '/assets/') + a.assetid
+}
+
+onMounted(async () => {
+  try {
+    const response = await warrantyApi.report()
+    counts.value = response.data.data.counts || {}
+    buckets.value = response.data.data.buckets || {}
+  } catch (err) {
+    console.error('Error loading warranty report:', err)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.summary-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
+.summary-card {
+  flex: 1; min-width: 140px; padding: 1rem 1.25rem; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 0.25rem;
+}
+.summary-count { font-size: 1.8rem; font-weight: 700; color: var(--text); }
+.summary-label { font-size: 0.85rem; color: var(--text-light); }
+.bucket { margin-bottom: 1.25rem; }
+.bucket-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
+.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+.asset-chip {
+  display: inline-block; padding: 0.15rem 0.55rem; margin: 0 0.25rem 0.25rem 0;
+  background: var(--bg); border-radius: 12px; font-size: 0.8rem; text-decoration: none; color: var(--text);
+}
+.muted { color: var(--text-light); }
+</style>