From 02d89831953c250a643e2ae3043d830eddd17c3a Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Sat, 11 Jul 2026 19:16:03 -0400
Subject: [PATCH] Consolidate asset relationships onto the shared card

The curated Controlled Machines (PC detail) and Connected PC (machine
detail) cards duplicated what the generic relationships card already
shows with type badges and inline add/remove - and hid every
non-controls relationship type. Removed the curated cards and their
plumbing (~105 lines of orphaned CSS included); the MachineForm
controlling-PC picker stays as the write path. Also theme-variable
fixes on the shared card styling.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/assets/style.css                 | 91 +------------------
 frontend/src/views/machines/MachineDetail.vue | 71 +--------------
 frontend/src/views/pcs/PCDetail.vue           | 86 +-----------------
 3 files changed, 7 insertions(+), 241 deletions(-)

diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index 906345e..94c4917 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1137,26 +1137,7 @@ td.actions {
   font-style: italic;
 }
 
-/* Connected Device */
-.connected-device {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.device-link {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  text-decoration: none;
-  color: inherit;
-}
-
-.device-link:hover .device-name {
-  color: var(--info);
-}
-
+/* Device icon (network detail) */
 .device-icon {
   width: 44px;
   height: 44px;
@@ -1173,76 +1154,6 @@ td.actions {
   height: 24px;
 }
 
-.device-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.device-name {
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.device-alias {
-  font-size: 13px;
-  color: var(--text-light);
-}
-
-.connection-type {
-  padding: 0.25rem 0.5rem;
-  font-size: 11px;
-  background: rgba(4, 185, 98, 0.2);
-  color: var(--success);
-  border-radius: 0.25rem;
-}
-
-/* Equipment List */
-.equipment-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.equipment-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.15s;
-}
-
-.equipment-item:hover {
-  border-color: var(--primary);
-}
-
-.equipment-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.equipment-name {
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.equipment-alias {
-  font-size: 13px;
-  color: var(--text-light);
-}
-
-.connection-tag {
-  padding: 0.2rem 0.5rem;
-  font-size: 11px;
-  background: rgba(4, 185, 98, 0.2);
-  color: var(--success);
-  border-radius: 0.25rem;
-}
-
 /* Network */
 .network-list {
   display: flex;
diff --git a/frontend/src/views/machines/MachineDetail.vue b/frontend/src/views/machines/MachineDetail.vue
index 48b8908..3511c1b 100644
--- a/frontend/src/views/machines/MachineDetail.vue
+++ b/frontend/src/views/machines/MachineDetail.vue
@@ -183,30 +183,6 @@
             </div>
           </div>
 
-          <!-- 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="`/pcs/${controllingPc.pluginid || 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>
-                    <line x1="8" y1="21" x2="16" y2="21"></line>
-                    <line x1="12" y1="17" x2="12" y2="21"></line>
-                  </svg>
-                </div>
-                <div class="device-info">
-                  <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>
-
           <!-- Custom Fields -->
           <CustomFieldsSection :assetid="machine.assetid" />
 
@@ -238,9 +214,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { machinesApi, assetsApi } from '../../api'
+import { machinesApi } from '../../api'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
 import WarrantyPanel from '../../components/WarrantyPanel.vue'
@@ -254,54 +230,13 @@ const { isEnabled } = useIdentifierFlags()
 const loading = ref(true)
 const machine = ref(null)
 const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => machine.value?.assetid)
-const relationships = ref({ incoming: [], outgoing: [] })
 
-// type name is data, sites may seed 'controls' or 'Controls' - compare folded
-function isControls(rel) {
-  return (rel.relationshiptypename || '').toLowerCase() === 'controls'
-}
-
-const controllingPc = computed(() => {
-  // For a machine, find a related computer in any "Controls" relationship
-  // Check both incoming (computer controls this) and outgoing (legacy data may have machine -> computer)
-
-  // First check incoming - computer as source controlling this machine
-  for (const rel of relationships.value.incoming || []) {
-    if (rel.sourceasset?.assettypename === 'computer' && isControls(rel)) {
-      return {
-        ...rel.sourceasset,
-        relationshipType: rel.relationshiptypename
-      }
-    }
-  }
-
-  // Also check outgoing - legacy data may have machine -> computer Controls relationships
-  for (const rel of relationships.value.outgoing || []) {
-    if (rel.targetasset?.assettypename === 'computer' && isControls(rel)) {
-      return {
-        ...rel.targetasset,
-        relationshipType: rel.relationshiptypename
-      }
-    }
-  }
-
-  return null
-})
+// relationships render via the shared AssetRelationships card
 
 onMounted(async () => {
   try {
     const response = await machinesApi.get(route.params.id)
     machine.value = response.data.data
-
-    // Load relationships using asset ID
-    if (machine.value?.assetid) {
-      try {
-        const relResponse = await assetsApi.getRelationships(machine.value.assetid)
-        relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
-      } catch (e) {
-        console.log('Relationships not available')
-      }
-    }
   } catch (error) {
     console.error('Error loading machine:', error)
   } finally {
diff --git a/frontend/src/views/pcs/PCDetail.vue b/frontend/src/views/pcs/PCDetail.vue
index 10070de..dd12212 100644
--- a/frontend/src/views/pcs/PCDetail.vue
+++ b/frontend/src/views/pcs/PCDetail.vue
@@ -180,28 +180,6 @@
             </div>
           </div>
 
-          <!-- Controlled Machines -->
-          <div class="section-card" v-if="controlledEquipment.length > 0">
-            <h3 class="section-title">Controlled Machines</h3>
-            <div class="equipment-list">
-              <router-link
-                v-for="item in controlledEquipment"
-                :key="item.relationshipid"
-                :to="`/machines/${item.pluginid || item.assetid}`"
-                class="equipment-item"
-              >
-                <div class="equipment-info">
-                  <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">{{ item.assettypename }}</span>
-                  <span class="connection-tag">{{ item.relationshipType }}</span>
-                </div>
-              </router-link>
-            </div>
-          </div>
-
           <!-- Installed Applications -->
           <div class="section-card" v-if="installedApps.length > 0">
             <h3 class="section-title">Installed Applications</h3>
@@ -254,10 +232,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { useRoute } from 'vue-router'
-import { computersApi, applicationsApi, assetsApi } from '../../api'
+import { computersApi, applicationsApi } from '../../api'
 import { useWarrantyBadge } from '../../composables/warrantyBadge'
 import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
 import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
@@ -270,61 +248,18 @@ const { isEnabled } = useIdentifierFlags()
 
 const loading = ref(true)
 const computer = ref(null)
-const relationships = ref({ incoming: [], outgoing: [] })
 const installedApps = ref([])
 
 // Warranty fetch + hero badge (shared across asset detail pages).
 const { warranties, heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
 
-// type name is data, sites may seed 'controls' or 'Controls' - compare folded
-function isControls(rel) {
-  return (rel.relationshiptypename || '').toLowerCase() === 'controls'
-}
-
-const controlledEquipment = computed(() => {
-  // For computers, find related equipment in any "Controls" relationship
-  const items = []
-
-  // Check outgoing - computer controls equipment
-  for (const rel of relationships.value.outgoing || []) {
-    if (rel.targetasset?.assettypename === 'machine' && isControls(rel)) {
-      items.push({
-        ...rel.targetasset,
-        relationshipid: rel.relationshipid,
-        relationshipType: rel.relationshiptypename
-      })
-    }
-  }
-
-  // Also check incoming - legacy data may have equipment -> computer Controls relationships
-  for (const rel of relationships.value.incoming || []) {
-    if (rel.sourceasset?.assettypename === 'machine' && isControls(rel)) {
-      items.push({
-        ...rel.sourceasset,
-        relationshipid: rel.relationshipid,
-        relationshipType: rel.relationshiptypename
-      })
-    }
-  }
-
-  return items
-})
+// relationships render via the shared AssetRelationships card
 
 onMounted(async () => {
   try {
     const response = await computersApi.get(route.params.id)
     computer.value = response.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)
@@ -434,21 +369,6 @@ function formatDate(dateStr) {
   color: var(--text-light);
 }
 
-/* Equipment meta */
-.equipment-meta {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.category-tag {
-  padding: 0.3rem 0.625rem;
-  font-size: 0.875rem;
-  background: var(--primary);
-  color: white;
-  border-radius: 5px;
-}
-
 /* Network details */
 .network-details {
   margin-top: 0.5rem;