From 58af5afda21a3e61c7fecfb0297c8794c16bd92d Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Mon, 13 Jul 2026 14:21:34 -0400
Subject: [PATCH] List rows click through to the item; drop the redundant VLANs
 tab

Row-click: the whole table row now navigates to the item detail (machines, PCs,
printers, network devices, measuring tools, applications), matching the Networks
list. The actions cell is @click.stop so View/Edit/Delete still work
independently; a shared .clickable-row style gives the cursor + hover.

Network hub: drop the VLANs tab - a subnet belongs to a VLAN (each Networks row
already shows its VLAN) so a sibling tab was redundant; VLAN naming stays in
Settings. Hub is now Devices | Networks.

Verified: row-click navigates on machines/pcs/network; hub shows two tabs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/assets/style.css                 |   6 +
 .../views/applications/ApplicationsList.vue   | 426 +++++------
 frontend/src/views/machines/MachinesList.vue  |   4 +-
 .../measuringtools/MeasuringToolsList.vue     |   4 +-
 .../src/views/network/NetworkDevicesList.vue  | 694 +++++++++---------
 frontend/src/views/network/NetworkHub.vue     |   4 +-
 frontend/src/views/pcs/PCsList.vue            | 422 +++++------
 frontend/src/views/printers/PrintersList.vue  |   4 +-
 8 files changed, 785 insertions(+), 779 deletions(-)

diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index 890d657..9272855 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1742,3 +1742,9 @@ td.actions {
   color: var(--text-light);
   cursor: pointer;
 }
+
+/* Clickable list rows: the whole row navigates to the item detail; interactive
+   cells (the actions column, in-row links) stop propagation so they still work
+   independently. */
+.clickable-row { cursor: pointer; }
+.clickable-row:hover td { background: var(--bg); }
diff --git a/frontend/src/views/applications/ApplicationsList.vue b/frontend/src/views/applications/ApplicationsList.vue
index a8b7ab5..9ce783a 100644
--- a/frontend/src/views/applications/ApplicationsList.vue
+++ b/frontend/src/views/applications/ApplicationsList.vue
@@ -1,213 +1,213 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>Applications</h2>
-      <router-link to="/applications/new" class="btn btn-primary">Add Application</router-link>
-    </div>
-
-    <!-- Filters -->
-    <div class="filters">
-      <input
-        v-model="search"
-        type="text"
-        class="form-control"
-        placeholder="Search applications..."
-        @input="debouncedSearch"
-      />
-      <select v-model="filter" class="form-control" @change="loadApplications">
-        <option value="installable">Installable Applications</option>
-        <option value="all">All Applications</option>
-        <option value="hidden">Hidden Applications</option>
-      </select>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <template v-else>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th style="width: 50px;">Files</th>
-                <th style="width: 50px;">Docs</th>
-                <th>Application Name</th>
-                <th>Description</th>
-                <th>Support Team</th>
-                <th>Contacts</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="app in applications" :key="app.appid">
-                <td class="icon-cell">
-                  <a v-if="app.installpath" :href="app.installpath" target="_blank" title="Download Installation Files" class="icon-download">
-                    &#x2B07;
-                  </a>
-                  <a v-else-if="app.applicationlink" :href="app.applicationlink" target="_blank" title="Application Link" class="icon-link">
-                    &#x1F517;
-                  </a>
-                </td>
-                <td class="icon-cell">
-                  <a v-if="app.documentationpath" :href="app.documentationpath" target="_blank" title="View Documentation" class="icon-docs">
-                    &#x1F4C4;
-                  </a>
-                </td>
-                <td>
-                  <router-link :to="`/applications/${app.appid}`">
-                    {{ app.appname }}
-                  </router-link>
-                  <span class="app-flags">
-                    <span v-if="app.isinstallable" class="badge badge-info badge-sm">Installable</span>
-                    <span v-if="app.islicenced" class="badge badge-warning badge-sm">Licensed</span>
-                    <span v-if="app.isprinter" class="badge badge-secondary badge-sm">Printer</span>
-                  </span>
-                </td>
-                <td class="description">{{ app.appdescription || '-' }}</td>
-                <td>{{ app.supportteamname || '-' }}</td>
-                <td>{{ app.contacts && app.contacts.length ? app.contacts.map(c => c.name).join(', ') : '-' }}</td>
-                <td class="actions">
-                  <router-link
-                    :to="`/applications/${app.appid}`"
-                    class="btn btn-secondary btn-sm"
-                  >
-                    View
-                  </router-link>
-                </td>
-              </tr>
-              <tr v-if="applications.length === 0">
-                <td colspan="7" style="text-align: center; color: var(--text-light);">
-                  No applications found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Pagination -->
-        <PaginationBar
-          :page="page"
-          :totalPages="totalPages"
-          :perPage="perPage"
-          @update:page="goToPage"
-          @update:perPage="changePerPage"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { applicationsApi } from '../../api'
-import PaginationBar from '../../components/PaginationBar.vue'
-import { useListQuery } from '@/composables/listQuery'
-
-const applications = ref([])
-const loading = ref(true)
-const { page, search, setPage, setSearch } = useListQuery({ onChange: loadApplications })
-const filter = ref('installable')
-const totalPages = ref(1)
-const perPage = ref(20)
-
-let searchTimeout = null
-
-onMounted(() => {
-  loadApplications()
-})
-
-async function loadApplications() {
-  loading.value = true
-  try {
-    const params = {
-      page: page.value,
-      perpage: perPage.value,
-      search: search.value || undefined
-    }
-
-    // Apply filter
-    if (filter.value === 'installable') {
-      params.installable = true
-    } else if (filter.value === 'hidden') {
-      params.hidden = true
-    }
-
-    const response = await applicationsApi.list(params)
-    applications.value = response.data.data || []
-    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
-  } catch (error) {
-    console.error('Error loading applications:', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-function debouncedSearch() {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    setSearch(search.value)
-    loadApplications()
-  }, 300)
-}
-
-function goToPage(p) {
-  setPage(p)
-  loadApplications()
-}
-
-function changePerPage(newPerPage) {
-  perPage.value = newPerPage
-  setPage(1)
-  loadApplications()
-}
-</script>
-
-<style scoped>
-/* Application list specific styles */
-.icon-cell {
-  text-align: center;
-  width: 50px;
-}
-
-.icon-cell a {
-  font-size: 1.25rem;
-  text-decoration: none;
-}
-
-.icon-download {
-  color: var(--success);
-}
-
-.icon-link {
-  color: var(--link);
-}
-
-.icon-docs {
-  color: var(--secondary);
-}
-
-.icon-cell a:hover {
-  opacity: 0.7;
-}
-
-.app-flags {
-  display: inline-flex;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-  margin-left: 0.5rem;
-  vertical-align: middle;
-}
-
-.badge-sm {
-  font-size: 0.75rem;
-  padding: 0.2rem 0.5rem;
-}
-
-.description {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-light);
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Applications</h2>
+      <router-link to="/applications/new" class="btn btn-primary">Add Application</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search applications..."
+        @input="debouncedSearch"
+      />
+      <select v-model="filter" class="form-control" @change="loadApplications">
+        <option value="installable">Installable Applications</option>
+        <option value="all">All Applications</option>
+        <option value="hidden">Hidden Applications</option>
+      </select>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th style="width: 50px;">Files</th>
+                <th style="width: 50px;">Docs</th>
+                <th>Application Name</th>
+                <th>Description</th>
+                <th>Support Team</th>
+                <th>Contacts</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="app in applications" :key="app.appid" class="clickable-row" @click="$router.push(`/applications/${app.appid}`)">
+                <td class="icon-cell">
+                  <a v-if="app.installpath" :href="app.installpath" target="_blank" title="Download Installation Files" class="icon-download">
+                    &#x2B07;
+                  </a>
+                  <a v-else-if="app.applicationlink" :href="app.applicationlink" target="_blank" title="Application Link" class="icon-link">
+                    &#x1F517;
+                  </a>
+                </td>
+                <td class="icon-cell">
+                  <a v-if="app.documentationpath" :href="app.documentationpath" target="_blank" title="View Documentation" class="icon-docs">
+                    &#x1F4C4;
+                  </a>
+                </td>
+                <td>
+                  <router-link :to="`/applications/${app.appid}`">
+                    {{ app.appname }}
+                  </router-link>
+                  <span class="app-flags">
+                    <span v-if="app.isinstallable" class="badge badge-info badge-sm">Installable</span>
+                    <span v-if="app.islicenced" class="badge badge-warning badge-sm">Licensed</span>
+                    <span v-if="app.isprinter" class="badge badge-secondary badge-sm">Printer</span>
+                  </span>
+                </td>
+                <td class="description">{{ app.appdescription || '-' }}</td>
+                <td>{{ app.supportteamname || '-' }}</td>
+                <td>{{ app.contacts && app.contacts.length ? app.contacts.map(c => c.name).join(', ') : '-' }}</td>
+                <td class="actions" @click.stop>
+                  <router-link
+                    :to="`/applications/${app.appid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="applications.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No applications found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { applicationsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
+
+const applications = ref([])
+const loading = ref(true)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadApplications })
+const filter = ref('installable')
+const totalPages = ref(1)
+const perPage = ref(20)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadApplications()
+})
+
+async function loadApplications() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: perPage.value,
+      search: search.value || undefined
+    }
+
+    // Apply filter
+    if (filter.value === 'installable') {
+      params.installable = true
+    } else if (filter.value === 'hidden') {
+      params.hidden = true
+    }
+
+    const response = await applicationsApi.list(params)
+    applications.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading applications:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    setSearch(search.value)
+    loadApplications()
+  }, 300)
+}
+
+function goToPage(p) {
+  setPage(p)
+  loadApplications()
+}
+
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  setPage(1)
+  loadApplications()
+}
+</script>
+
+<style scoped>
+/* Application list specific styles */
+.icon-cell {
+  text-align: center;
+  width: 50px;
+}
+
+.icon-cell a {
+  font-size: 1.25rem;
+  text-decoration: none;
+}
+
+.icon-download {
+  color: var(--success);
+}
+
+.icon-link {
+  color: var(--link);
+}
+
+.icon-docs {
+  color: var(--secondary);
+}
+
+.icon-cell a:hover {
+  opacity: 0.7;
+}
+
+.app-flags {
+  display: inline-flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.badge-sm {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+}
+
+.description {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/views/machines/MachinesList.vue b/frontend/src/views/machines/MachinesList.vue
index 0b2ba52..b31db8f 100644
--- a/frontend/src/views/machines/MachinesList.vue
+++ b/frontend/src/views/machines/MachinesList.vue
@@ -36,7 +36,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="item in machines" :key="item.assetid">
+              <tr v-for="item in machines" :key="item.assetid" class="clickable-row" @click="$router.push(`/machines/${item.machine?.machineid || item.assetid}`)">
                 <td>
                   {{ item.assetnumber }}<template v-if="item.dualpathpartner"> / {{ item.dualpathpartner.assetnumber }}</template>
                 </td>
@@ -50,7 +50,7 @@
                   </span>
                 </td>
                 <td>{{ item.locationname || '-' }}</td>
-                <td class="actions">
+                <td class="actions" @click.stop>
                   <router-link
                     :to="`/machines/${item.machine?.machineid || item.assetid}`"
                     class="btn btn-secondary btn-sm"
diff --git a/frontend/src/views/measuringtools/MeasuringToolsList.vue b/frontend/src/views/measuringtools/MeasuringToolsList.vue
index 8dcaffe..32cf342 100644
--- a/frontend/src/views/measuringtools/MeasuringToolsList.vue
+++ b/frontend/src/views/measuringtools/MeasuringToolsList.vue
@@ -49,7 +49,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="item in tools" :key="item.assetid">
+              <tr v-for="item in tools" :key="item.assetid" class="clickable-row" @click="$router.push(`/measuringtools/${item.measuringtool?.measuringtoolid || item.assetid}`)">
                 <td>{{ item.assetnumber }}</td>
                 <td>{{ item.name || '-' }}</td>
                 <td class="mono">{{ item.serialnumber || '-' }}</td>
@@ -61,7 +61,7 @@
                   </span>
                 </td>
                 <td>{{ item.locationname || '-' }}</td>
-                <td class="actions">
+                <td class="actions" @click.stop>
                   <router-link
                     :to="`/measuringtools/${item.measuringtool?.measuringtoolid || item.assetid}`"
                     class="btn btn-secondary btn-sm"
diff --git a/frontend/src/views/network/NetworkDevicesList.vue b/frontend/src/views/network/NetworkDevicesList.vue
index 613407e..e528ecf 100644
--- a/frontend/src/views/network/NetworkDevicesList.vue
+++ b/frontend/src/views/network/NetworkDevicesList.vue
@@ -1,347 +1,347 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>Network Devices</h2>
-      <router-link to="/print/asset-label-batch/network_device" class="btn btn-secondary" target="_blank">Print Labels</router-link>
-      <router-link to="/network/new" class="btn btn-primary">Add Device</router-link>
-    </div>
-
-    <!-- Type Tabs -->
-    <div class="type-tabs">
-      <button
-        :class="{ active: selectedType === null }"
-        @click="selectType(null)"
-      >
-        All ({{ totalCount }})
-      </button>
-      <button
-        v-for="t in deviceTypes"
-        :key="t.networkdevicetypeid"
-        :class="{ active: selectedType === t.networkdevicetypeid }"
-        @click="selectType(t.networkdevicetypeid)"
-      >
-        {{ t.networkdevicetype }} ({{ t.count || 0 }})
-      </button>
-    </div>
-
-    <!-- Filters -->
-    <div class="filters">
-      <input
-        v-model="search"
-        type="text"
-        class="form-control"
-        placeholder="Search by hostname, asset #, serial..."
-        @input="debouncedSearch"
-      />
-      <select v-model="vendorFilter" class="form-control" @change="loadDevices">
-        <option value="">All Vendors</option>
-        <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
-          {{ v.vendor }}
-        </option>
-      </select>
-      <select v-model="locationFilter" class="form-control" @change="loadDevices">
-        <option value="">All Locations</option>
-        <option v-for="loc in locations" :key="loc.locationid" :value="loc.locationid">
-          {{ loc.location }}
-        </option>
-      </select>
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <template v-else>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Asset Tag</th>
-                <th>Hostname</th>
-                <th>Serial Number</th>
-                <th>Type</th>
-                <th>Vendor</th>
-                <th>Features</th>
-                <th>Status</th>
-                <th>Location</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="device in devices" :key="device.networkdevice?.networkdeviceid || device.assetid">
-                <td>{{ device.assetnumber }}</td>
-                <td class="mono">{{ device.networkdevice?.hostname || '-' }}</td>
-                <td class="mono">{{ device.serialnumber || '-' }}</td>
-                <td>{{ device.networkdevice?.networkdevicetypename || '-' }}</td>
-                <td>{{ device.networkdevice?.vendorname || '-' }}</td>
-                <td class="features">
-                  <span v-if="device.networkdevice?.ispoe" class="feature-tag poe">PoE</span>
-                  <span v-if="device.networkdevice?.ismanaged" class="feature-tag managed">Managed</span>
-                  <span v-if="device.networkdevice?.portcount" class="feature-tag ports">{{ device.networkdevice.portcount }} ports</span>
-                  <span v-if="!device.networkdevice?.ispoe && !device.networkdevice?.ismanaged && !device.networkdevice?.portcount">-</span>
-                </td>
-                <td>
-                  <span class="badge" :style="colorStyle(device.statuscolor)">
-                    {{ device.statusname || 'Unknown' }}
-                  </span>
-                </td>
-                <td>{{ device.locationname || '-' }}</td>
-                <td class="actions">
-                  <router-link
-                    :to="`/network/${device.networkdevice?.networkdeviceid}`"
-                    class="btn btn-secondary btn-sm"
-                  >
-                    View
-                  </router-link>
-                </td>
-              </tr>
-              <tr v-if="devices.length === 0">
-                <td colspan="9" style="text-align: center; color: var(--text-light);">
-                  No network devices found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Pagination -->
-        <PaginationBar
-          :page="page"
-          :totalPages="totalPages"
-          :perPage="perPage"
-          @update:page="goToPage"
-          @update:perPage="changePerPage"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { colorStyle } from "@/utils/colorStyle"
-import { networkApi, vendorsApi, locationsApi } from '../../api'
-import PaginationBar from '../../components/PaginationBar.vue'
-import { useListQuery } from '@/composables/listQuery'
-
-const devices = ref([])
-const deviceTypes = ref([])
-const vendors = ref([])
-const locations = ref([])
-const loading = ref(true)
-const { page, search, setPage, setSearch } = useListQuery({ onChange: loadDevices })
-const selectedType = ref(null)
-const vendorFilter = ref('')
-const locationFilter = ref('')
-const totalPages = ref(1)
-const perPage = ref(25)
-const totalCount = ref(0)
-
-let searchTimeout = null
-
-onMounted(async () => {
-  await Promise.all([
-    loadDeviceTypes(),
-    loadVendors(),
-    loadLocations()
-  ])
-  await loadDevices()
-})
-
-async function loadDeviceTypes() {
-  try {
-    const response = await networkApi.types.list({ perpage: 100 })
-    deviceTypes.value = response.data.data || []
-    // Get counts for each type
-    await updateTypeCounts()
-  } catch (error) {
-    console.error('Error loading device types:', error)
-  }
-}
-
-async function updateTypeCounts() {
-  // Get summary for type counts
-  try {
-    const response = await networkApi.dashboardSummary()
-    const byType = response.data.data?.bytype || response.data.data?.by_type || []
-    totalCount.value = response.data.data?.total || 0
-
-    // Map counts to types
-    deviceTypes.value = deviceTypes.value.map(t => {
-      const found = byType.find(bt => bt.type === t.networkdevicetype)
-      return { ...t, count: found?.count || 0 }
-    })
-  } catch (error) {
-    console.error('Error loading type counts:', error)
-  }
-}
-
-async function loadVendors() {
-  try {
-    const response = await vendorsApi.list({ perpage: 100 })
-    vendors.value = response.data.data || []
-  } catch (error) {
-    console.error('Error loading vendors:', error)
-  }
-}
-
-async function loadLocations() {
-  try {
-    const response = await locationsApi.list({ perpage: 100 })
-    locations.value = response.data.data || []
-  } catch (error) {
-    console.error('Error loading locations:', error)
-  }
-}
-
-async function loadDevices() {
-  loading.value = true
-  try {
-    const params = {
-      page: page.value,
-      perpage: perPage.value
-    }
-    if (search.value) params.search = search.value
-    if (selectedType.value) params.typeid = selectedType.value
-    if (vendorFilter.value) params.vendorid = vendorFilter.value
-    if (locationFilter.value) params.locationid = locationFilter.value
-
-    const response = await networkApi.list(params)
-    devices.value = response.data.data || []
-    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
-  } catch (error) {
-    console.error('Error loading network devices:', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-function selectType(typeId) {
-  selectedType.value = typeId
-  setPage(1)
-  loadDevices()
-}
-
-function debouncedSearch() {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    setSearch(search.value)
-    loadDevices()
-  }, 300)
-}
-
-function goToPage(p) {
-  if (p >= 1 && p <= totalPages.value) {
-    setPage(p)
-    loadDevices()
-  }
-}
-
-function changePerPage(newPerPage) {
-  perPage.value = newPerPage
-  setPage(1)
-  loadDevices()
-}
-
-function getStatusClass(status) {
-  if (!status) return 'badge-info'
-  const s = status.toLowerCase()
-  if (s === 'in use' || s === 'active') return 'badge-success'
-  if (s === 'in repair' || s === 'maintenance') return 'badge-warning'
-  if (s === 'retired' || s === 'decommissioned') return 'badge-danger'
-  return 'badge-info'
-}
-</script>
-
-<style scoped>
-.type-tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-}
-
-.type-tabs button {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  color: var(--text);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.type-tabs button:hover {
-  background: var(--bg);
-  border-color: var(--primary);
-}
-
-.type-tabs button.active {
-  background: var(--primary);
-  color: white;
-  border-color: var(--primary);
-}
-
-.filters {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-}
-
-.filters .form-control {
-  flex: 1;
-  min-width: 150px;
-}
-
-.filters select.form-control {
-  flex: 0 0 auto;
-  width: auto;
-  min-width: 150px;
-}
-
-.mono {
-  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-}
-
-.features {
-  display: flex;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-}
-
-.feature-tag {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.75rem;
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--text-light);
-}
-
-.feature-tag.poe {
-  background: #d4edda;
-  color: #155724;
-}
-
-.feature-tag.managed {
-  background: #e3f2fd;
-  color: #1565c0;
-}
-
-.feature-tag.ports {
-  background: var(--bg);
-  color: var(--text-light);
-}
-
-@media (prefers-color-scheme: dark) {
-  .feature-tag.poe {
-    background: #1e3a29;
-    color: #4ade80;
-  }
-
-  .feature-tag.managed {
-    background: #1e3a5f;
-    color: #60a5fa;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Network Devices</h2>
+      <router-link to="/print/asset-label-batch/network_device" class="btn btn-secondary" target="_blank">Print Labels</router-link>
+      <router-link to="/network/new" class="btn btn-primary">Add Device</router-link>
+    </div>
+
+    <!-- Type Tabs -->
+    <div class="type-tabs">
+      <button
+        :class="{ active: selectedType === null }"
+        @click="selectType(null)"
+      >
+        All ({{ totalCount }})
+      </button>
+      <button
+        v-for="t in deviceTypes"
+        :key="t.networkdevicetypeid"
+        :class="{ active: selectedType === t.networkdevicetypeid }"
+        @click="selectType(t.networkdevicetypeid)"
+      >
+        {{ t.networkdevicetype }} ({{ t.count || 0 }})
+      </button>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search by hostname, asset #, serial..."
+        @input="debouncedSearch"
+      />
+      <select v-model="vendorFilter" class="form-control" @change="loadDevices">
+        <option value="">All Vendors</option>
+        <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
+          {{ v.vendor }}
+        </option>
+      </select>
+      <select v-model="locationFilter" class="form-control" @change="loadDevices">
+        <option value="">All Locations</option>
+        <option v-for="loc in locations" :key="loc.locationid" :value="loc.locationid">
+          {{ loc.location }}
+        </option>
+      </select>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Asset Tag</th>
+                <th>Hostname</th>
+                <th>Serial Number</th>
+                <th>Type</th>
+                <th>Vendor</th>
+                <th>Features</th>
+                <th>Status</th>
+                <th>Location</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="device in devices" :key="device.networkdevice?.networkdeviceid || device.assetid" class="clickable-row" @click="$router.push(`/network/${device.networkdevice?.networkdeviceid || device.assetid}`)">
+                <td>{{ device.assetnumber }}</td>
+                <td class="mono">{{ device.networkdevice?.hostname || '-' }}</td>
+                <td class="mono">{{ device.serialnumber || '-' }}</td>
+                <td>{{ device.networkdevice?.networkdevicetypename || '-' }}</td>
+                <td>{{ device.networkdevice?.vendorname || '-' }}</td>
+                <td class="features">
+                  <span v-if="device.networkdevice?.ispoe" class="feature-tag poe">PoE</span>
+                  <span v-if="device.networkdevice?.ismanaged" class="feature-tag managed">Managed</span>
+                  <span v-if="device.networkdevice?.portcount" class="feature-tag ports">{{ device.networkdevice.portcount }} ports</span>
+                  <span v-if="!device.networkdevice?.ispoe && !device.networkdevice?.ismanaged && !device.networkdevice?.portcount">-</span>
+                </td>
+                <td>
+                  <span class="badge" :style="colorStyle(device.statuscolor)">
+                    {{ device.statusname || 'Unknown' }}
+                  </span>
+                </td>
+                <td>{{ device.locationname || '-' }}</td>
+                <td class="actions" @click.stop>
+                  <router-link
+                    :to="`/network/${device.networkdevice?.networkdeviceid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="devices.length === 0">
+                <td colspan="9" style="text-align: center; color: var(--text-light);">
+                  No network devices found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { colorStyle } from "@/utils/colorStyle"
+import { networkApi, vendorsApi, locationsApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
+import { useListQuery } from '@/composables/listQuery'
+
+const devices = ref([])
+const deviceTypes = ref([])
+const vendors = ref([])
+const locations = ref([])
+const loading = ref(true)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadDevices })
+const selectedType = ref(null)
+const vendorFilter = ref('')
+const locationFilter = ref('')
+const totalPages = ref(1)
+const perPage = ref(25)
+const totalCount = ref(0)
+
+let searchTimeout = null
+
+onMounted(async () => {
+  await Promise.all([
+    loadDeviceTypes(),
+    loadVendors(),
+    loadLocations()
+  ])
+  await loadDevices()
+})
+
+async function loadDeviceTypes() {
+  try {
+    const response = await networkApi.types.list({ perpage: 100 })
+    deviceTypes.value = response.data.data || []
+    // Get counts for each type
+    await updateTypeCounts()
+  } catch (error) {
+    console.error('Error loading device types:', error)
+  }
+}
+
+async function updateTypeCounts() {
+  // Get summary for type counts
+  try {
+    const response = await networkApi.dashboardSummary()
+    const byType = response.data.data?.bytype || response.data.data?.by_type || []
+    totalCount.value = response.data.data?.total || 0
+
+    // Map counts to types
+    deviceTypes.value = deviceTypes.value.map(t => {
+      const found = byType.find(bt => bt.type === t.networkdevicetype)
+      return { ...t, count: found?.count || 0 }
+    })
+  } catch (error) {
+    console.error('Error loading type counts:', error)
+  }
+}
+
+async function loadVendors() {
+  try {
+    const response = await vendorsApi.list({ perpage: 100 })
+    vendors.value = response.data.data || []
+  } catch (error) {
+    console.error('Error loading vendors:', error)
+  }
+}
+
+async function loadLocations() {
+  try {
+    const response = await locationsApi.list({ perpage: 100 })
+    locations.value = response.data.data || []
+  } catch (error) {
+    console.error('Error loading locations:', error)
+  }
+}
+
+async function loadDevices() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: perPage.value
+    }
+    if (search.value) params.search = search.value
+    if (selectedType.value) params.typeid = selectedType.value
+    if (vendorFilter.value) params.vendorid = vendorFilter.value
+    if (locationFilter.value) params.locationid = locationFilter.value
+
+    const response = await networkApi.list(params)
+    devices.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading network devices:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectType(typeId) {
+  selectedType.value = typeId
+  setPage(1)
+  loadDevices()
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    setSearch(search.value)
+    loadDevices()
+  }, 300)
+}
+
+function goToPage(p) {
+  if (p >= 1 && p <= totalPages.value) {
+    setPage(p)
+    loadDevices()
+  }
+}
+
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  setPage(1)
+  loadDevices()
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair' || s === 'maintenance') return 'badge-warning'
+  if (s === 'retired' || s === 'decommissioned') return 'badge-danger'
+  return 'badge-info'
+}
+</script>
+
+<style scoped>
+.type-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.type-tabs button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.type-tabs button:hover {
+  background: var(--bg);
+  border-color: var(--primary);
+}
+
+.type-tabs button.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.filters {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.filters .form-control {
+  flex: 1;
+  min-width: 150px;
+}
+
+.filters select.form-control {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 150px;
+}
+
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.features {
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.feature-tag {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+.feature-tag.poe {
+  background: #d4edda;
+  color: #155724;
+}
+
+.feature-tag.managed {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.feature-tag.ports {
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  .feature-tag.poe {
+    background: #1e3a29;
+    color: #4ade80;
+  }
+
+  .feature-tag.managed {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+}
+</style>
diff --git a/frontend/src/views/network/NetworkHub.vue b/frontend/src/views/network/NetworkHub.vue
index 089900e..2a9015f 100644
--- a/frontend/src/views/network/NetworkHub.vue
+++ b/frontend/src/views/network/NetworkHub.vue
@@ -21,15 +21,15 @@ import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import NetworkDevicesList from './NetworkDevicesList.vue'
 import SubnetsBrowse from './SubnetsBrowse.vue'
-import VLANsList from '../settings/VLANsList.vue'
 
 const route = useRoute()
 const router = useRouter()
 
+// VLANs are a layer under a subnet (each Networks row shows its VLAN); VLAN
+// naming lives in Settings, so the hub is just Devices + Networks.
 const tabs = [
   { key: 'devices', label: 'Devices', comp: NetworkDevicesList },
   { key: 'networks', label: 'Networks', comp: SubnetsBrowse },
-  { key: 'vlans', label: 'VLANs', comp: VLANsList },
 ]
 
 const active = ref(tabs.some(t => t.key === route.query.tab) ? route.query.tab : 'devices')
diff --git a/frontend/src/views/pcs/PCsList.vue b/frontend/src/views/pcs/PCsList.vue
index 4ba419c..3c05e74 100644
--- a/frontend/src/views/pcs/PCsList.vue
+++ b/frontend/src/views/pcs/PCsList.vue
@@ -1,211 +1,211 @@
-<template>
-  <div>
-    <div class="page-header">
-      <h2>Computers</h2>
-      <router-link to="/print/asset-label-batch/computer" class="btn btn-secondary" target="_blank">Print Labels</router-link>
-      <router-link to="/pcs/new" class="btn btn-primary">Add Computer</router-link>
-    </div>
-
-    <!-- Filters -->
-    <div class="filters">
-      <input
-        v-model="search"
-        type="text"
-        class="form-control"
-        placeholder="Search computers..."
-        @input="debouncedSearch"
-      />
-    </div>
-
-    <div class="card">
-      <div v-if="loading" class="loading">Loading...</div>
-
-      <template v-else>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Asset Tag</th>
-                <th>Hostname</th>
-                <th>Serial Number</th>
-                <th>Type</th>
-                <th>Remote Access</th>
-                <th>Status</th>
-                <th>Location</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in computers" :key="item.assetid">
-                <td>{{ item.assetnumber }}</td>
-                <td>{{ item.computer?.hostname || '-' }}</td>
-                <td class="mono">{{ item.serialnumber || '-' }}</td>
-                <td>{{ item.computer?.computertypename || '-' }}</td>
-                <td class="features">
-                  <template v-for="a in (item.accessmethods || [])" :key="a.id">
-                    <a v-if="a.link" :href="a.link" class="access-link" :title="a.link" @click.stop>{{ a.name }}</a>
-                    <span v-else class="access-link disabled" title="No hostname/IP set">{{ a.name }}</span>
-                  </template>
-                  <span v-if="!(item.accessmethods || []).length">-</span>
-                </td>
-                <td>
-                  <span class="badge" :style="colorStyle(item.statuscolor)">
-                    {{ item.statusname || 'Unknown' }}
-                  </span>
-                </td>
-                <td>{{ item.locationname || '-' }}</td>
-                <td class="actions">
-                  <router-link
-                    :to="`/pcs/${item.computer?.computerid || item.assetid}`"
-                    class="btn btn-secondary btn-sm"
-                  >
-                    View
-                  </router-link>
-                </td>
-              </tr>
-              <tr v-if="computers.length === 0">
-                <td colspan="8" style="text-align: center; color: var(--text-light);">
-                  No computers found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Pagination -->
-        <PaginationBar
-          :page="page"
-          :totalPages="totalPages"
-          :perPage="perPage"
-          @update:page="goToPage"
-          @update:perPage="changePerPage"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { computersApi } from '../../api'
-import PaginationBar from '../../components/PaginationBar.vue'
-import { colorStyle } from '@/utils/colorStyle'
-import { useListQuery } from '@/composables/listQuery'
-
-const computers = ref([])
-const loading = ref(true)
-const { page, search, setPage, setSearch } = useListQuery({ onChange: loadComputers })
-const totalPages = ref(1)
-const perPage = ref(20)
-
-let searchTimeout = null
-
-onMounted(() => {
-  loadComputers()
-})
-
-async function loadComputers() {
-  loading.value = true
-  try {
-    const params = {
-      page: page.value,
-      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?.totalpages || response.data.meta?.pagination?.total_pages || 1
-  } catch (error) {
-    console.error('Error loading computers:', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-function debouncedSearch() {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    setSearch(search.value)
-    loadComputers()
-  }, 300)
-}
-
-function goToPage(p) {
-  setPage(p)
-  loadComputers()
-}
-
-function changePerPage(newPerPage) {
-  perPage.value = newPerPage
-  setPage(1)
-  loadComputers()
-}
-
-</script>
-
-<style scoped>
-.access-link {
-  display: inline-block;
-  padding: 2px 10px;
-  margin: 0 4px 3px 0;
-  border-radius: 12px;
-  background: var(--primary);
-  color: #fff;
-  font-size: 0.78rem;
-  font-weight: 600;
-  text-decoration: none;
-}
-.access-link:hover {
-  background: var(--primary-dark);
-  text-decoration: none;
-}
-.access-link.disabled {
-  background: var(--secondary);
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.mono {
-  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-}
-
-/* keep the cell as a table-cell; flex on a <td> strips table-cell layout and
-   offsets the row. lay tags out inline instead. */
-.features {
-  white-space: nowrap;
-}
-
-.feature-tag {
-  display: inline-block;
-  margin-right: 0.375rem;
-  padding: 0.3rem 0.625rem;
-  font-size: 0.875rem;
-  border-radius: 5px;
-  background: var(--bg);
-  color: var(--text-light);
-}
-
-.feature-tag:last-child {
-  margin-right: 0;
-}
-
-/* the global .actions rule is inline-flex, which also breaks table-cell
-   alignment when applied straight on a <td>; pin it back to a cell here. */
-td.actions {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.feature-tag.active {
-  background: #e3f2fd;
-  color: #1976d2;
-}
-
-@media (prefers-color-scheme: dark) {
-  .feature-tag.active {
-    background: #1e3a5f;
-    color: #60a5fa;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Computers</h2>
+      <router-link to="/print/asset-label-batch/computer" class="btn btn-secondary" target="_blank">Print Labels</router-link>
+      <router-link to="/pcs/new" class="btn btn-primary">Add Computer</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search computers..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Asset Tag</th>
+                <th>Hostname</th>
+                <th>Serial Number</th>
+                <th>Type</th>
+                <th>Remote Access</th>
+                <th>Status</th>
+                <th>Location</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in computers" :key="item.assetid" class="clickable-row" @click="$router.push(`/pcs/${item.computer?.computerid || item.assetid}`)">
+                <td>{{ item.assetnumber }}</td>
+                <td>{{ item.computer?.hostname || '-' }}</td>
+                <td class="mono">{{ item.serialnumber || '-' }}</td>
+                <td>{{ item.computer?.computertypename || '-' }}</td>
+                <td class="features">
+                  <template v-for="a in (item.accessmethods || [])" :key="a.id">
+                    <a v-if="a.link" :href="a.link" class="access-link" :title="a.link" @click.stop>{{ a.name }}</a>
+                    <span v-else class="access-link disabled" title="No hostname/IP set">{{ a.name }}</span>
+                  </template>
+                  <span v-if="!(item.accessmethods || []).length">-</span>
+                </td>
+                <td>
+                  <span class="badge" :style="colorStyle(item.statuscolor)">
+                    {{ item.statusname || 'Unknown' }}
+                  </span>
+                </td>
+                <td>{{ item.locationname || '-' }}</td>
+                <td class="actions" @click.stop>
+                  <router-link
+                    :to="`/pcs/${item.computer?.computerid || item.assetid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="computers.length === 0">
+                <td colspan="8" style="text-align: center; color: var(--text-light);">
+                  No computers found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <PaginationBar
+          :page="page"
+          :totalPages="totalPages"
+          :perPage="perPage"
+          @update:page="goToPage"
+          @update:perPage="changePerPage"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { computersApi } from '../../api'
+import PaginationBar from '../../components/PaginationBar.vue'
+import { colorStyle } from '@/utils/colorStyle'
+import { useListQuery } from '@/composables/listQuery'
+
+const computers = ref([])
+const loading = ref(true)
+const { page, search, setPage, setSearch } = useListQuery({ onChange: loadComputers })
+const totalPages = ref(1)
+const perPage = ref(20)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadComputers()
+})
+
+async function loadComputers() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      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?.totalpages || response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading computers:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    setSearch(search.value)
+    loadComputers()
+  }, 300)
+}
+
+function goToPage(p) {
+  setPage(p)
+  loadComputers()
+}
+
+function changePerPage(newPerPage) {
+  perPage.value = newPerPage
+  setPage(1)
+  loadComputers()
+}
+
+</script>
+
+<style scoped>
+.access-link {
+  display: inline-block;
+  padding: 2px 10px;
+  margin: 0 4px 3px 0;
+  border-radius: 12px;
+  background: var(--primary);
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+.access-link:hover {
+  background: var(--primary-dark);
+  text-decoration: none;
+}
+.access-link.disabled {
+  background: var(--secondary);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+/* keep the cell as a table-cell; flex on a <td> strips table-cell layout and
+   offsets the row. lay tags out inline instead. */
+.features {
+  white-space: nowrap;
+}
+
+.feature-tag {
+  display: inline-block;
+  margin-right: 0.375rem;
+  padding: 0.3rem 0.625rem;
+  font-size: 0.875rem;
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+.feature-tag:last-child {
+  margin-right: 0;
+}
+
+/* the global .actions rule is inline-flex, which also breaks table-cell
+   alignment when applied straight on a <td>; pin it back to a cell here. */
+td.actions {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.feature-tag.active {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+  .feature-tag.active {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+}
+</style>
diff --git a/frontend/src/views/printers/PrintersList.vue b/frontend/src/views/printers/PrintersList.vue
index 2b0fa82..f64acf0 100644
--- a/frontend/src/views/printers/PrintersList.vue
+++ b/frontend/src/views/printers/PrintersList.vue
@@ -44,7 +44,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="printer in printers" :key="printer.printer?.printerid || printer.assetid">
+              <tr v-for="printer in printers" :key="printer.printer?.printerid || printer.assetid" class="clickable-row" @click="$router.push(`/printers/${printer.printer?.printerid || printer.assetid}`)">
                 <td>{{ printer.assetnumber }}</td>
                 <td>{{ printer.name && printer.name.toUpperCase() !== 'NONE' ? printer.name : (printer.printer?.hostname || '-') }}</td>
                 <td>{{ printer.businessunitname || '-' }}</td>
@@ -55,7 +55,7 @@
                     {{ printer.statusname || 'Active' }}
                   </span>
                 </td>
-                <td class="actions">
+                <td class="actions" @click.stop>
                   <router-link
                     :to="`/printers/${printer.printer?.printerid || printer.assetid}`"
                     class="btn btn-secondary btn-sm"