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/settings/BusinessUnitsList.vue

@@ -38,11 +38,14 @@
           </table>
         </div>
 
-        <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>
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
       </template>
     </div>
 
@@ -97,11 +100,13 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { businessunitsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const items = ref([])
 const loading = ref(true)
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editing = ref(null)
@@ -118,9 +123,9 @@ onMounted(() => loadData())
 async function loadData() {
   loading.value = true
   try {
-    const response = await businessunitsApi.list({ page: page.value, perpage: 20 })
+    const response = await businessunitsApi.list({ page: page.value, perpage: perPage.value })
     items.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading business units:', err)
   } finally {
@@ -130,6 +135,12 @@ async function loadData() {
 
 function goToPage(p) { page.value = p; loadData() }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadData()
+}
+
 function openModal(item = null) {
   editing.value = item
   form.value = item ? {

frontend/src/views/settings/LocationsList.vue

@@ -64,16 +64,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>
 
@@ -185,12 +182,14 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { locationsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const locations = ref([])
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingLocation = ref(null)
@@ -220,13 +219,13 @@ async function loadLocations() {
   try {
     const params = {
       page: page.value,
-      perpage: 20
+      perpage: perPage.value
     }
     if (search.value) params.search = search.value
 
     const response = await locationsApi.list(params)
     locations.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading locations:', err)
   } finally {
@@ -247,6 +246,12 @@ function goToPage(p) {
   loadLocations()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadLocations()
+}
+
 function openModal(loc = null) {
   editingLocation.value = loc
   if (loc) {

frontend/src/views/settings/MachineTypesList.vue

@@ -53,16 +53,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>
 
@@ -147,11 +144,13 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { machinetypesApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const machineTypes = ref([])
 const loading = ref(true)
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingType = ref(null)
@@ -176,12 +175,12 @@ async function loadTypes() {
   try {
     const params = {
       page: page.value,
-      perpage: 20
+      perpage: perPage.value
     }
 
     const response = await machinetypesApi.list(params)
     machineTypes.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading machine types:', err)
   } finally {
@@ -194,6 +193,12 @@ function goToPage(p) {
   loadTypes()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadTypes()
+}
+
 function openModal(mt = null) {
   editingType.value = mt
   if (mt) {

frontend/src/views/settings/ModelsList.vue

@@ -65,16 +65,14 @@
           </table>
         </div>
 
-        <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>
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
       </template>
     </div>
 
@@ -184,6 +182,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { modelsApi, vendorsApi, machinetypesApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const models = ref([])
 const vendors = ref([])
@@ -193,6 +192,7 @@ const search = ref('')
 const vendorFilter = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingModel = ref(null)
@@ -225,13 +225,13 @@ onMounted(async () => {
 async function loadModels() {
   loading.value = true
   try {
-    const params = { page: page.value, perpage: 20 }
+    const params = { page: page.value, perpage: perPage.value }
     if (search.value) params.search = search.value
     if (vendorFilter.value) params.vendor = vendorFilter.value
 
     const response = await modelsApi.list(params)
     models.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading models:', err)
   } finally {
@@ -270,6 +270,12 @@ function goToPage(p) {
   loadModels()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadModels()
+}
+
 function openModal(m = null) {
   editingModel.value = m
   if (m) {

frontend/src/views/settings/OperatingSystemsList.vue

@@ -45,11 +45,14 @@
           </table>
         </div>
 
-        <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>
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
       </template>
     </div>
 
@@ -115,11 +118,13 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { operatingsystemsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const items = ref([])
 const loading = ref(true)
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editing = ref(null)
@@ -136,9 +141,9 @@ onMounted(() => loadData())
 async function loadData() {
   loading.value = true
   try {
-    const response = await operatingsystemsApi.list({ page: page.value, perpage: 20 })
+    const response = await operatingsystemsApi.list({ page: page.value, perpage: perPage.value })
     items.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading operating systems:', err)
   } finally {
@@ -148,6 +153,12 @@ async function loadData() {
 
 function goToPage(p) { page.value = p; loadData() }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadData()
+}
+
 function isPastEol(date) {
   return new Date(date) < new Date()
 }

frontend/src/views/settings/PCTypesList.vue

@@ -36,11 +36,14 @@
           </table>
         </div>
 
-        <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>
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
       </template>
     </div>
 
@@ -91,11 +94,13 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { pctypesApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const pcTypes = ref([])
 const loading = ref(true)
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editing = ref(null)
@@ -112,9 +117,9 @@ onMounted(() => loadData())
 async function loadData() {
   loading.value = true
   try {
-    const response = await pctypesApi.list({ page: page.value, perpage: 20 })
+    const response = await pctypesApi.list({ page: page.value, perpage: perPage.value })
     pcTypes.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading PC types:', err)
   } finally {
@@ -124,6 +129,12 @@ async function loadData() {
 
 function goToPage(p) { page.value = p; loadData() }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadData()
+}
+
 function openModal(item = null) {
   editing.value = item
   form.value = item ? { pctype: item.pctype || '', description: item.description || '' } : { pctype: '', description: '' }

frontend/src/views/settings/SettingsIndex.vue

@@ -4,61 +4,61 @@
 
     <div class="settings-grid">
       <router-link to="/settings/vendors" class="settings-card">
-        <div class="card-icon">🏭</div>
+        <div class="card-icon"><Factory :size="28" /></div>
         <h3>Vendors</h3>
         <p>Manage equipment vendors and manufacturers</p>
       </router-link>
 
       <router-link to="/settings/locations" class="settings-card">
-        <div class="card-icon">📍</div>
+        <div class="card-icon"><MapPin :size="28" /></div>
         <h3>Locations</h3>
         <p>Manage physical locations and sites</p>
       </router-link>
 
       <router-link to="/settings/statuses" class="settings-card">
-        <div class="card-icon">🏷️</div>
+        <div class="card-icon"><Tag :size="28" /></div>
         <h3>Statuses</h3>
         <p>Manage equipment status types</p>
       </router-link>
 
       <router-link to="/settings/models" class="settings-card">
-        <div class="card-icon">📦</div>
+        <div class="card-icon"><Package :size="28" /></div>
         <h3>Models</h3>
         <p>Manage equipment models by vendor</p>
       </router-link>
 
       <router-link to="/settings/machinetypes" class="settings-card">
-        <div class="card-icon">🖥️</div>
+        <div class="card-icon"><Monitor :size="28" /></div>
         <h3>Machine Types</h3>
         <p>Manage machine type categories</p>
       </router-link>
 
       <router-link to="/settings/pctypes" class="settings-card">
-        <div class="card-icon">💻</div>
+        <div class="card-icon"><Laptop :size="28" /></div>
         <h3>PC Types</h3>
         <p>Manage PC form factors</p>
       </router-link>
 
       <router-link to="/settings/operatingsystems" class="settings-card">
-        <div class="card-icon">⚙️</div>
+        <div class="card-icon"><Cog :size="28" /></div>
         <h3>Operating Systems</h3>
         <p>Manage OS versions and EOL dates</p>
       </router-link>
 
       <router-link to="/settings/businessunits" class="settings-card">
-        <div class="card-icon">🏢</div>
+        <div class="card-icon"><Building :size="28" /></div>
         <h3>Business Units</h3>
         <p>Manage organizational units</p>
       </router-link>
 
       <router-link to="/settings/vlans" class="settings-card">
-        <div class="card-icon">🌐</div>
+        <div class="card-icon"><Globe :size="28" /></div>
         <h3>VLANs</h3>
         <p>Manage virtual LANs</p>
       </router-link>
 
       <router-link to="/settings/subnets" class="settings-card">
-        <div class="card-icon">🔗</div>
+        <div class="card-icon"><Link :size="28" /></div>
         <h3>Subnets</h3>
         <p>Manage IP subnets and DHCP</p>
       </router-link>
@@ -67,6 +67,7 @@
 </template>
 
 <script setup>
+import { Factory, MapPin, Tag, Package, Monitor, Laptop, Cog, Building, Globe, Link } from 'lucide-vue-next'
 </script>
 
 <style scoped>

frontend/src/views/settings/StatusesList.vue

@@ -56,16 +56,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>
 
@@ -153,11 +150,13 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { statusesApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const statuses = ref([])
 const loading = ref(true)
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingStatus = ref(null)
@@ -182,12 +181,12 @@ async function loadStatuses() {
   try {
     const params = {
       page: page.value,
-      perpage: 20
+      perpage: perPage.value
     }
 
     const response = await statusesApi.list(params)
     statuses.value = response.data.data || []
-    totalPages.value = response.data.meta?.pages || 1
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (err) {
     console.error('Error loading statuses:', err)
   } finally {
@@ -200,6 +199,12 @@ function goToPage(p) {
   loadStatuses()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadStatuses()
+}
+
 function openModal(s = null) {
   editingStatus.value = s
   if (s) {

frontend/src/views/settings/SubnetsList.vue

@@ -49,8 +49,8 @@
                 <td class="mono">{{ subnet.cidr }}</td>
                 <td>{{ subnet.name }}</td>
                 <td>
-                  <span v-if="subnet.vlan_name">
-                    VLAN {{ subnet.vlan_number }} - {{ subnet.vlan_name }}
+                  <span v-if="subnet.vlanname">
+                    VLAN {{ subnet.vlannumber }} - {{ subnet.vlanname }}
                   </span>
                   <span v-else>-</span>
                 </td>
@@ -60,7 +60,7 @@
                     {{ subnet.dhcpenabled ? 'Enabled' : 'Disabled' }}
                   </span>
                 </td>
-                <td>{{ subnet.location_name || '-' }}</td>
+                <td>{{ subnet.locationname || '-' }}</td>
                 <td class="actions">
                   <button
                     class="btn btn-secondary btn-sm"
@@ -86,16 +86,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>
 
@@ -287,6 +284,7 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { networkApi, locationsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const route = useRoute()
 
@@ -299,6 +297,7 @@ const vlanFilter = ref('')
 const typeFilter = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingSubnet = ref(null)
@@ -341,7 +340,7 @@ onMounted(async () => {
 
 async function loadVLANs() {
   try {
-    const response = await networkApi.vlans.list({ per_page: 100 })
+    const response = await networkApi.vlans.list({ perpage: 100 })
     vlans.value = response.data.data || []
   } catch (err) {
     console.error('Error loading VLANs:', err)
@@ -350,7 +349,7 @@ async function loadVLANs() {
 
 async function loadLocations() {
   try {
-    const response = await locationsApi.list({ per_page: 100 })
+    const response = await locationsApi.list({ perpage: 100 })
     locations.value = response.data.data || []
   } catch (err) {
     console.error('Error loading locations:', err)
@@ -362,7 +361,7 @@ async function loadSubnets() {
   try {
     const params = {
       page: page.value,
-      per_page: 20
+      perpage: perPage.value
     }
     if (search.value) params.search = search.value
     if (vlanFilter.value) params.vlanid = vlanFilter.value
@@ -370,7 +369,7 @@ async function loadSubnets() {
 
     const response = await networkApi.subnets.list(params)
     subnets.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 (err) {
     console.error('Error loading subnets:', err)
   } finally {
@@ -391,6 +390,12 @@ function goToPage(p) {
   loadSubnets()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadSubnets()
+}
+
 function openModal(subnet = null) {
   editingSubnet.value = subnet
   if (subnet) {

frontend/src/views/settings/VLANsList.vue

@@ -84,16 +84,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>
 
@@ -189,6 +186,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { networkApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
 
 const vlans = ref([])
 const loading = ref(true)
@@ -196,6 +194,7 @@ const search = ref('')
 const typeFilter = ref('')
 const page = ref(1)
 const totalPages = ref(1)
+const perPage = ref(20)
 
 const showModal = ref(false)
 const editingVLAN = ref(null)
@@ -223,14 +222,14 @@ async function loadVLANs() {
   try {
     const params = {
       page: page.value,
-      per_page: 20
+      perpage: perPage.value
     }
     if (search.value) params.search = search.value
     if (typeFilter.value) params.type = typeFilter.value
 
     const response = await networkApi.vlans.list(params)
     vlans.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 (err) {
     console.error('Error loading VLANs:', err)
   } finally {
@@ -251,6 +250,12 @@ function goToPage(p) {
   loadVLANs()
 }
 
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  page.value = 1
+  loadVLANs()
+}
+
 function getTypeClass(type) {
   switch (type) {
     case 'data': return 'badge-info'