Add the measuringtools plugin (ADR-005) and the plugin-system tutorial

Gage-lab instruments as Asset extensions: measuringtooltypes (color-coded
lookup) + measuringtools (calibration interval/dates, provider, notes) with
calibration status derived at read time (overdue / due soon / current /
unknown), never stored. Full CRUD API with permission-gated writes, types
management with in-use guard, calibration report, nav/reports/config-schema
hooks, and a complete frontend (list/detail/form, types settings page,
calibration report page, gated routes per ADR-009).

First plugin whose migration chain really creates tables post-cutover
(ADR-008), and the working example for docs/PLUGIN-GUIDE.md - a 12-section
walkthrough of building a plugin on this framework, linked from
PLUGIN-QUICKSTART and PLUGINS.

Verified: full suite 323 passing, live E2E on all four pages, fresh
scratch-MySQL migration dry-run green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/views/reports/CalibrationReport.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Calibration Due</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>Asset #</th>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Next Calibration</th>
+                <th>Provider</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in buckets[b.key]" :key="row.assetid">
+                <td>
+                  <router-link :to="`/measuringtools/${row.measuringtool.measuringtoolid}`" class="asset-chip">
+                    {{ row.assetnumber }}
+                  </router-link>
+                </td>
+                <td>{{ row.name || '-' }}</td>
+                <td>{{ row.measuringtool.measuringtooltypename || '-' }}</td>
+                <td>{{ row.measuringtool.nextcalibrationdate ? formatDate(row.measuringtool.nextcalibrationdate) : '-' }}</td>
+                <td>{{ row.measuringtool.calibrationprovider || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { measuringtoolsApi } from '../../api'
+
+const loading = ref(true)
+const counts = ref({})
+const buckets = ref({})
+
+const bucketOrder = [
+  { key: 'overdue', label: 'Overdue', color: '#F44336' },
+  { key: 'duesoon', label: 'Due Soon', color: '#FF9800' },
+  { key: 'current', label: 'Current', 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}` } }
+
+onMounted(async () => {
+  try {
+    const response = await measuringtoolsApi.calibrationReport()
+    counts.value = response.data.data.counts || {}
+    buckets.value = response.data.data.buckets || {}
+  } catch (err) {
+    console.error('Error loading calibration 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;
+  background: var(--bg); border-radius: 12px; font-size: 0.85rem; text-decoration: none; color: var(--text);
+}
+</style>