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/pcs/PCsList.vue

@@ -30,6 +30,7 @@
                 <th>Type</th>
                 <th>Features</th>
                 <th>Status</th>
+                <th>Location</th>
                 <th>Actions</th>
               </tr>
             </thead>
@@ -38,17 +39,18 @@
                 <td>{{ item.assetnumber }}</td>
                 <td>{{ item.computer?.hostname || '-' }}</td>
                 <td class="mono">{{ item.serialnumber || '-' }}</td>
-                <td>{{ item.computer?.computertype_name || '-' }}</td>
+                <td>{{ item.computer?.computertypename || '-' }}</td>
                 <td class="features">
                   <span v-if="item.computer?.isvnc" class="feature-tag active">VNC</span>
                   <span v-if="item.computer?.iswinrm" class="feature-tag active">WinRM</span>
                   <span v-if="!item.computer?.isvnc && !item.computer?.iswinrm">-</span>
                 </td>
                 <td>
-                  <span class="badge" :class="getStatusClass(item.status_name)">
-                    {{ item.status_name || 'Unknown' }}
+                  <span class="badge" :class="getStatusClass(item.statusname)">
+                    {{ item.statusname || 'Unknown' }}
                   </span>
                 </td>
+                <td>{{ item.locationname || '-' }}</td>
                 <td class="actions">
                   <router-link
                     :to="`/pcs/${item.computer?.computerid || item.assetid}`"
@@ -59,7 +61,7 @@
                 </td>
               </tr>
               <tr v-if="computers.length === 0">
-                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                <td colspan="8" style="text-align: center; color: var(--text-light);">
                   No computers found
                 </td>
               </tr>
@@ -68,16 +70,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>
   </div>
@@ -86,12 +85,14 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { computersApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const computers = ref([])
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 let searchTimeout = null
 
@@ -104,13 +105,13 @@ async function loadComputers() {
   try {
     const params = {
       page: page.value,
-      per_page: 20
+      perpage: perPage.value
     }
     if (search.value) params.search = search.value
 
     const response = await computersApi.list(params)
     computers.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 computers:', error)
   } finally {
@@ -131,6 +132,12 @@ function goToPage(p) {
   loadComputers()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadComputers()
+}
+
 function getStatusClass(status) {
   if (!status) return 'badge-info'
   const s = status.toLowerCase()