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/router/index.js

@@ -1,354 +1,54 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
-
-// Views
-import Login from '../views/Login.vue'
 import AppLayout from '../views/AppLayout.vue'
-import Dashboard from '../views/Dashboard.vue'
-import MachinesList from '../views/machines/MachinesList.vue'
-import MachineDetail from '../views/machines/MachineDetail.vue'
-import MachineForm from '../views/machines/MachineForm.vue'
-import PrintersList from '../views/printers/PrintersList.vue'
-import PrinterDetail from '../views/printers/PrinterDetail.vue'
-import PrinterForm from '../views/printers/PrinterForm.vue'
-import PCsList from '../views/pcs/PCsList.vue'
-import PCDetail from '../views/pcs/PCDetail.vue'
-import PCForm from '../views/pcs/PCForm.vue'
-import VendorsList from '../views/vendors/VendorsList.vue'
-import ApplicationsList from '../views/applications/ApplicationsList.vue'
-import ApplicationDetail from '../views/applications/ApplicationDetail.vue'
-import ApplicationForm from '../views/applications/ApplicationForm.vue'
-import KnowledgeBaseList from '../views/knowledgebase/KnowledgeBaseList.vue'
-import KnowledgeBaseDetail from '../views/knowledgebase/KnowledgeBaseDetail.vue'
-import KnowledgeBaseForm from '../views/knowledgebase/KnowledgeBaseForm.vue'
-import SearchResults from '../views/SearchResults.vue'
-import NotificationsList from '../views/notifications/NotificationsList.vue'
-import NotificationForm from '../views/notifications/NotificationForm.vue'
-import USBList from '../views/usb/USBList.vue'
-import USBDetail from '../views/usb/USBDetail.vue'
-import USBForm from '../views/usb/USBForm.vue'
-import NetworkDevicesList from '../views/network/NetworkDevicesList.vue'
-import NetworkDeviceDetail from '../views/network/NetworkDeviceDetail.vue'
-import NetworkDeviceForm from '../views/network/NetworkDeviceForm.vue'
-import ReportsIndex from '../views/reports/ReportsIndex.vue'
-import CalendarView from '../views/CalendarView.vue'
-import SettingsIndex from '../views/settings/SettingsIndex.vue'
-import MachineTypesList from '../views/settings/MachineTypesList.vue'
-import LocationsList from '../views/settings/LocationsList.vue'
-import StatusesList from '../views/settings/StatusesList.vue'
-import ModelsList from '../views/settings/ModelsList.vue'
-import PCTypesList from '../views/settings/PCTypesList.vue'
-import OperatingSystemsList from '../views/settings/OperatingSystemsList.vue'
-import BusinessUnitsList from '../views/settings/BusinessUnitsList.vue'
-import VLANsList from '../views/settings/VLANsList.vue'
-import SubnetsList from '../views/settings/SubnetsList.vue'
-import MapView from '../views/MapView.vue'
-import MapEditor from '../views/MapEditor.vue'
-import ShopfloorDashboard from '../views/ShopfloorDashboard.vue'
-import TVDashboard from '../views/TVDashboard.vue'
-import EmployeeDetail from '../views/employees/EmployeeDetail.vue'
+
+// Auto-discover all route modules from routes/ directory
+const routeModules = import.meta.glob('./routes/*.js', { eager: true })
+const appChildren = Object.values(routeModules).flatMap(m => m.default)
 
 const routes = [
   {
     path: '/login',
     name: 'login',
-    component: Login,
+    component: () => import('../views/Login.vue'),
     meta: { guest: true }
   },
   // Standalone full-screen dashboards (no sidebar, no auth required)
   {
     path: '/shopfloor',
     name: 'shopfloor',
-    component: ShopfloorDashboard
+    component: () => import('../views/ShopfloorDashboard.vue')
   },
   {
     path: '/tv',
     name: 'tv',
-    component: TVDashboard
+    component: () => import('../views/TVDashboard.vue')
+  },
+  // Print pages (standalone, no sidebar/header)
+  {
+    path: '/print/equipment-badge/:id',
+    name: 'print-equipment-badge',
+    component: () => import('../views/print/EquipmentBadge.vue')
+  },
+  {
+    path: '/print/printer-qr',
+    name: 'print-printer-qr-batch',
+    component: () => import('../views/print/PrinterQRBatch.vue')
+  },
+  {
+    path: '/print/printer-qr/:id',
+    name: 'print-printer-qr-single',
+    component: () => import('../views/print/PrinterQRSingle.vue')
+  },
+  {
+    path: '/print/usb-labels',
+    name: 'print-usb-labels',
+    component: () => import('../views/print/USBLabelBatch.vue')
   },
   {
     path: '/',
     component: AppLayout,
-    children: [
-      {
-        path: '',
-        name: 'dashboard',
-        component: Dashboard
-      },
-      {
-        path: 'search',
-        name: 'search',
-        component: SearchResults
-      },
-      {
-        path: 'machines',
-        name: 'machines',
-        component: MachinesList
-      },
-      {
-        path: 'machines/new',
-        name: 'machine-new',
-        component: MachineForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'machines/:id',
-        name: 'machine-detail',
-        component: MachineDetail
-      },
-      {
-        path: 'machines/:id/edit',
-        name: 'machine-edit',
-        component: MachineForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'printers',
-        name: 'printers',
-        component: PrintersList
-      },
-      {
-        path: 'printers/new',
-        name: 'printer-new',
-        component: PrinterForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'printers/:id',
-        name: 'printer-detail',
-        component: PrinterDetail
-      },
-      {
-        path: 'printers/:id/edit',
-        name: 'printer-edit',
-        component: PrinterForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'pcs',
-        name: 'pcs',
-        component: PCsList
-      },
-      {
-        path: 'pcs/new',
-        name: 'pc-new',
-        component: PCForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'pcs/:id',
-        name: 'pc-detail',
-        component: PCDetail
-      },
-      {
-        path: 'pcs/:id/edit',
-        name: 'pc-edit',
-        component: PCForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'map',
-        name: 'map',
-        component: MapView
-      },
-      {
-        path: 'map/editor',
-        name: 'map-editor',
-        component: MapEditor,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'applications',
-        name: 'applications',
-        component: ApplicationsList
-      },
-      {
-        path: 'applications/new',
-        name: 'application-new',
-        component: ApplicationForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'applications/:id',
-        name: 'application-detail',
-        component: ApplicationDetail
-      },
-      {
-        path: 'applications/:id/edit',
-        name: 'application-edit',
-        component: ApplicationForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'knowledgebase',
-        name: 'knowledgebase',
-        component: KnowledgeBaseList
-      },
-      {
-        path: 'knowledgebase/new',
-        name: 'knowledgebase-new',
-        component: KnowledgeBaseForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'knowledgebase/:id',
-        name: 'knowledgebase-detail',
-        component: KnowledgeBaseDetail
-      },
-      {
-        path: 'knowledgebase/:id/edit',
-        name: 'knowledgebase-edit',
-        component: KnowledgeBaseForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'notifications',
-        name: 'notifications',
-        component: NotificationsList
-      },
-      {
-        path: 'notifications/new',
-        name: 'notification-new',
-        component: NotificationForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'notifications/:id',
-        name: 'notification-detail',
-        component: NotificationForm
-      },
-      {
-        path: 'notifications/:id/edit',
-        name: 'notification-edit',
-        component: NotificationForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'usb',
-        name: 'usb',
-        component: USBList
-      },
-      {
-        path: 'usb/new',
-        name: 'usb-new',
-        component: USBForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'usb/:id',
-        name: 'usb-detail',
-        component: USBDetail
-      },
-      {
-        path: 'usb/:id/edit',
-        name: 'usb-edit',
-        component: USBForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'network',
-        name: 'network',
-        component: NetworkDevicesList
-      },
-      {
-        path: 'network/new',
-        name: 'network-new',
-        component: NetworkDeviceForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'network/:id',
-        name: 'network-detail',
-        component: NetworkDeviceDetail
-      },
-      {
-        path: 'network/:id/edit',
-        name: 'network-edit',
-        component: NetworkDeviceForm,
-        meta: { requiresAuth: true }
-      },
-      {
-        path: 'reports',
-        name: 'reports',
-        component: ReportsIndex
-      },
-      {
-        path: 'calendar',
-        name: 'calendar',
-        component: CalendarView
-      },
-      {
-        path: 'settings',
-        name: 'settings',
-        component: SettingsIndex,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/vendors',
-        name: 'vendors',
-        component: VendorsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/machinetypes',
-        name: 'machinetypes',
-        component: MachineTypesList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/locations',
-        name: 'locations',
-        component: LocationsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/statuses',
-        name: 'statuses',
-        component: StatusesList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/models',
-        name: 'models',
-        component: ModelsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/pctypes',
-        name: 'pctypes',
-        component: PCTypesList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/operatingsystems',
-        name: 'operatingsystems',
-        component: OperatingSystemsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/businessunits',
-        name: 'businessunits',
-        component: BusinessUnitsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/vlans',
-        name: 'vlans',
-        component: VLANsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'settings/subnets',
-        name: 'subnets',
-        component: SubnetsList,
-        meta: { requiresAuth: true, requiresAdmin: true }
-      },
-      {
-        path: 'employees/:sso',
-        name: 'employee-detail',
-        component: EmployeeDetail
-      }
-    ]
+    children: appChildren
   }
 ]
 

frontend/src/router/routes/applications.js

@@ -0,0 +1,27 @@
+/**
+ * Applications routes (core feature)
+ */
+export default [
+  {
+    path: 'applications',
+    name: 'applications',
+    component: () => import('../../views/applications/ApplicationsList.vue')
+  },
+  {
+    path: 'applications/new',
+    name: 'application-new',
+    component: () => import('../../views/applications/ApplicationForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'applications/:id',
+    name: 'application-detail',
+    component: () => import('../../views/applications/ApplicationDetail.vue')
+  },
+  {
+    path: 'applications/:id/edit',
+    name: 'application-edit',
+    component: () => import('../../views/applications/ApplicationForm.vue'),
+    meta: { requiresAuth: true }
+  }
+]

frontend/src/router/routes/computers.js

@@ -0,0 +1,40 @@
+/**
+ * Computers plugin routes
+ */
+export default [
+  {
+    path: 'pcs',
+    name: 'pcs',
+    component: () => import('../../views/pcs/PCsList.vue')
+  },
+  {
+    path: 'pcs/new',
+    name: 'pc-new',
+    component: () => import('../../views/pcs/PCForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'pcs/:id',
+    name: 'pc-detail',
+    component: () => import('../../views/pcs/PCDetail.vue')
+  },
+  {
+    path: 'pcs/:id/edit',
+    name: 'pc-edit',
+    component: () => import('../../views/pcs/PCForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  // Computer-specific settings
+  {
+    path: 'settings/pctypes',
+    name: 'pctypes',
+    component: () => import('../../views/settings/PCTypesList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/operatingsystems',
+    name: 'operatingsystems',
+    component: () => import('../../views/settings/OperatingSystemsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  }
+]

frontend/src/router/routes/core.js

@@ -0,0 +1,84 @@
+/**
+ * Core routes - Dashboard, Search, Map, Reports, Settings, Employees
+ */
+export default [
+  {
+    path: '',
+    name: 'dashboard',
+    component: () => import('../../views/Dashboard.vue')
+  },
+  {
+    path: 'search',
+    name: 'search',
+    component: () => import('../../views/SearchResults.vue')
+  },
+  {
+    path: 'map',
+    name: 'map',
+    component: () => import('../../views/MapView.vue')
+  },
+  {
+    path: 'map/editor',
+    name: 'map-editor',
+    component: () => import('../../views/MapEditor.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'reports',
+    name: 'reports',
+    component: () => import('../../views/reports/ReportsIndex.vue')
+  },
+  {
+    path: 'reports/pc-relationships',
+    name: 'report-pc-relationships',
+    component: () => import('../../views/reports/PCRelationshipsReport.vue')
+  },
+  {
+    path: 'employees/:sso',
+    name: 'employee-detail',
+    component: () => import('../../views/employees/EmployeeDetail.vue')
+  },
+  // Settings
+  {
+    path: 'settings',
+    name: 'settings',
+    component: () => import('../../views/settings/SettingsIndex.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/vendors',
+    name: 'vendors',
+    component: () => import('../../views/vendors/VendorsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/machinetypes',
+    name: 'machinetypes',
+    component: () => import('../../views/settings/MachineTypesList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/locations',
+    name: 'locations',
+    component: () => import('../../views/settings/LocationsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/statuses',
+    name: 'statuses',
+    component: () => import('../../views/settings/StatusesList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/models',
+    name: 'models',
+    component: () => import('../../views/settings/ModelsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/businessunits',
+    name: 'businessunits',
+    component: () => import('../../views/settings/BusinessUnitsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  }
+]

frontend/src/router/routes/equipment.js

@@ -0,0 +1,27 @@
+/**
+ * Equipment plugin routes
+ */
+export default [
+  {
+    path: 'machines',
+    name: 'machines',
+    component: () => import('../../views/machines/MachinesList.vue')
+  },
+  {
+    path: 'machines/new',
+    name: 'machine-new',
+    component: () => import('../../views/machines/MachineForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'machines/:id',
+    name: 'machine-detail',
+    component: () => import('../../views/machines/MachineDetail.vue')
+  },
+  {
+    path: 'machines/:id/edit',
+    name: 'machine-edit',
+    component: () => import('../../views/machines/MachineForm.vue'),
+    meta: { requiresAuth: true }
+  }
+]

frontend/src/router/routes/knowledgebase.js

@@ -0,0 +1,27 @@
+/**
+ * Knowledge Base routes (core feature)
+ */
+export default [
+  {
+    path: 'knowledgebase',
+    name: 'knowledgebase',
+    component: () => import('../../views/knowledgebase/KnowledgeBaseList.vue')
+  },
+  {
+    path: 'knowledgebase/new',
+    name: 'knowledgebase-new',
+    component: () => import('../../views/knowledgebase/KnowledgeBaseForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'knowledgebase/:id',
+    name: 'knowledgebase-detail',
+    component: () => import('../../views/knowledgebase/KnowledgeBaseDetail.vue')
+  },
+  {
+    path: 'knowledgebase/:id/edit',
+    name: 'knowledgebase-edit',
+    component: () => import('../../views/knowledgebase/KnowledgeBaseForm.vue'),
+    meta: { requiresAuth: true }
+  }
+]

frontend/src/router/routes/network.js

@@ -0,0 +1,40 @@
+/**
+ * Network plugin routes
+ */
+export default [
+  {
+    path: 'network',
+    name: 'network',
+    component: () => import('../../views/network/NetworkDevicesList.vue')
+  },
+  {
+    path: 'network/new',
+    name: 'network-new',
+    component: () => import('../../views/network/NetworkDeviceForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'network/:id',
+    name: 'network-detail',
+    component: () => import('../../views/network/NetworkDeviceDetail.vue')
+  },
+  {
+    path: 'network/:id/edit',
+    name: 'network-edit',
+    component: () => import('../../views/network/NetworkDeviceForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  // Network-specific settings
+  {
+    path: 'settings/vlans',
+    name: 'vlans',
+    component: () => import('../../views/settings/VLANsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: 'settings/subnets',
+    name: 'subnets',
+    component: () => import('../../views/settings/SubnetsList.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true }
+  }
+]

frontend/src/router/routes/notifications.js

@@ -0,0 +1,32 @@
+/**
+ * Notifications plugin routes
+ */
+export default [
+  {
+    path: 'notifications',
+    name: 'notifications',
+    component: () => import('../../views/notifications/NotificationsList.vue')
+  },
+  {
+    path: 'notifications/new',
+    name: 'notification-new',
+    component: () => import('../../views/notifications/NotificationForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'notifications/:id',
+    name: 'notification-detail',
+    component: () => import('../../views/notifications/NotificationForm.vue')
+  },
+  {
+    path: 'notifications/:id/edit',
+    name: 'notification-edit',
+    component: () => import('../../views/notifications/NotificationForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'calendar',
+    name: 'calendar',
+    component: () => import('../../views/CalendarView.vue')
+  }
+]

frontend/src/router/routes/printers.js

@@ -0,0 +1,27 @@
+/**
+ * Printers plugin routes
+ */
+export default [
+  {
+    path: 'printers',
+    name: 'printers',
+    component: () => import('../../views/printers/PrintersList.vue')
+  },
+  {
+    path: 'printers/new',
+    name: 'printer-new',
+    component: () => import('../../views/printers/PrinterForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'printers/:id',
+    name: 'printer-detail',
+    component: () => import('../../views/printers/PrinterDetail.vue')
+  },
+  {
+    path: 'printers/:id/edit',
+    name: 'printer-edit',
+    component: () => import('../../views/printers/PrinterForm.vue'),
+    meta: { requiresAuth: true }
+  }
+]

frontend/src/router/routes/usb.js

@@ -0,0 +1,27 @@
+/**
+ * USB plugin routes
+ */
+export default [
+  {
+    path: 'usb',
+    name: 'usb',
+    component: () => import('../../views/usb/USBList.vue')
+  },
+  {
+    path: 'usb/new',
+    name: 'usb-new',
+    component: () => import('../../views/usb/USBForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: 'usb/:id',
+    name: 'usb-detail',
+    component: () => import('../../views/usb/USBDetail.vue')
+  },
+  {
+    path: 'usb/:id/edit',
+    name: 'usb-edit',
+    component: () => import('../../views/usb/USBForm.vue'),
+    meta: { requiresAuth: true }
+  }
+]