Add print badges, pagination, route splitting, JWT auth fixes, and list page alignment

- Fix equipment badge barcode not rendering (loading race condition)
- Fix printer QR code not rendering on initial load (same race condition)
- Add model image to equipment badge via imageurl from Model table
- Fix white-on-white machine number text on badge, tighten barcode spacing
- Add PaginationBar component used across all list pages
- Split monolithic router into per-plugin route modules
- Fix 25 GET API endpoints returning 401 (jwt_required -> optional=True)
- Align list page columns across Equipment, PCs, and Network pages
- Add print views: EquipmentBadge, PrinterQRSingle, PrinterQRBatch, USBLabelBatch
- Add PC Relationships report, migration docs, and CLAUDE.md project guide
- Various plugin model, API, and frontend refinements

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

frontend/src/views/usb/USBDetail.vue

@@ -17,8 +17,8 @@
             <h1>{{ device.alias || device.machinenumber }}</h1>
           </div>
           <div class="hero-meta">
-            <span class="badge badge-lg" :class="device.is_checked_out ? 'badge-warning' : 'badge-success'">
-              {{ device.is_checked_out ? 'Checked Out' : 'Available' }}
+            <span class="badge badge-lg" :class="device.ischeckedout ? 'badge-warning' : 'badge-success'">
+              {{ device.ischeckedout ? 'Checked Out' : 'Available' }}
             </span>
           </div>
           <div class="hero-details">
@@ -26,13 +26,13 @@
               <span class="hero-detail-label">Serial Number</span>
               <span class="hero-detail-value mono">{{ device.serialnumber }}</span>
             </div>
-            <div class="hero-detail" v-if="device.vendor_name">
+            <div class="hero-detail" v-if="device.vendorname">
               <span class="hero-detail-label">Vendor</span>
-              <span class="hero-detail-value">{{ device.vendor_name }}</span>
+              <span class="hero-detail-value">{{ device.vendorname }}</span>
             </div>
-            <div class="hero-detail" v-if="device.model_name">
+            <div class="hero-detail" v-if="device.modelname">
               <span class="hero-detail-label">Model</span>
-              <span class="hero-detail-value">{{ device.model_name }}</span>
+              <span class="hero-detail-value">{{ device.modelname }}</span>
             </div>
           </div>
         </div>
@@ -41,7 +41,7 @@
       <!-- Action Buttons -->
       <div class="action-buttons">
         <button
-          v-if="!device.is_checked_out"
+          v-if="!device.ischeckedout"
           class="btn btn-primary btn-lg"
           @click="openCheckoutModal"
         >
@@ -57,20 +57,20 @@
       </div>
 
       <!-- Current Checkout Info -->
-      <div class="section-card" v-if="device.current_checkout">
+      <div class="section-card" v-if="device.currentcheckout">
         <h3 class="section-title">Current Checkout</h3>
         <div class="info-list">
           <div class="info-row">
             <span class="info-label">Checked Out By</span>
-            <span class="info-value">{{ device.current_checkout.sso }}</span>
+            <span class="info-value">{{ device.currentcheckout.sso }}</span>
           </div>
           <div class="info-row">
             <span class="info-label">Checkout Time</span>
-            <span class="info-value">{{ formatDate(device.current_checkout.checkout_time) }}</span>
+            <span class="info-value">{{ formatDate(device.currentcheckout.checkouttime) }}</span>
           </div>
-          <div class="info-row" v-if="device.current_checkout.checkout_reason">
+          <div class="info-row" v-if="device.currentcheckout.checkoutreason">
             <span class="info-label">Reason</span>
-            <span class="info-value">{{ device.current_checkout.checkout_reason }}</span>
+            <span class="info-value">{{ device.currentcheckout.checkoutreason }}</span>
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
           <h3>Checkout History</h3>
         </div>
 
-        <div v-if="!device.checkout_history?.length" class="empty-state">
+        <div v-if="!device.checkouthistory?.length" class="empty-state">
           No checkout history
         </div>
 
@@ -97,15 +97,15 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="checkout in device.checkout_history" :key="checkout.checkoutid">
+              <tr v-for="checkout in device.checkouthistory" :key="checkout.checkoutid">
                 <td>{{ checkout.sso }}</td>
-                <td>{{ formatDate(checkout.checkout_time) }}</td>
-                <td>{{ checkout.checkin_time ? formatDate(checkout.checkin_time) : 'Still out' }}</td>
+                <td>{{ formatDate(checkout.checkouttime) }}</td>
+                <td>{{ checkout.checkintime ? formatDate(checkout.checkintime) : 'Still out' }}</td>
                 <td>
-                  <span v-if="checkout.checkin_time">{{ checkout.was_wiped ? 'Yes' : 'No' }}</span>
+                  <span v-if="checkout.checkintime">{{ checkout.waswiped ? 'Yes' : 'No' }}</span>
                   <span v-else>-</span>
                 </td>
-                <td>{{ checkout.checkout_reason || '-' }}</td>
+                <td>{{ checkout.checkoutreason || '-' }}</td>
               </tr>
             </tbody>
           </table>
@@ -146,7 +146,7 @@
       <template #body>
         <div class="form-group">
           <label class="checkbox-label">
-            <input type="checkbox" v-model="checkinForm.was_wiped" />
+            <input type="checkbox" v-model="checkinForm.waswiped" />
             Device was wiped
           </label>
         </div>
@@ -177,7 +177,7 @@ const device = ref(null)
 const showCheckoutModal = ref(false)
 const showCheckinModal = ref(false)
 const checkoutForm = ref({ sso: '', reason: '' })
-const checkinForm = ref({ was_wiped: false, notes: '' })
+const checkinForm = ref({ waswiped: false, notes: '' })
 
 onMounted(async () => {
   await loadDevice()
@@ -201,7 +201,7 @@ function openCheckoutModal() {
 }
 
 function openCheckinModal() {
-  checkinForm.value = { was_wiped: false, notes: '' }
+  checkinForm.value = { waswiped: false, notes: '' }
   showCheckinModal.value = true
 }
 

frontend/src/views/usb/USBForm.vue

@@ -150,7 +150,7 @@ onMounted(async () => {
     // Load types and vendors
     const [typesRes, vendorsRes] = await Promise.all([
       usbApi.types.list(),
-      vendorsApi.list({ per_page: 1000 })
+      vendorsApi.list({ perpage: 1000 })
     ])
     types.value = typesRes.data.data || []
     vendors.value = vendorsRes.data.data || []

frontend/src/views/usb/USBList.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="page-header">
       <h2>USB Devices</h2>
+      <router-link to="/print/usb-labels" class="btn btn-secondary" target="_blank">Print Labels</router-link>
     </div>
 
     <!-- Filters -->
@@ -38,24 +39,24 @@
               <tr v-for="device in devices" :key="device.machineid">
                 <td>
                   <strong>{{ device.alias || device.machinenumber }}</strong>
-                  <div v-if="device.model_name" class="text-muted">{{ device.model_name }}</div>
+                  <div v-if="device.modelname" class="text-muted">{{ device.modelname }}</div>
                 </td>
                 <td class="mono">{{ device.serialnumber || '-' }}</td>
                 <td>
-                  <span class="badge" :class="device.is_checked_out ? 'badge-warning' : 'badge-success'">
-                    {{ device.is_checked_out ? 'Checked Out' : 'Available' }}
+                  <span class="badge" :class="device.ischeckedout ? 'badge-warning' : 'badge-success'">
+                    {{ device.ischeckedout ? 'Checked Out' : 'Available' }}
                   </span>
                 </td>
                 <td>
-                  <template v-if="device.current_checkout">
-                    {{ device.current_checkout.checkout_name || device.current_checkout.sso }}
-                    <div class="text-muted">{{ formatDate(device.current_checkout.checkout_time) }}</div>
+                  <template v-if="device.currentcheckout">
+                    {{ device.currentcheckout.checkoutname || device.currentcheckout.sso }}
+                    <div class="text-muted">{{ formatDate(device.currentcheckout.checkouttime) }}</div>
                   </template>
                   <span v-else>-</span>
                 </td>
                 <td class="actions">
                   <button
-                    v-if="!device.is_checked_out"
+                    v-if="!device.ischeckedout"
                     class="btn btn-primary btn-sm"
                     @click="openCheckoutModal(device)"
                   >
@@ -86,16 +87,13 @@
         </div>
 
         <!-- Pagination -->
-        <div class="pagination" v-if="totalPages > 1">
-          <button
-            v-for="p in totalPages"
-            :key="p"
-            :class="{ active: p === page }"
-            @click="goToPage(p)"
-          >
-            {{ p }}
-          </button>
-        </div>
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
       </template>
     </div>
 
@@ -127,7 +125,7 @@
       <p>Checking in: <strong>{{ selectedDevice?.alias || selectedDevice?.machinenumber }}</strong></p>
       <div class="form-group">
         <label class="checkbox-label">
-          <input type="checkbox" v-model="checkinForm.was_wiped" />
+          <input type="checkbox" v-model="checkinForm.waswiped" />
           Device was wiped
         </label>
       </div>
@@ -148,19 +146,21 @@ import { ref, onMounted } from 'vue'
 import { usbApi } from '../../api'
 import Modal from '../../components/Modal.vue'
 import EmployeeSearch from '../../components/EmployeeSearch.vue'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const devices = ref([])
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 const showAvailableOnly = ref(false)
 
 const showCheckoutModal = ref(false)
 const showCheckinModal = ref(false)
 const selectedDevice = ref(null)
 const checkoutForm = ref({ reason: '' })
-const checkinForm = ref({ was_wiped: false, notes: '' })
+const checkinForm = ref({ waswiped: false, notes: '' })
 const selectedEmployee = ref(null)
 
 let searchTimeout = null
@@ -174,14 +174,14 @@ async function loadDevices() {
   try {
     const params = {
       page: page.value,
-      perpage: 20
+      perpage: perPage.value
     }
     if (search.value) params.search = search.value
     if (showAvailableOnly.value) params.available = 'true'
 
     const response = await usbApi.list(params)
     devices.value = response.data.data || []
-    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (error) {
     console.error('Error loading USB devices:', error)
   } finally {
@@ -202,6 +202,12 @@ function goToPage(p) {
   loadDevices()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadDevices()
+}
+
 function openCheckoutModal(device) {
   selectedDevice.value = device
   checkoutForm.value = { reason: '' }
@@ -211,7 +217,7 @@ function openCheckoutModal(device) {
 
 function openCheckinModal(device) {
   selectedDevice.value = device
-  checkinForm.value = { was_wiped: false, notes: '' }
+  checkinForm.value = { waswiped: false, notes: '' }
   showCheckinModal.value = true
 }