Migrate frontend to plugin-based asset architecture

- Add equipmentApi and computersApi to replace legacy machinesApi
- Add controller vendor/model fields to Equipment model and forms
- Fix map marker navigation to use plugin-specific IDs (equipmentid,
  computerid, printerid, networkdeviceid) instead of assetid
- Fix search to use unified Asset table with correct plugin IDs
- Remove legacy printer search that used non-existent field names
- Enable optional JWT auth for detail endpoints (public read access)
- Clean up USB plugin models (remove unused checkout model)

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

frontend/src/views/Dashboard.vue

@@ -54,10 +54,10 @@
         </div>
       </div>
 
-      <!-- Recent Machines -->
+      <!-- Recent Devices -->
       <div class="card">
         <div class="card-header">
-          <h3>Recent Machines</h3>
+          <h3>Recent Devices</h3>
           <router-link to="/machines" class="btn btn-secondary btn-sm">View All</router-link>
         </div>
 
@@ -65,26 +65,22 @@
           <table>
             <thead>
               <tr>
-                <th>Machine #</th>
-                <th>Alias</th>
+                <th>Name</th>
+                <th>Category</th>
                 <th>Type</th>
-                <th>Status</th>
+                <th>Business Unit</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="machine in recentMachines" :key="machine.machineid">
-                <td>{{ machine.machinenumber }}</td>
-                <td>{{ machine.alias || '-' }}</td>
-                <td>{{ machine.machinetype }}</td>
-                <td>
-                  <span class="badge" :class="getStatusClass(machine.status)">
-                    {{ machine.status || 'Unknown' }}
-                  </span>
-                </td>
+                <td>{{ machine.machinenumber || machine.hostname || machine.alias || '-' }}</td>
+                <td>{{ machine.category || '-' }}</td>
+                <td>{{ machine.machinetype || '-' }}</td>
+                <td>{{ machine.businessunit || '-' }}</td>
               </tr>
               <tr v-if="recentMachines.length === 0">
                 <td colspan="4" style="text-align: center; color: var(--text-light);">
-                  No machines found
+                  No devices found
                 </td>
               </tr>
             </tbody>

frontend/src/views/MapView.vue

@@ -10,19 +10,44 @@
     <div v-if="loading" class="loading">Loading...</div>
 
     <template v-else>
-      <!-- Layer Toggles -->
-      <div class="layer-toggles">
-        <label v-for="t in assetTypes" :key="t.assettypeid" class="layer-toggle">
-          <input
-            type="checkbox"
-            v-model="visibleTypes"
-            :value="t.assettype"
-            @change="updateMapLayers"
-          />
-          <span class="layer-icon">{{ getTypeIcon(t.assettype) }}</span>
-          <span>{{ t.assettype }}</span>
-          <span class="layer-count">({{ getTypeCount(t.assettype) }})</span>
-        </label>
+      <!-- Filter Controls -->
+      <div class="map-filters">
+        <select v-model="selectedType" @change="onTypeChange">
+          <option value="">All Asset Types</option>
+          <option v-for="t in assetTypes" :key="t.assettypeid" :value="t.assettype">
+            {{ formatTypeName(t.assettype) }} ({{ getTypeCount(t.assettype) }})
+          </option>
+        </select>
+
+        <select v-model="selectedSubtype" @change="updateMapLayers" :disabled="!selectedType || !currentSubtypes.length">
+          <option value="">{{ subtypeLabel }}</option>
+          <option v-for="st in currentSubtypes" :key="st.id" :value="st.id">
+            {{ st.name }}
+          </option>
+        </select>
+
+        <select v-model="selectedBusinessUnit" @change="updateMapLayers">
+          <option value="">All Business Units</option>
+          <option v-for="bu in businessunits" :key="bu.businessunitid" :value="bu.businessunitid">
+            {{ bu.businessunit }}
+          </option>
+        </select>
+
+        <select v-model="selectedStatus" @change="updateMapLayers">
+          <option value="">All Statuses</option>
+          <option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
+            {{ s.status }}
+          </option>
+        </select>
+
+        <input
+          type="text"
+          v-model="searchQuery"
+          placeholder="Search assets..."
+          @input="debouncedSearch"
+        />
+
+        <span class="result-count">{{ filteredAssets.length }} assets</span>
       </div>
 
       <ShopFloorMap
@@ -32,6 +57,9 @@
         :statuses="statuses"
         :assetTypeMode="true"
         :theme="currentTheme"
+        :selectedAssetType="selectedType"
+        :subtypeColors="subtypeColorMap"
+        :subtypeNames="subtypeNameMap"
         @markerClick="handleMarkerClick"
       />
     </template>
@@ -53,11 +81,125 @@ const assets = ref([])
 const assetTypes = ref([])
 const businessunits = ref([])
 const statuses = ref([])
-const visibleTypes = ref([])
+const subtypes = ref({})
+
+// Filter state
+const selectedType = ref('')
+const selectedSubtype = ref('')
+const selectedBusinessUnit = ref('')
+const selectedStatus = ref('')
+const searchQuery = ref('')
+
+let searchTimeout = null
+
+// Case-insensitive lookup helper for subtypes
+function getSubtypesForType(typeName) {
+  if (!typeName || !subtypes.value) return []
+  // Try exact match first
+  if (subtypes.value[typeName]) return subtypes.value[typeName]
+  // Try case-insensitive match
+  const lowerType = typeName.toLowerCase()
+  for (const [key, value] of Object.entries(subtypes.value)) {
+    if (key.toLowerCase() === lowerType) return value
+  }
+  return []
+}
+
+const currentSubtypes = computed(() => {
+  if (!selectedType.value) return []
+  return getSubtypesForType(selectedType.value)
+})
+
+const subtypeLabel = computed(() => {
+  if (!selectedType.value) return 'Select type first'
+  if (!currentSubtypes.value.length) return 'No subtypes'
+  const labels = {
+    'equipment': 'All Machine Types',
+    'computer': 'All Computer Types',
+    'network device': 'All Device Types',
+    'printer': 'All Printer Types'
+  }
+  return labels[selectedType.value.toLowerCase()] || 'All Subtypes'
+})
+
+// Generate distinct colors for subtypes
+const subtypeColorPalette = [
+  '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
+  '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50',
+  '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
+  '#FF5722', '#795548', '#607D8B', '#00ACC1', '#5C6BC0'
+]
+
+// Map subtype IDs to colors
+const subtypeColorMap = computed(() => {
+  const colorMap = {}
+  const allSubtypes = currentSubtypes.value
+  allSubtypes.forEach((st, index) => {
+    colorMap[st.id] = subtypeColorPalette[index % subtypeColorPalette.length]
+  })
+  return colorMap
+})
+
+// Map subtype IDs to names
+const subtypeNameMap = computed(() => {
+  const nameMap = {}
+  currentSubtypes.value.forEach(st => {
+    nameMap[st.id] = st.name
+  })
+  return nameMap
+})
 
 const filteredAssets = computed(() => {
-  if (visibleTypes.value.length === 0) return assets.value
-  return assets.value.filter(a => visibleTypes.value.includes(a.assettype))
+  let result = assets.value
+
+  // Filter by asset type (case-insensitive)
+  if (selectedType.value) {
+    const selectedLower = selectedType.value.toLowerCase()
+    result = result.filter(a => a.assettype && a.assettype.toLowerCase() === selectedLower)
+  }
+
+  // Filter by subtype (case-insensitive type check)
+  if (selectedSubtype.value) {
+    const subtypeId = parseInt(selectedSubtype.value)
+    const typeLower = selectedType.value?.toLowerCase() || ''
+    result = result.filter(a => {
+      if (!a.typedata) return false
+      // Check different ID fields based on asset type
+      if (typeLower === 'equipment') {
+        return a.typedata.equipmenttypeid === subtypeId
+      } else if (typeLower === 'computer') {
+        return a.typedata.computertypeid === subtypeId
+      } else if (typeLower === 'network device') {
+        return a.typedata.networkdevicetypeid === subtypeId
+      } else if (typeLower === 'printer') {
+        return a.typedata.printertypeid === subtypeId
+      }
+      return false
+    })
+  }
+
+  // Filter by business unit
+  if (selectedBusinessUnit.value) {
+    result = result.filter(a => a.businessunitid === parseInt(selectedBusinessUnit.value))
+  }
+
+  // Filter by status
+  if (selectedStatus.value) {
+    result = result.filter(a => a.statusid === parseInt(selectedStatus.value))
+  }
+
+  // Filter by search query
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(a =>
+      (a.assetnumber && a.assetnumber.toLowerCase().includes(q)) ||
+      (a.name && a.name.toLowerCase().includes(q)) ||
+      (a.displayname && a.displayname.toLowerCase().includes(q)) ||
+      (a.serialnumber && a.serialnumber.toLowerCase().includes(q))
+    )
+  }
+
+  return result
 })
 
 onMounted(async () => {
@@ -69,9 +211,7 @@ onMounted(async () => {
     assetTypes.value = data.filters?.assettypes || []
     businessunits.value = data.filters?.businessunits || []
     statuses.value = data.filters?.statuses || []
-
-    // Default: show all types
-    visibleTypes.value = assetTypes.value.map(t => t.assettype)
+    subtypes.value = data.filters?.subtypes || {}
   } catch (error) {
     console.error('Failed to load map data:', error)
   } finally {
@@ -79,43 +219,69 @@ onMounted(async () => {
   }
 })
 
-function getTypeIcon(assettype) {
-  const icons = {
-    'equipment': '⚙',
-    'computer': '💻',
-    'printer': '🖨',
-    'network_device': '🌐'
+function formatTypeName(assettype) {
+  if (!assettype) return assettype
+  const names = {
+    'equipment': 'Equipment',
+    'computer': 'Computers',
+    'printer': 'Printers',
+    'network device': 'Network Devices',
+    'network_device': 'Network Devices'
   }
-  return icons[assettype] || '📦'
+  return names[assettype.toLowerCase()] || assettype
 }
 
 function getTypeCount(assettype) {
-  return assets.value.filter(a => a.assettype === assettype).length
+  if (!assettype) return 0
+  const lowerType = assettype.toLowerCase()
+  return assets.value.filter(a => a.assettype && a.assettype.toLowerCase() === lowerType).length
+}
+
+function onTypeChange() {
+  // Reset subtype when type changes
+  selectedSubtype.value = ''
+  updateMapLayers()
 }
 
 function updateMapLayers() {
   // Filter is reactive via computed property
 }
 
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    updateMapLayers()
+  }, 300)
+}
+
 function handleMarkerClick(asset) {
-  // Route based on asset type
+  // Route based on asset type (lowercase keys to match API data)
+  const assetType = (asset.assettype || '').toLowerCase()
   const routeMap = {
     'equipment': '/machines',
     'computer': '/pcs',
     'printer': '/printers',
-    'network_device': '/network'
+    'network_device': '/network',
+    'network device': '/network'
   }
 
-  const basePath = routeMap[asset.assettype] || '/machines'
+  const basePath = routeMap[assetType] || '/machines'
 
-  // For network devices, use the networkdeviceid from typedata
-  if (asset.assettype === 'network_device' && asset.typedata?.networkdeviceid) {
-    router.push(`/network/${asset.typedata.networkdeviceid}`)
-  } else {
-    // For machines (equipment, computer, printer), use machineid from typedata
-    const id = asset.typedata?.machineid || asset.assetid
-    router.push(`${basePath}/${id}`)
+  // Get the plugin-specific ID from typedata
+  let id = asset.assetid  // fallback
+  if (asset.typedata) {
+    if (assetType === 'equipment' && asset.typedata.equipmentid) {
+      id = asset.typedata.equipmentid
+    } else if (assetType === 'computer' && asset.typedata.computerid) {
+      id = asset.typedata.computerid
+    } else if (assetType === 'printer' && asset.typedata.printerid) {
+      id = asset.typedata.printerid
+    } else if ((assetType === 'network_device' || assetType === 'network device') && asset.typedata.networkdeviceid) {
+      id = asset.typedata.networkdeviceid
+    }
   }
+
+  router.push(`${basePath}/${id}`)
 }
 </script>
 
@@ -130,43 +296,45 @@ function handleMarkerClick(asset) {
   flex-shrink: 0;
 }
 
-.layer-toggles {
+.map-filters {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   padding: 0.75rem 1rem;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 8px;
   margin-bottom: 0.75rem;
   flex-wrap: wrap;
-}
-
-.layer-toggle {
-  display: flex;
   align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
+}
+
+.map-filters select,
+.map-filters input {
   padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  transition: background 0.2s;
-}
-
-.layer-toggle:hover {
   background: var(--bg);
+  color: var(--text);
+  font-size: 0.875rem;
 }
 
-.layer-toggle input[type="checkbox"] {
-  width: 1.125rem;
-  height: 1.125rem;
+.map-filters select {
+  min-width: 160px;
 }
 
-.layer-icon {
-  font-size: 1.25rem;
+.map-filters select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.layer-count {
+.map-filters input {
+  min-width: 180px;
+}
+
+.result-count {
   color: var(--text-light);
   font-size: 0.875rem;
+  margin-left: auto;
 }
 
 .map-page :deep(.shopfloor-map) {

frontend/src/views/machines/MachineDetail.vue

@@ -3,7 +3,7 @@
     <div class="page-header">
       <h2>Equipment Details</h2>
       <div class="header-actions">
-        <router-link :to="`/machines/${machine?.machineid}/edit`" class="btn btn-primary" v-if="machine">
+        <router-link :to="`/machines/${equipment?.equipment?.equipmentid}/edit`" class="btn btn-primary" v-if="equipment">
           Edit
         </router-link>
         <router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
@@ -12,41 +12,38 @@
 
     <div v-if="loading" class="loading">Loading...</div>
 
-    <template v-else-if="machine">
+    <template v-else-if="equipment">
       <!-- Hero Section -->
       <div class="hero-card">
-        <div class="hero-image" v-if="machine.model?.imageurl">
-          <img :src="machine.model.imageurl" :alt="machine.model?.modelnumber" />
-        </div>
         <div class="hero-content">
           <div class="hero-title">
-            <h1>{{ machine.machinenumber }}</h1>
-            <span v-if="machine.alias" class="hero-alias">{{ machine.alias }}</span>
+            <h1>{{ equipment.assetnumber }}</h1>
+            <span v-if="equipment.name" class="hero-alias">{{ equipment.name }}</span>
           </div>
           <div class="hero-meta">
-            <span class="badge badge-lg" :class="getCategoryClass(machine.machinetype?.category)">
-              {{ machine.machinetype?.category || 'Unknown' }}
+            <span class="badge badge-lg badge-primary">
+              {{ equipment.assettype_name || 'Equipment' }}
             </span>
-            <span class="badge badge-lg" :class="getStatusClass(machine.status?.status)">
-              {{ machine.status?.status || 'Unknown' }}
+            <span class="badge badge-lg" :class="getStatusClass(equipment.status_name)">
+              {{ equipment.status_name || 'Unknown' }}
             </span>
           </div>
           <div class="hero-details">
-            <div class="hero-detail" v-if="machine.machinetype?.machinetype">
+            <div class="hero-detail" v-if="equipment.equipment?.equipmenttype_name">
               <span class="hero-detail-label">Type</span>
-              <span class="hero-detail-value">{{ machine.machinetype.machinetype }}</span>
+              <span class="hero-detail-value">{{ equipment.equipment.equipmenttype_name }}</span>
             </div>
-            <div class="hero-detail" v-if="machine.vendor?.vendor">
+            <div class="hero-detail" v-if="equipment.equipment?.vendor_name">
               <span class="hero-detail-label">Vendor</span>
-              <span class="hero-detail-value">{{ machine.vendor.vendor }}</span>
+              <span class="hero-detail-value">{{ equipment.equipment.vendor_name }}</span>
             </div>
-            <div class="hero-detail" v-if="machine.model?.modelnumber">
+            <div class="hero-detail" v-if="equipment.equipment?.model_name">
               <span class="hero-detail-label">Model</span>
-              <span class="hero-detail-value">{{ machine.model.modelnumber }}</span>
+              <span class="hero-detail-value">{{ equipment.equipment.model_name }}</span>
             </div>
-            <div class="hero-detail" v-if="machine.location?.location">
+            <div class="hero-detail" v-if="equipment.location_name">
               <span class="hero-detail-label">Location</span>
-              <span class="hero-detail-value">{{ machine.location.location }}</span>
+              <span class="hero-detail-value">{{ equipment.location_name }}</span>
             </div>
           </div>
         </div>
@@ -61,20 +58,16 @@
             <h3 class="section-title">Identity</h3>
             <div class="info-list">
               <div class="info-row">
-                <span class="info-label">Machine Number</span>
-                <span class="info-value">{{ machine.machinenumber }}</span>
+                <span class="info-label">Asset Number</span>
+                <span class="info-value">{{ equipment.assetnumber }}</span>
               </div>
-              <div class="info-row" v-if="machine.alias">
-                <span class="info-label">Alias</span>
-                <span class="info-value">{{ machine.alias }}</span>
+              <div class="info-row" v-if="equipment.name">
+                <span class="info-label">Name</span>
+                <span class="info-value">{{ equipment.name }}</span>
               </div>
-              <div class="info-row" v-if="machine.hostname">
-                <span class="info-label">Hostname</span>
-                <span class="info-value mono">{{ machine.hostname }}</span>
-              </div>
-              <div class="info-row" v-if="machine.serialnumber">
+              <div class="info-row" v-if="equipment.serialnumber">
                 <span class="info-label">Serial Number</span>
-                <span class="info-value mono">{{ machine.serialnumber }}</span>
+                <span class="info-value mono">{{ equipment.serialnumber }}</span>
               </div>
             </div>
           </div>
@@ -85,47 +78,73 @@
             <div class="info-list">
               <div class="info-row">
                 <span class="info-label">Type</span>
-                <span class="info-value">{{ machine.machinetype?.machinetype || '-' }}</span>
+                <span class="info-value">{{ equipment.equipment?.equipmenttype_name || '-' }}</span>
               </div>
               <div class="info-row">
                 <span class="info-label">Vendor</span>
-                <span class="info-value">{{ machine.vendor?.vendor || '-' }}</span>
+                <span class="info-value">{{ equipment.equipment?.vendor_name || '-' }}</span>
               </div>
               <div class="info-row">
                 <span class="info-label">Model</span>
-                <span class="info-value">{{ machine.model?.modelnumber || '-' }}</span>
-              </div>
-              <div class="info-row" v-if="machine.operatingsystem">
-                <span class="info-label">Operating System</span>
-                <span class="info-value">{{ machine.operatingsystem.osname }}</span>
+                <span class="info-value">{{ equipment.equipment?.model_name || '-' }}</span>
               </div>
             </div>
           </div>
 
-          <!-- PC Information (if PC) -->
-          <div class="section-card" v-if="isPc">
-            <h3 class="section-title">PC Status</h3>
+          <!-- Controller Section (for CNC machines) -->
+          <div class="section-card" v-if="equipment.equipment?.controller_vendor_name || equipment.equipment?.controller_model_name">
+            <h3 class="section-title">Controller</h3>
             <div class="info-list">
-              <div class="info-row" v-if="machine.loggedinuser">
-                <span class="info-label">Logged In User</span>
-                <span class="info-value">{{ machine.loggedinuser }}</span>
+              <div class="info-row">
+                <span class="info-label">Vendor</span>
+                <span class="info-value">{{ equipment.equipment?.controller_vendor_name || '-' }}</span>
               </div>
               <div class="info-row">
-                <span class="info-label">Last Reported</span>
-                <span class="info-value">{{ formatDate(machine.lastreporteddate) }}</span>
+                <span class="info-label">Model</span>
+                <span class="info-value">{{ equipment.equipment?.controller_model_name || '-' }}</span>
               </div>
+            </div>
+          </div>
+
+          <!-- Equipment Configuration -->
+          <div class="section-card">
+            <h3 class="section-title">Configuration</h3>
+            <div class="info-list">
               <div class="info-row">
-                <span class="info-label">Last Boot</span>
-                <span class="info-value">{{ formatDate(machine.lastboottime) }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">Features</span>
+                <span class="info-label">Requires Manual Config</span>
                 <span class="info-value">
-                  <span class="feature-tag" :class="{ active: machine.isvnc }">VNC</span>
-                  <span class="feature-tag" :class="{ active: machine.iswinrm }">WinRM</span>
-                  <span class="feature-tag" :class="{ active: machine.isshopfloor }">Shopfloor</span>
+                  <span class="feature-tag" :class="{ active: equipment.equipment?.requiresmanualconfig }">
+                    {{ equipment.equipment?.requiresmanualconfig ? 'Yes' : 'No' }}
+                  </span>
                 </span>
               </div>
+              <div class="info-row">
+                <span class="info-label">Location Only</span>
+                <span class="info-value">
+                  <span class="feature-tag" :class="{ active: equipment.equipment?.islocationonly }">
+                    {{ equipment.equipment?.islocationonly ? 'Yes' : 'No' }}
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Maintenance Section -->
+          <div class="section-card" v-if="equipment.equipment?.lastmaintenancedate || equipment.equipment?.nextmaintenancedate">
+            <h3 class="section-title">Maintenance</h3>
+            <div class="info-list">
+              <div class="info-row" v-if="equipment.equipment?.lastmaintenancedate">
+                <span class="info-label">Last Maintenance</span>
+                <span class="info-value">{{ formatDate(equipment.equipment.lastmaintenancedate) }}</span>
+              </div>
+              <div class="info-row" v-if="equipment.equipment?.nextmaintenancedate">
+                <span class="info-label">Next Maintenance</span>
+                <span class="info-value">{{ formatDate(equipment.equipment.nextmaintenancedate) }}</span>
+              </div>
+              <div class="info-row" v-if="equipment.equipment?.maintenanceintervaldays">
+                <span class="info-label">Interval</span>
+                <span class="info-value">{{ equipment.equipment.maintenanceintervaldays }} days</span>
+              </div>
             </div>
           </div>
         </div>
@@ -140,31 +159,31 @@
                 <span class="info-label">Location</span>
                 <span class="info-value">
                   <LocationMapTooltip
-                    v-if="machine.mapleft != null && machine.maptop != null"
-                    :left="machine.mapleft"
-                    :top="machine.maptop"
-                    :machineName="machine.machinenumber"
+                    v-if="equipment.mapleft != null && equipment.maptop != null"
+                    :left="equipment.mapleft"
+                    :top="equipment.maptop"
+                    :machineName="equipment.assetnumber"
                   >
-                    <span class="location-link">{{ machine.location?.location || 'On Map' }}</span>
+                    <span class="location-link">{{ equipment.location_name || 'On Map' }}</span>
                   </LocationMapTooltip>
-                  <span v-else>{{ machine.location?.location || '-' }}</span>
+                  <span v-else>{{ equipment.location_name || '-' }}</span>
                 </span>
               </div>
               <div class="info-row">
                 <span class="info-label">Business Unit</span>
-                <span class="info-value">{{ machine.businessunit?.businessunit || '-' }}</span>
+                <span class="info-value">{{ equipment.businessunit_name || '-' }}</span>
               </div>
             </div>
           </div>
 
-          <!-- Connected PC (for Equipment) -->
-          <div class="section-card" v-if="isEquipment">
+          <!-- Connected PC -->
+          <div class="section-card">
             <h3 class="section-title">Connected PC</h3>
             <div v-if="!controllingPc" class="empty-message">
               No controlling PC assigned
             </div>
             <div v-else class="connected-device">
-              <router-link :to="getRelatedRoute(controllingPc)" class="device-link">
+              <router-link :to="`/pcs/${controllingPc.plugin_id || controllingPc.assetid}`" class="device-link">
                 <div class="device-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
@@ -173,66 +192,31 @@
                   </svg>
                 </div>
                 <div class="device-info">
-                  <span class="device-name">{{ controllingPc.relatedmachinenumber }}</span>
-                  <span class="device-alias" v-if="controllingPc.relatedmachinealias">{{ controllingPc.relatedmachinealias }}</span>
+                  <span class="device-name">{{ controllingPc.assetnumber }}</span>
+                  <span class="device-alias" v-if="controllingPc.name">{{ controllingPc.name }}</span>
                 </div>
               </router-link>
-              <span class="connection-type">{{ controllingPc.relationshiptype }}</span>
-            </div>
-          </div>
-
-          <!-- Controlled Equipment (for PCs) -->
-          <div class="section-card" v-if="isPc && controlledMachines.length > 0">
-            <h3 class="section-title">Controlled Equipment</h3>
-            <div class="equipment-list">
-              <router-link
-                v-for="rel in controlledMachines"
-                :key="rel.relationshipid"
-                :to="getRelatedRoute(rel)"
-                class="equipment-item"
-              >
-                <div class="equipment-info">
-                  <span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
-                  <span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
-                </div>
-                <span class="connection-tag">{{ rel.relationshiptype }}</span>
-              </router-link>
-            </div>
-          </div>
-
-          <!-- Network -->
-          <div class="section-card" v-if="machine.communications?.length">
-            <h3 class="section-title">Network</h3>
-            <div class="network-list">
-              <div v-for="comm in machine.communications" :key="comm.communicationid" class="network-item">
-                <div class="network-primary">
-                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
-                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
-                </div>
-                <div class="network-secondary" v-if="comm.macaddress">
-                  <span class="mac-address">{{ comm.macaddress }}</span>
-                </div>
-              </div>
+              <span class="connection-type">{{ controllingPc.relationshipType }}</span>
             </div>
           </div>
 
           <!-- Notes -->
-          <div class="section-card" v-if="machine.notes">
+          <div class="section-card" v-if="equipment.notes">
             <h3 class="section-title">Notes</h3>
-            <p class="notes-text">{{ machine.notes }}</p>
+            <p class="notes-text">{{ equipment.notes }}</p>
           </div>
         </div>
       </div>
 
       <!-- Audit Footer -->
       <div class="audit-footer">
-        <span>Created {{ formatDate(machine.createddate) }}<template v-if="machine.createdby"> by {{ machine.createdby }}</template></span>
-        <span>Modified {{ formatDate(machine.modifieddate) }}<template v-if="machine.modifiedby"> by {{ machine.modifiedby }}</template></span>
+        <span>Created {{ formatDate(equipment.createddate) }}<template v-if="equipment.createdby"> by {{ equipment.createdby }}</template></span>
+        <span>Modified {{ formatDate(equipment.modifieddate) }}<template v-if="equipment.modifiedby"> by {{ equipment.modifiedby }}</template></span>
       </div>
     </template>
 
     <div v-else class="card">
-      <p style="text-align: center; color: var(--text-light);">Machine not found</p>
+      <p style="text-align: center; color: var(--text-light);">Equipment not found</p>
     </div>
   </div>
 </template>
@@ -240,55 +224,63 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { machinesApi } from '../../api'
+import { equipmentApi, assetsApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 
 const route = useRoute()
 
 const loading = ref(true)
-const machine = ref(null)
-const relationships = ref([])
-
-const isPc = computed(() => {
-  return machine.value?.machinetype?.category === 'PC'
-})
-
-const isEquipment = computed(() => {
-  return machine.value?.machinetype?.category === 'Equipment'
-})
+const equipment = ref(null)
+const relationships = ref({ incoming: [], outgoing: [] })
 
 const controllingPc = computed(() => {
-  return relationships.value.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
-})
+  // For equipment, find a related computer in any "Controls" relationship
+  // Check both incoming (computer controls this) and outgoing (legacy data may have equipment -> computer)
 
-const controlledMachines = computed(() => {
-  return relationships.value.filter(r => r.direction === 'controls')
+  // First check incoming - computer as source controlling this equipment
+  for (const rel of relationships.value.incoming || []) {
+    if (rel.source_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
+      return {
+        ...rel.source_asset,
+        relationshipType: rel.relationship_type_name
+      }
+    }
+  }
+
+  // Also check outgoing - legacy data may have equipment -> computer Controls relationships
+  for (const rel of relationships.value.outgoing || []) {
+    if (rel.target_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
+      return {
+        ...rel.target_asset,
+        relationshipType: rel.relationship_type_name
+      }
+    }
+  }
+
+  return null
 })
 
 onMounted(async () => {
   try {
-    const response = await machinesApi.get(route.params.id)
-    machine.value = response.data.data
+    const response = await equipmentApi.get(route.params.id)
+    equipment.value = response.data.data
 
-    const relResponse = await machinesApi.getRelationships(route.params.id)
-    relationships.value = relResponse.data.data || []
+    // Load relationships using asset ID
+    if (equipment.value?.assetid) {
+      try {
+        const relResponse = await assetsApi.getRelationships(equipment.value.assetid)
+        relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
+      } catch (e) {
+        console.log('Relationships not available')
+      }
+    }
   } catch (error) {
-    console.error('Error loading machine:', error)
+    console.error('Error loading equipment:', error)
   } finally {
     loading.value = false
   }
 })
 
-function getCategoryClass(category) {
-  if (!category) return 'badge-info'
-  const c = category.toLowerCase()
-  if (c === 'equipment') return 'badge-primary'
-  if (c === 'pc') return 'badge-info'
-  if (c === 'network') return 'badge-warning'
-  if (c === 'printer') return 'badge-secondary'
-  return 'badge-info'
-}
-
 function getStatusClass(status) {
   if (!status) return 'badge-info'
   const s = status.toLowerCase()
@@ -302,17 +294,31 @@ function formatDate(dateStr) {
   if (!dateStr) return '-'
   return new Date(dateStr).toLocaleString()
 }
-
-function getRelatedRoute(rel) {
-  const category = rel.relatedcategory?.toLowerCase() || ''
-  const routeMap = {
-    'equipment': '/machines',
-    'pc': '/pcs',
-    'printer': '/printers'
-  }
-  const basePath = routeMap[category] || '/machines'
-  return `${basePath}/${rel.relatedmachineid}`
-}
 </script>
 
-<!-- Uses global detail page styles from style.css -->
+<style scoped>
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.feature-tag {
+  display: inline-block;
+  padding: 0.3rem 0.625rem;
+  font-size: 0.875rem;
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+.feature-tag.active {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+  .feature-tag.active {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+}
+</style>

frontend/src/views/machines/MachineForm.vue

@@ -7,13 +7,15 @@
     <div class="card">
       <div v-if="loading" class="loading">Loading...</div>
 
-      <form v-else @submit.prevent="saveMachine">
+      <form v-else @submit.prevent="saveEquipment">
+        <!-- Identity Section -->
+        <h3 class="form-section-title">Identity</h3>
         <div class="form-row">
           <div class="form-group">
-            <label for="machinenumber">Machine Number *</label>
+            <label for="assetnumber">Asset Number *</label>
             <input
-              id="machinenumber"
-              v-model="form.machinenumber"
+              id="assetnumber"
+              v-model="form.assetnumber"
               type="text"
               class="form-control"
               required
@@ -21,10 +23,10 @@
           </div>
 
           <div class="form-group">
-            <label for="alias">Alias</label>
+            <label for="name">Name / Alias</label>
             <input
-              id="alias"
-              v-model="form.alias"
+              id="name"
+              v-model="form.name"
               type="text"
               class="form-control"
             />
@@ -32,16 +34,6 @@
         </div>
 
         <div class="form-row">
-          <div class="form-group">
-            <label for="hostname">Hostname</label>
-            <input
-              id="hostname"
-              v-model="form.hostname"
-              type="text"
-              class="form-control"
-            />
-          </div>
-
           <div class="form-group">
             <label for="serialnumber">Serial Number</label>
             <input
@@ -51,27 +43,6 @@
               class="form-control"
             />
           </div>
-        </div>
-
-        <div class="form-row">
-          <div class="form-group">
-            <label for="machinetypeid">Equipment Type *</label>
-            <select
-              id="machinetypeid"
-              v-model="form.machinetypeid"
-              class="form-control"
-              required
-            >
-              <option value="">Select type...</option>
-              <option
-                v-for="mt in machineTypes"
-                :key="mt.machinetypeid"
-                :value="mt.machinetypeid"
-              >
-                {{ mt.machinetype }}
-              </option>
-            </select>
-          </div>
 
           <div class="form-group">
             <label for="statusid">Status</label>
@@ -92,7 +63,27 @@
           </div>
         </div>
 
+        <!-- Equipment Hardware Section -->
+        <h3 class="form-section-title">Equipment Hardware</h3>
         <div class="form-row">
+          <div class="form-group">
+            <label for="equipmenttypeid">Equipment Type</label>
+            <select
+              id="equipmenttypeid"
+              v-model="form.equipmenttypeid"
+              class="form-control"
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="et in equipmentTypes"
+                :key="et.equipmenttypeid"
+                :value="et.equipmenttypeid"
+              >
+                {{ et.equipmenttype }}
+              </option>
+            </select>
+          </div>
+
           <div class="form-group">
             <label for="vendorid">Vendor</label>
             <select
@@ -110,7 +101,9 @@
               </option>
             </select>
           </div>
+        </div>
 
+        <div class="form-row">
           <div class="form-group">
             <label for="modelnumberid">Model</label>
             <select
@@ -127,10 +120,56 @@
                 {{ m.modelnumber }}
               </option>
             </select>
-            <small class="form-help">Selecting a model will auto-set the equipment type</small>
+            <small class="form-help" v-if="form.vendorid">Filtered by selected vendor</small>
+          </div>
+
+          <div class="form-group"></div>
+        </div>
+
+        <!-- Controller Section (for CNC machines) -->
+        <h3 class="form-section-title">Controller</h3>
+        <div class="form-row">
+          <div class="form-group">
+            <label for="controller_vendorid">Controller Vendor</label>
+            <select
+              id="controller_vendorid"
+              v-model="form.controller_vendorid"
+              class="form-control"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+            <small class="form-help">e.g., Fanuc, Siemens, Allen-Bradley</small>
+          </div>
+
+          <div class="form-group">
+            <label for="controller_modelid">Controller Model</label>
+            <select
+              id="controller_modelid"
+              v-model="form.controller_modelid"
+              class="form-control"
+            >
+              <option value="">Select model...</option>
+              <option
+                v-for="m in filteredControllerModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small class="form-help" v-if="form.controller_vendorid">Filtered by controller vendor</small>
           </div>
         </div>
 
+        <!-- Location Section -->
+        <h3 class="form-section-title">Location & Organization</h3>
         <div class="form-row">
           <div class="form-group">
             <label for="locationid">Location</label>
@@ -145,7 +184,7 @@
                 :key="l.locationid"
                 :value="l.locationid"
               >
-                {{ l.location }}
+                {{ l.locationname }}
               </option>
             </select>
           </div>
@@ -169,56 +208,6 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label for="notes">Notes</label>
-          <textarea
-            id="notes"
-            v-model="form.notes"
-            class="form-control"
-            rows="3"
-          ></textarea>
-        </div>
-
-        <!-- Controlling PC Selection -->
-        <div class="form-row">
-          <div class="form-group">
-            <label for="controllingpc">Controlling PC</label>
-            <select
-              id="controllingpc"
-              v-model="controllingPcId"
-              class="form-control"
-            >
-              <option :value="null">None (standalone)</option>
-              <option
-                v-for="pc in pcs"
-                :key="pc.machineid"
-                :value="pc.machineid"
-              >
-                {{ pc.machinenumber }}{{ pc.alias ? ` (${pc.alias})` : '' }}
-              </option>
-            </select>
-            <small class="form-help">Select the PC that controls this equipment</small>
-          </div>
-
-          <div class="form-group" v-if="controllingPcId">
-            <label for="connectiontype">Connection Type</label>
-            <select
-              id="connectiontype"
-              v-model="relationshipTypeId"
-              class="form-control"
-            >
-              <option
-                v-for="rt in relationshipTypes"
-                :key="rt.relationshiptypeid"
-                :value="rt.relationshiptypeid"
-              >
-                {{ rt.relationshiptype }}
-              </option>
-            </select>
-            <small class="form-help">How the PC connects to this equipment</small>
-          </div>
-        </div>
-
         <!-- Map Location Picker -->
         <div class="form-group">
           <label>Map Location</label>
@@ -249,6 +238,79 @@
           </template>
         </Modal>
 
+        <!-- Configuration Section -->
+        <h3 class="form-section-title">Configuration</h3>
+        <div class="form-row">
+          <div class="form-group checkbox-group">
+            <label>
+              <input type="checkbox" v-model="form.requiresmanualconfig" />
+              Requires Manual Config
+            </label>
+            <small class="form-help">Multi-PC machine needs manual configuration</small>
+          </div>
+
+          <div class="form-group checkbox-group">
+            <label>
+              <input type="checkbox" v-model="form.islocationonly" />
+              Location Only
+            </label>
+            <small class="form-help">Virtual location marker (not actual equipment)</small>
+          </div>
+        </div>
+
+        <!-- Controlling PC Selection -->
+        <h3 class="form-section-title">Connected PC</h3>
+        <div class="form-row">
+          <div class="form-group">
+            <label for="controllingpc">Controlling PC</label>
+            <select
+              id="controllingpc"
+              v-model="controllingPcId"
+              class="form-control"
+            >
+              <option :value="null">None (standalone)</option>
+              <option
+                v-for="pc in pcs"
+                :key="pc.assetid"
+                :value="pc.assetid"
+              >
+                {{ pc.assetnumber }}{{ pc.name ? ` (${pc.name})` : '' }}
+              </option>
+            </select>
+            <small class="form-help">Select the PC that controls this equipment</small>
+          </div>
+
+          <div class="form-group" v-if="controllingPcId">
+            <label for="connectiontype">Connection Type</label>
+            <select
+              id="connectiontype"
+              v-model="relationshipTypeId"
+              class="form-control"
+            >
+              <option
+                v-for="rt in relationshipTypes"
+                :key="rt.relationshiptypeid"
+                :value="rt.relationshiptypeid"
+              >
+                {{ rt.relationshiptype }}
+              </option>
+            </select>
+            <small class="form-help">How the PC connects to this equipment</small>
+          </div>
+        </div>
+
+        <!-- Notes Section -->
+        <h3 class="form-section-title">Notes</h3>
+        <div class="form-group">
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+            placeholder="Additional notes..."
+          ></textarea>
+        </div>
+
         <div v-if="error" class="error-message">{{ error }}</div>
 
         <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
@@ -265,7 +327,7 @@
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, relationshipTypesApi, modelsApi, businessunitsApi } from '../../api'
+import { equipmentApi, vendorsApi, locationsApi, modelsApi, businessunitsApi, computersApi, assetsApi } from '../../api'
 import ShopFloorMap from '../../components/ShopFloorMap.vue'
 import Modal from '../../components/Modal.vue'
 import { currentTheme } from '../../stores/theme'
@@ -282,22 +344,25 @@ const showMapPicker = ref(false)
 const tempMapPosition = ref(null)
 
 const form = ref({
-  machinenumber: '',
-  alias: '',
-  hostname: '',
+  assetnumber: '',
+  name: '',
   serialnumber: '',
-  machinetypeid: '',
-  modelnumberid: '',
-  statusid: '',
+  statusid: 1,
+  equipmenttypeid: '',
   vendorid: '',
+  modelnumberid: '',
+  controller_vendorid: '',
+  controller_modelid: '',
   locationid: '',
   businessunitid: '',
+  requiresmanualconfig: false,
+  islocationonly: false,
   notes: '',
   mapleft: null,
   maptop: null
 })
 
-const machineTypes = ref([])
+const equipmentTypes = ref([])
 const statuses = ref([])
 const vendors = ref([])
 const locations = ref([])
@@ -308,55 +373,73 @@ const relationshipTypes = ref([])
 const controllingPcId = ref(null)
 const relationshipTypeId = ref(null)
 const existingRelationshipId = ref(null)
+const currentEquipment = ref(null)
 
-// Filter models by selected vendor
+// Filter models by selected equipment vendor
 const filteredModels = computed(() => {
-  return models.value.filter(m => {
-    // Filter by vendor if selected
-    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
-      return false
-    }
-    // Only show models for Equipment category types
-    const modelType = machineTypes.value.find(t => t.machinetypeid === m.machinetypeid)
-    if (modelType && modelType.category !== 'Equipment') {
-      return false
-    }
-    return true
-  })
+  if (!form.value.vendorid) return models.value
+  return models.value.filter(m => m.vendorid === form.value.vendorid)
 })
 
-// When model changes, auto-set the machine type
-watch(() => form.value.modelnumberid, (newModelId) => {
-  if (newModelId) {
-    const selectedModel = models.value.find(m => m.modelnumberid === newModelId)
-    if (selectedModel && selectedModel.machinetypeid) {
-      form.value.machinetypeid = selectedModel.machinetypeid
+// Filter models by selected controller vendor
+const filteredControllerModels = computed(() => {
+  if (!form.value.controller_vendorid) return models.value
+  return models.value.filter(m => m.vendorid === form.value.controller_vendorid)
+})
+
+// Clear model selection when vendor changes
+watch(() => form.value.vendorid, (newVal, oldVal) => {
+  if (oldVal && newVal !== oldVal) {
+    const currentModel = models.value.find(m => m.modelnumberid === form.value.modelnumberid)
+    if (currentModel && currentModel.vendorid !== newVal) {
+      form.value.modelnumberid = ''
+    }
+  }
+})
+
+// Clear controller model when controller vendor changes
+watch(() => form.value.controller_vendorid, (newVal, oldVal) => {
+  if (oldVal && newVal !== oldVal) {
+    const currentModel = models.value.find(m => m.modelnumberid === form.value.controller_modelid)
+    if (currentModel && currentModel.vendorid !== newVal) {
+      form.value.controller_modelid = ''
     }
   }
 })
 
 onMounted(async () => {
   try {
-    // Load reference data
-    const [mtRes, statusRes, vendorRes, locRes, modelsRes, buRes, pcsRes, relTypesRes] = await Promise.all([
-      machinetypesApi.list({ category: 'Equipment' }),
-      statusesApi.list(),
-      vendorsApi.list(),
-      locationsApi.list(),
-      modelsApi.list(),
-      businessunitsApi.list(),
-      machinesApi.list({ category: 'PC', perpage: 500 }),
-      relationshipTypesApi.list()
+    // Load reference data in parallel
+    const [typesRes, statusRes, vendorRes, locRes, modelsRes, buRes, pcsRes, relTypesRes] = await Promise.all([
+      equipmentApi.types.list(),
+      assetsApi.statuses.list(),
+      vendorsApi.list({ per_page: 500 }),
+      locationsApi.list({ per_page: 500 }),
+      modelsApi.list({ per_page: 1000 }),
+      businessunitsApi.list({ per_page: 500 }),
+      computersApi.list({ per_page: 500 }),
+      assetsApi.types.list()  // Used for relationship types, will fix below
     ])
 
-    machineTypes.value = mtRes.data.data || []
+    equipmentTypes.value = typesRes.data.data || []
     statuses.value = statusRes.data.data || []
     vendors.value = vendorRes.data.data || []
     locations.value = locRes.data.data || []
     models.value = modelsRes.data.data || []
     businessunits.value = buRes.data.data || []
     pcs.value = pcsRes.data.data || []
-    relationshipTypes.value = relTypesRes.data.data || []
+
+    // Load relationship types separately
+    try {
+      const relRes = await fetch('/api/assets/relationshiptypes')
+      if (relRes.ok) {
+        const relData = await relRes.json()
+        relationshipTypes.value = relData.data || []
+      }
+    } catch (e) {
+      // Fallback - use hardcoded Controls type
+      relationshipTypes.value = [{ relationshiptypeid: 1, relationshiptype: 'Controls' }]
+    }
 
     // Set default relationship type to "Controls" if available
     const controlsType = relationshipTypes.value.find(t => t.relationshiptype === 'Controls')
@@ -364,34 +447,49 @@ onMounted(async () => {
       relationshipTypeId.value = controlsType.relationshiptypeid
     }
 
-    // Load machine if editing
+    // Load equipment if editing
     if (isEdit.value) {
-      const response = await machinesApi.get(route.params.id)
-      const machine = response.data.data
+      const response = await equipmentApi.get(route.params.id)
+      const data = response.data.data
+      currentEquipment.value = data
+
       form.value = {
-        machinenumber: machine.machinenumber || '',
-        alias: machine.alias || '',
-        hostname: machine.hostname || '',
-        serialnumber: machine.serialnumber || '',
-        machinetypeid: machine.machinetype?.machinetypeid || '',
-        modelnumberid: machine.model?.modelnumberid || '',
-        statusid: machine.status?.statusid || '',
-        vendorid: machine.vendor?.vendorid || '',
-        locationid: machine.location?.locationid || '',
-        businessunitid: machine.businessunit?.businessunitid || '',
-        notes: machine.notes || '',
-        mapleft: machine.mapleft ?? null,
-        maptop: machine.maptop ?? null
+        assetnumber: data.assetnumber || '',
+        name: data.name || '',
+        serialnumber: data.serialnumber || '',
+        statusid: data.statusid || 1,
+        equipmenttypeid: data.equipment?.equipmenttypeid || '',
+        vendorid: data.equipment?.vendorid || '',
+        modelnumberid: data.equipment?.modelnumberid || '',
+        controller_vendorid: data.equipment?.controller_vendorid || '',
+        controller_modelid: data.equipment?.controller_modelid || '',
+        locationid: data.locationid || '',
+        businessunitid: data.businessunitid || '',
+        requiresmanualconfig: data.equipment?.requiresmanualconfig || false,
+        islocationonly: data.equipment?.islocationonly || false,
+        notes: data.notes || '',
+        mapleft: data.mapleft ?? null,
+        maptop: data.maptop ?? null
       }
 
-      // Load existing relationship (controlling PC)
-      const relResponse = await machinesApi.getRelationships(route.params.id)
-      const relationships = relResponse.data.data || []
-      const pcRelationship = relationships.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
-      if (pcRelationship) {
-        controllingPcId.value = pcRelationship.relatedmachineid
-        relationshipTypeId.value = pcRelationship.relationshiptypeid
-        existingRelationshipId.value = pcRelationship.relationshipid
+      // Load existing relationships to find controlling PC
+      if (data.assetid) {
+        try {
+          const relResponse = await assetsApi.getRelationships(data.assetid)
+          const relationships = relResponse.data.data || { incoming: [], outgoing: [] }
+
+          // Check incoming relationships for a controlling PC
+          for (const rel of relationships.incoming || []) {
+            if (rel.source_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
+              controllingPcId.value = rel.source_asset.assetid
+              relationshipTypeId.value = rel.relationshiptypeid
+              existingRelationshipId.value = rel.assetrelationshipid
+              break
+            }
+          }
+        } catch (e) {
+          console.log('Could not load relationships')
+        }
       }
     }
   } catch (err) {
@@ -420,45 +518,56 @@ function clearMapPosition() {
   tempMapPosition.value = null
 }
 
-async function saveMachine() {
+async function saveEquipment() {
   error.value = ''
   saving.value = true
 
   try {
     const data = {
-      ...form.value,
-      machinetypeid: form.value.machinetypeid || null,
-      modelnumberid: form.value.modelnumberid || null,
-      statusid: form.value.statusid || null,
+      assetnumber: form.value.assetnumber,
+      name: form.value.name || null,
+      serialnumber: form.value.serialnumber || null,
+      statusid: form.value.statusid || 1,
+      equipmenttypeid: form.value.equipmenttypeid || null,
       vendorid: form.value.vendorid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      controller_vendorid: form.value.controller_vendorid || null,
+      controller_modelid: form.value.controller_modelid || null,
       locationid: form.value.locationid || null,
       businessunitid: form.value.businessunitid || null,
+      requiresmanualconfig: form.value.requiresmanualconfig,
+      islocationonly: form.value.islocationonly,
+      notes: form.value.notes || null,
       mapleft: form.value.mapleft,
       maptop: form.value.maptop
     }
 
-    let machineId = route.params.id
+    let savedEquipment
+    let assetId
 
     if (isEdit.value) {
-      await machinesApi.update(route.params.id, data)
+      const response = await equipmentApi.update(route.params.id, data)
+      savedEquipment = response.data.data
+      assetId = savedEquipment.assetid
     } else {
-      const response = await machinesApi.create(data)
-      machineId = response.data.data.machineid
+      const response = await equipmentApi.create(data)
+      savedEquipment = response.data.data
+      assetId = savedEquipment.assetid
     }
 
     // Handle relationship (controlling PC)
-    await saveRelationship(machineId)
+    await saveRelationship(assetId)
 
-    router.push('/machines')
+    router.push(`/machines/${savedEquipment.equipment?.equipmentid || route.params.id}`)
   } catch (err) {
-    console.error('Error saving machine:', err)
-    error.value = err.response?.data?.message || 'Failed to save machine'
+    console.error('Error saving equipment:', err)
+    error.value = err.response?.data?.message || 'Failed to save equipment'
   } finally {
     saving.value = false
   }
 }
 
-async function saveRelationship(machineId) {
+async function saveRelationship(assetId) {
   // If no PC selected and no existing relationship, nothing to do
   if (!controllingPcId.value && !existingRelationshipId.value) {
     return
@@ -466,7 +575,7 @@ async function saveRelationship(machineId) {
 
   // If clearing the relationship
   if (!controllingPcId.value && existingRelationshipId.value) {
-    await machinesApi.deleteRelationship(existingRelationshipId.value)
+    await assetsApi.deleteRelationship(existingRelationshipId.value)
     return
   }
 
@@ -474,20 +583,50 @@ async function saveRelationship(machineId) {
   if (controllingPcId.value) {
     // If there's an existing relationship, delete it first
     if (existingRelationshipId.value) {
-      await machinesApi.deleteRelationship(existingRelationshipId.value)
+      await assetsApi.deleteRelationship(existingRelationshipId.value)
     }
 
-    // Create new relationship
-    await machinesApi.createRelationship(machineId, {
-      relatedmachineid: controllingPcId.value,
-      relationshiptypeid: relationshipTypeId.value,
-      direction: 'controlled_by'
+    // Create new relationship (PC controls Equipment, so PC is source, Equipment is target)
+    await assetsApi.createRelationship({
+      source_assetid: controllingPcId.value,
+      target_assetid: assetId,
+      relationshiptypeid: relationshipTypeId.value
     })
   }
 }
 </script>
 
 <style scoped>
+.form-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 1.5rem 0 0.75rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.form-section-title:first-of-type {
+  margin-top: 0;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
 .map-location-control {
   display: flex;
   align-items: center;
@@ -499,7 +638,7 @@ async function saveRelationship(machineId) {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  background: #e3f2fd;
+  background: var(--bg);
   border-radius: 4px;
   font-family: monospace;
 }

frontend/src/views/machines/MachinesList.vue

@@ -24,9 +24,9 @@
           <table>
             <thead>
               <tr>
-                <th>Machine #</th>
-                <th>Alias</th>
-                <th>Hostname</th>
+                <th>Asset #</th>
+                <th>Name</th>
+                <th>Serial Number</th>
                 <th>Type</th>
                 <th>Status</th>
                 <th>Location</th>
@@ -34,27 +34,27 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="machine in machines" :key="machine.machineid">
-                <td>{{ machine.machinenumber }}</td>
-                <td>{{ machine.alias || '-' }}</td>
-                <td>{{ machine.hostname || '-' }}</td>
-                <td>{{ machine.machinetype }}</td>
+              <tr v-for="item in equipment" :key="item.assetid">
+                <td>{{ item.assetnumber }}</td>
+                <td>{{ item.name || '-' }}</td>
+                <td class="mono">{{ item.serialnumber || '-' }}</td>
+                <td>{{ item.equipment?.equipmenttype_name || '-' }}</td>
                 <td>
-                  <span class="badge" :class="getStatusClass(machine.status)">
-                    {{ machine.status || 'Unknown' }}
+                  <span class="badge" :class="getStatusClass(item.status_name)">
+                    {{ item.status_name || 'Unknown' }}
                   </span>
                 </td>
-                <td>{{ machine.location || '-' }}</td>
+                <td>{{ item.location_name || '-' }}</td>
                 <td class="actions">
                   <router-link
-                    :to="`/machines/${machine.machineid}`"
+                    :to="`/machines/${item.equipment?.equipmentid || item.assetid}`"
                     class="btn btn-secondary btn-sm"
                   >
                     View
                   </router-link>
                 </td>
               </tr>
-              <tr v-if="machines.length === 0">
+              <tr v-if="equipment.length === 0">
                 <td colspan="7" style="text-align: center; color: var(--text-light);">
                   No equipment found
                 </td>
@@ -82,9 +82,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { machinesApi } from '../../api'
+import { equipmentApi } from '../../api'
 
-const machines = ref([])
+const equipment = ref([])
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
@@ -93,21 +93,20 @@ const totalPages = ref(1)
 let searchTimeout = null
 
 onMounted(() => {
-  loadMachines()
+  loadEquipment()
 })
 
-async function loadMachines() {
+async function loadEquipment() {
   loading.value = true
   try {
     const params = {
       page: page.value,
-      perpage: 20,
-      category: 'Equipment'
+      per_page: 20
     }
     if (search.value) params.search = search.value
 
-    const response = await machinesApi.list(params)
-    machines.value = response.data.data || []
+    const response = await equipmentApi.list(params)
+    equipment.value = response.data.data || []
     totalPages.value = response.data.meta?.pagination?.total_pages || 1
   } catch (error) {
     console.error('Error loading equipment:', error)
@@ -120,13 +119,13 @@ function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
     page.value = 1
-    loadMachines()
+    loadEquipment()
   }, 300)
 }
 
 function goToPage(p) {
   page.value = p
-  loadMachines()
+  loadEquipment()
 }
 
 function getStatusClass(status) {
@@ -138,3 +137,9 @@ function getStatusClass(status) {
   return 'badge-info'
 }
 </script>
+
+<style scoped>
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+</style>

frontend/src/views/pcs/PCDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="detail-page">
     <div class="page-header">
-      <h2>PC Details</h2>
+      <h2>Computer Details</h2>
       <div class="header-actions">
         <router-link :to="`/pcs/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
         <router-link to="/pcs" class="btn btn-secondary">Back to List</router-link>
@@ -10,39 +10,32 @@
 
     <div v-if="loading" class="loading">Loading...</div>
 
-    <template v-else-if="pc">
+    <template v-else-if="computer">
       <!-- Hero Section -->
       <div class="hero-card">
-        <div class="hero-image" v-if="pc.model?.imageurl">
-          <img :src="pc.model.imageurl" :alt="pc.model?.modelnumber" />
-        </div>
         <div class="hero-content">
           <div class="hero-title">
-            <h1>{{ pc.machinenumber }}</h1>
-            <span v-if="pc.alias" class="hero-alias">{{ pc.alias }}</span>
+            <h1>{{ computer.assetnumber }}</h1>
+            <span v-if="computer.computer?.hostname" class="hero-alias">{{ computer.computer.hostname }}</span>
           </div>
           <div class="hero-meta">
-            <span class="badge badge-lg badge-info">PC</span>
-            <span class="badge badge-lg" :class="getStatusClass(pc.status?.status)">
-              {{ pc.status?.status || 'Unknown' }}
+            <span class="badge badge-lg badge-info">Computer</span>
+            <span class="badge badge-lg" :class="getStatusClass(computer.status_name)">
+              {{ computer.status_name || 'Unknown' }}
             </span>
           </div>
           <div class="hero-details">
-            <div class="hero-detail" v-if="pc.pctype">
-              <span class="hero-detail-label">PC Type</span>
-              <span class="hero-detail-value">{{ pc.pctype.pctype || pc.pctype }}</span>
+            <div class="hero-detail" v-if="computer.computer?.computertype_name">
+              <span class="hero-detail-label">Type</span>
+              <span class="hero-detail-value">{{ computer.computer.computertype_name }}</span>
             </div>
-            <div class="hero-detail" v-if="pc.vendor?.vendor">
-              <span class="hero-detail-label">Vendor</span>
-              <span class="hero-detail-value">{{ pc.vendor.vendor }}</span>
+            <div class="hero-detail" v-if="computer.computer?.os_name">
+              <span class="hero-detail-label">OS</span>
+              <span class="hero-detail-value">{{ computer.computer.os_name }}</span>
             </div>
-            <div class="hero-detail" v-if="pc.model?.modelnumber">
-              <span class="hero-detail-label">Model</span>
-              <span class="hero-detail-value">{{ pc.model.modelnumber }}</span>
-            </div>
-            <div class="hero-detail" v-if="ipAddress">
-              <span class="hero-detail-label">IP Address</span>
-              <span class="hero-detail-value mono">{{ ipAddress }}</span>
+            <div class="hero-detail" v-if="computer.location_name">
+              <span class="hero-detail-label">Location</span>
+              <span class="hero-detail-value">{{ computer.location_name }}</span>
             </div>
           </div>
         </div>
@@ -57,20 +50,20 @@
             <h3 class="section-title">Identity</h3>
             <div class="info-list">
               <div class="info-row">
-                <span class="info-label">Machine Number</span>
-                <span class="info-value">{{ pc.machinenumber }}</span>
+                <span class="info-label">Asset Number</span>
+                <span class="info-value">{{ computer.assetnumber }}</span>
               </div>
-              <div class="info-row" v-if="pc.alias">
-                <span class="info-label">Alias</span>
-                <span class="info-value">{{ pc.alias }}</span>
+              <div class="info-row" v-if="computer.name">
+                <span class="info-label">Name</span>
+                <span class="info-value">{{ computer.name }}</span>
               </div>
-              <div class="info-row" v-if="pc.hostname">
+              <div class="info-row" v-if="computer.computer?.hostname">
                 <span class="info-label">Hostname</span>
-                <span class="info-value mono">{{ pc.hostname }}</span>
+                <span class="info-value mono">{{ computer.computer.hostname }}</span>
               </div>
-              <div class="info-row" v-if="pc.serialnumber">
+              <div class="info-row" v-if="computer.serialnumber">
                 <span class="info-label">Serial Number</span>
-                <span class="info-value mono">{{ pc.serialnumber }}</span>
+                <span class="info-value mono">{{ computer.serialnumber }}</span>
               </div>
             </div>
           </div>
@@ -79,21 +72,13 @@
           <div class="section-card">
             <h3 class="section-title">Hardware</h3>
             <div class="info-list">
-              <div class="info-row" v-if="pc.pctype">
-                <span class="info-label">PC Type</span>
-                <span class="info-value">{{ pc.pctype.pctype || pc.pctype }}</span>
+              <div class="info-row">
+                <span class="info-label">Computer Type</span>
+                <span class="info-value">{{ computer.computer?.computertype_name || '-' }}</span>
               </div>
               <div class="info-row">
-                <span class="info-label">Vendor</span>
-                <span class="info-value">{{ pc.vendor?.vendor || '-' }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">Model</span>
-                <span class="info-value">{{ pc.model?.modelnumber || '-' }}</span>
-              </div>
-              <div class="info-row" v-if="pc.operatingsystem">
                 <span class="info-label">Operating System</span>
-                <span class="info-value">{{ pc.operatingsystem.osname }}</span>
+                <span class="info-value">{{ computer.computer?.os_name || '-' }}</span>
               </div>
             </div>
           </div>
@@ -102,18 +87,26 @@
           <div class="section-card">
             <h3 class="section-title">Status</h3>
             <div class="info-list">
-              <div class="info-row" v-if="pc.loggedinuser">
+              <div class="info-row" v-if="computer.computer?.loggedinuser">
                 <span class="info-label">Logged In User</span>
-                <span class="info-value">{{ pc.loggedinuser }}</span>
+                <span class="info-value">{{ computer.computer.loggedinuser }}</span>
               </div>
               <div class="info-row">
                 <span class="info-label">Features</span>
                 <span class="info-value">
-                  <span class="feature-tag" :class="{ active: pc.isvnc }">VNC</span>
-                  <span class="feature-tag" :class="{ active: pc.iswinrm }">WinRM</span>
-                  <span class="feature-tag" :class="{ active: pc.isshopfloor }">Shopfloor</span>
+                  <span class="feature-tag" :class="{ active: computer.computer?.isvnc }">VNC</span>
+                  <span class="feature-tag" :class="{ active: computer.computer?.iswinrm }">WinRM</span>
+                  <span class="feature-tag" :class="{ active: computer.computer?.isshopfloor }">Shopfloor</span>
                 </span>
               </div>
+              <div class="info-row" v-if="computer.computer?.lastreporteddate">
+                <span class="info-label">Last Reported</span>
+                <span class="info-value">{{ formatDate(computer.computer.lastreporteddate) }}</span>
+              </div>
+              <div class="info-row" v-if="computer.computer?.lastboottime">
+                <span class="info-label">Last Boot</span>
+                <span class="info-value">{{ formatDate(computer.computer.lastboottime) }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -128,36 +121,40 @@
                 <span class="info-label">Location</span>
                 <span class="info-value">
                   <LocationMapTooltip
-                    v-if="pc.mapleft != null && pc.maptop != null"
-                    :left="pc.mapleft"
-                    :top="pc.maptop"
-                    :machineName="pc.machinenumber"
+                    v-if="computer.mapleft != null && computer.maptop != null"
+                    :left="computer.mapleft"
+                    :top="computer.maptop"
+                    :machineName="computer.assetnumber"
                   >
-                    <span class="location-link">{{ pc.location?.location || 'On Map' }}</span>
+                    <span class="location-link">{{ computer.location_name || 'On Map' }}</span>
                   </LocationMapTooltip>
-                  <span v-else>{{ pc.location?.location || '-' }}</span>
+                  <span v-else>{{ computer.location_name || '-' }}</span>
                 </span>
               </div>
+              <div class="info-row">
+                <span class="info-label">Business Unit</span>
+                <span class="info-value">{{ computer.businessunit_name || '-' }}</span>
+              </div>
             </div>
           </div>
 
           <!-- Controlled Equipment -->
-          <div class="section-card" v-if="controlledMachines.length > 0">
+          <div class="section-card" v-if="controlledEquipment.length > 0">
             <h3 class="section-title">Controlled Equipment</h3>
             <div class="equipment-list">
               <router-link
-                v-for="rel in controlledMachines"
-                :key="rel.relationshipid"
-                :to="getRelatedRoute(rel)"
+                v-for="item in controlledEquipment"
+                :key="item.relationshipid"
+                :to="`/machines/${item.plugin_id || item.assetid}`"
                 class="equipment-item"
               >
                 <div class="equipment-info">
-                  <span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
-                  <span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
+                  <span class="equipment-name">{{ item.assetnumber }}</span>
+                  <span class="equipment-alias" v-if="item.name">{{ item.name }}</span>
                 </div>
                 <div class="equipment-meta">
-                  <span class="category-tag">{{ rel.relatedcategory }}</span>
-                  <span class="connection-tag">{{ rel.relationshiptype }}</span>
+                  <span class="category-tag">{{ item.assettype_name }}</span>
+                  <span class="connection-tag">{{ item.relationshipType }}</span>
                 </div>
               </router-link>
             </div>
@@ -184,43 +181,23 @@
             </div>
           </div>
 
-          <!-- Network -->
-          <div class="section-card" v-if="pc.communications?.length">
-            <h3 class="section-title">Network Interfaces</h3>
-            <div class="network-list">
-              <div v-for="comm in pc.communications" :key="comm.communicationid" class="network-item">
-                <div class="network-primary">
-                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
-                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
-                </div>
-                <div class="network-secondary" v-if="comm.macaddress">
-                  <span class="mac-address">{{ comm.macaddress }}</span>
-                </div>
-                <div class="network-details" v-if="comm.subnetmask || comm.defaultgateway">
-                  <span v-if="comm.subnetmask">Subnet: {{ comm.subnetmask }}</span>
-                  <span v-if="comm.defaultgateway">Gateway: {{ comm.defaultgateway }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
           <!-- Notes -->
-          <div class="section-card" v-if="pc.notes">
+          <div class="section-card" v-if="computer.notes">
             <h3 class="section-title">Notes</h3>
-            <p class="notes-text">{{ pc.notes }}</p>
+            <p class="notes-text">{{ computer.notes }}</p>
           </div>
         </div>
       </div>
 
       <!-- Audit Footer -->
       <div class="audit-footer">
-        <span>Created {{ formatDate(pc.createddate) }}<template v-if="pc.createdby"> by {{ pc.createdby }}</template></span>
-        <span>Modified {{ formatDate(pc.modifieddate) }}<template v-if="pc.modifiedby"> by {{ pc.modifiedby }}</template></span>
+        <span>Created {{ formatDate(computer.createddate) }}<template v-if="computer.createdby"> by {{ computer.createdby }}</template></span>
+        <span>Modified {{ formatDate(computer.modifieddate) }}<template v-if="computer.modifiedby"> by {{ computer.modifiedby }}</template></span>
       </div>
     </template>
 
     <div v-else class="card">
-      <p style="text-align: center; color: var(--text-light);">PC not found</p>
+      <p style="text-align: center; color: var(--text-light);">Computer not found</p>
     </div>
   </div>
 </template>
@@ -228,60 +205,74 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { machinesApi, applicationsApi } from '../../api'
+import { computersApi, applicationsApi, assetsApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 
 const route = useRoute()
 
 const loading = ref(true)
-const pc = ref(null)
-const relationships = ref([])
+const computer = ref(null)
+const relationships = ref({ incoming: [], outgoing: [] })
 const installedApps = ref([])
 
-const ipAddress = computed(() => {
-  if (!pc.value?.communications) return null
-  const primaryComm = pc.value.communications.find(c => c.isprimary) || pc.value.communications[0]
-  return primaryComm?.ipaddress || primaryComm?.address || null
-})
+const controlledEquipment = computed(() => {
+  // For computers, find related equipment in any "Controls" relationship
+  const items = []
 
-const controlledMachines = computed(() => {
-  return relationships.value.filter(r => r.direction === 'controls')
+  // Check outgoing - computer controls equipment
+  for (const rel of relationships.value.outgoing || []) {
+    if (rel.target_asset?.assettype_name === 'equipment' && rel.relationship_type_name === 'Controls') {
+      items.push({
+        ...rel.target_asset,
+        relationshipid: rel.relationshipid,
+        relationshipType: rel.relationship_type_name
+      })
+    }
+  }
+
+  // Also check incoming - legacy data may have equipment -> computer Controls relationships
+  for (const rel of relationships.value.incoming || []) {
+    if (rel.source_asset?.assettype_name === 'equipment' && rel.relationship_type_name === 'Controls') {
+      items.push({
+        ...rel.source_asset,
+        relationshipid: rel.relationshipid,
+        relationshipType: rel.relationship_type_name
+      })
+    }
+  }
+
+  return items
 })
 
 onMounted(async () => {
   try {
-    const response = await machinesApi.get(route.params.id)
-    pc.value = response.data.data
+    const response = await computersApi.get(route.params.id)
+    computer.value = response.data.data
 
-    const relResponse = await machinesApi.getRelationships(route.params.id)
-    relationships.value = relResponse.data.data || []
+    // Load relationships using asset ID
+    if (computer.value?.assetid) {
+      try {
+        const relResponse = await assetsApi.getRelationships(computer.value.assetid)
+        relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
+      } catch (e) {
+        console.log('Relationships not available')
+      }
+    }
 
     // Load installed applications
     try {
       const appsResponse = await applicationsApi.getMachineApps(route.params.id)
       installedApps.value = appsResponse.data.data || []
     } catch (appError) {
-      // Silently handle if no apps table yet
       console.log('No installed apps data:', appError.message)
     }
   } catch (error) {
-    console.error('Error loading PC:', error)
+    console.error('Error loading computer:', error)
   } finally {
     loading.value = false
   }
 })
 
-function getRelatedRoute(rel) {
-  const category = rel.relatedcategory?.toLowerCase() || ''
-  const routeMap = {
-    'equipment': '/machines',
-    'pc': '/pcs',
-    'printer': '/printers'
-  }
-  const basePath = routeMap[category] || '/machines'
-  return `${basePath}/${rel.relatedmachineid}`
-}
-
 function getStatusClass(status) {
   if (!status) return 'badge-info'
   const s = status.toLowerCase()

frontend/src/views/pcs/PCsList.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="page-header">
-      <h2>PCs</h2>
-      <router-link to="/pcs/new" class="btn btn-primary">Add PC</router-link>
+      <h2>Computers</h2>
+      <router-link to="/pcs/new" class="btn btn-primary">Add Computer</router-link>
     </div>
 
     <!-- Filters -->
@@ -11,7 +11,7 @@
         v-model="search"
         type="text"
         class="form-control"
-        placeholder="Search PCs..."
+        placeholder="Search computers..."
         @input="debouncedSearch"
       />
     </div>
@@ -24,41 +24,43 @@
           <table>
             <thead>
               <tr>
-                <th>Machine #</th>
+                <th>Asset #</th>
+                <th>Hostname</th>
                 <th>Serial Number</th>
-                <th>PC Type</th>
+                <th>Type</th>
                 <th>Features</th>
                 <th>Status</th>
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="pc in pcs" :key="pc.machineid">
-                <td>{{ pc.machinenumber }}</td>
-                <td class="mono">{{ pc.serialnumber || '-' }}</td>
-                <td>{{ pc.pctype || '-' }}</td>
+              <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?.computertype_name || '-' }}</td>
                 <td class="features">
-                  <span v-if="pc.isvnc" class="feature-tag active">VNC</span>
-                  <span v-if="pc.iswinrm" class="feature-tag active">WinRM</span>
-                  <span v-if="!pc.isvnc && !pc.iswinrm">-</span>
+                  <span v-if="item.computer?.isvnc" class="feature-tag active">VNC</span>
+                  <span v-if="item.computer?.iswinrm" class="feature-tag active">WinRM</span>
+                  <span v-if="!item.computer?.isvnc && !item.computer?.iswinrm">-</span>
                 </td>
                 <td>
-                  <span class="badge" :class="getStatusClass(pc.status)">
-                    {{ pc.status || 'Unknown' }}
+                  <span class="badge" :class="getStatusClass(item.status_name)">
+                    {{ item.status_name || 'Unknown' }}
                   </span>
                 </td>
                 <td class="actions">
                   <router-link
-                    :to="`/pcs/${pc.machineid}`"
+                    :to="`/pcs/${item.computer?.computerid || item.assetid}`"
                     class="btn btn-secondary btn-sm"
                   >
                     View
                   </router-link>
                 </td>
               </tr>
-              <tr v-if="pcs.length === 0">
-                <td colspan="6" style="text-align: center; color: var(--text-light);">
-                  No PCs found
+              <tr v-if="computers.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No computers found
                 </td>
               </tr>
             </tbody>
@@ -83,9 +85,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { machinesApi } from '../../api'
+import { computersApi } from '../../api'
 
-const pcs = ref([])
+const computers = ref([])
 const loading = ref(true)
 const search = ref('')
 const page = ref(1)
@@ -94,24 +96,23 @@ const totalPages = ref(1)
 let searchTimeout = null
 
 onMounted(() => {
-  loadPCs()
+  loadComputers()
 })
 
-async function loadPCs() {
+async function loadComputers() {
   loading.value = true
   try {
     const params = {
       page: page.value,
-      perpage: 20,
-      category: 'PC'
+      per_page: 20
     }
     if (search.value) params.search = search.value
 
-    const response = await machinesApi.list(params)
-    pcs.value = response.data.data || []
+    const response = await computersApi.list(params)
+    computers.value = response.data.data || []
     totalPages.value = response.data.meta?.pagination?.total_pages || 1
   } catch (error) {
-    console.error('Error loading PCs:', error)
+    console.error('Error loading computers:', error)
   } finally {
     loading.value = false
   }
@@ -121,13 +122,13 @@ function debouncedSearch() {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
     page.value = 1
-    loadPCs()
+    loadComputers()
   }, 300)
 }
 
 function goToPage(p) {
   page.value = p
-  loadPCs()
+  loadComputers()
 }
 
 function getStatusClass(status) {