Initial commit: Shop Database Flask Application

Flask backend with Vue 3 frontend for shop floor machine management.
Includes database schema export for MySQL shopdb_flask database.

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

frontend/src/views/machines/MachineDetail.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="detail-page">
+    <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">
+          Edit
+        </router-link>
+        <router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="machine">
+      <!-- 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>
+          </div>
+          <div class="hero-meta">
+            <span class="badge badge-lg" :class="getCategoryClass(machine.machinetype?.category)">
+              {{ machine.machinetype?.category || 'Unknown' }}
+            </span>
+            <span class="badge badge-lg" :class="getStatusClass(machine.status?.status)">
+              {{ machine.status?.status || 'Unknown' }}
+            </span>
+          </div>
+          <div class="hero-details">
+            <div class="hero-detail" v-if="machine.machinetype?.machinetype">
+              <span class="hero-detail-label">Type</span>
+              <span class="hero-detail-value">{{ machine.machinetype.machinetype }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.vendor?.vendor">
+              <span class="hero-detail-label">Vendor</span>
+              <span class="hero-detail-value">{{ machine.vendor.vendor }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.model?.modelnumber">
+              <span class="hero-detail-label">Model</span>
+              <span class="hero-detail-value">{{ machine.model.modelnumber }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.location?.location">
+              <span class="hero-detail-label">Location</span>
+              <span class="hero-detail-value">{{ machine.location.location }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div class="content-grid">
+        <!-- Left Column -->
+        <div class="content-column">
+          <!-- Identity Section -->
+          <div class="section-card">
+            <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>
+              </div>
+              <div class="info-row" v-if="machine.alias">
+                <span class="info-label">Alias</span>
+                <span class="info-value">{{ machine.alias }}</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">
+                <span class="info-label">Serial Number</span>
+                <span class="info-value mono">{{ machine.serialnumber }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hardware Section -->
+          <div class="section-card">
+            <h3 class="section-title">Hardware</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Type</span>
+                <span class="info-value">{{ machine.machinetype?.machinetype || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Vendor</span>
+                <span class="info-value">{{ machine.vendor?.vendor || '-' }}</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>
+              </div>
+            </div>
+          </div>
+
+          <!-- PC Information (if PC) -->
+          <div class="section-card" v-if="isPc">
+            <h3 class="section-title">PC Status</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>
+              <div class="info-row">
+                <span class="info-label">Last Reported</span>
+                <span class="info-value">{{ formatDate(machine.lastreporteddate) }}</span>
+              </div>
+              <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-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>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="content-column">
+          <!-- Location & Organization -->
+          <div class="section-card">
+            <h3 class="section-title">Location & Organization</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <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"
+                  >
+                    <span class="location-link">{{ machine.location?.location || 'On Map' }}</span>
+                  </LocationMapTooltip>
+                  <span v-else>{{ machine.location?.location || '-' }}</span>
+                </span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Business Unit</span>
+                <span class="info-value">{{ machine.businessunit?.businessunit || '-' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Connected PC (for Equipment) -->
+          <div class="section-card" v-if="isEquipment">
+            <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">
+                <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.relatedmachinenumber }}</span>
+                  <span class="device-alias" v-if="controllingPc.relatedmachinealias">{{ controllingPc.relatedmachinealias }}</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>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div class="section-card" v-if="machine.notes">
+            <h3 class="section-title">Notes</h3>
+            <p class="notes-text">{{ machine.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>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">Machine not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { machinesApi } 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 controllingPc = computed(() => {
+  return relationships.value.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
+})
+
+const controlledMachines = computed(() => {
+  return relationships.value.filter(r => r.direction === 'controls')
+})
+
+onMounted(async () => {
+  try {
+    const response = await machinesApi.get(route.params.id)
+    machine.value = response.data.data
+
+    const relResponse = await machinesApi.getRelationships(route.params.id)
+    relationships.value = relResponse.data.data || []
+  } catch (error) {
+    console.error('Error loading machine:', 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()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair' || s === 'spare') return 'badge-warning'
+  if (s === 'retired' || s === 'disposed') return 'badge-danger'
+  return 'badge-info'
+}
+
+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 -->

frontend/src/views/machines/MachineForm.vue

@@ -0,0 +1,523 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Equipment' : 'New Equipment' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveMachine">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">Machine Number *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </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
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              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>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.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>
+          </div>
+
+          <div class="form-group">
+            <label for="modelnumberid">Model</label>
+            <select
+              id="modelnumberid"
+              v-model="form.modelnumberid"
+              class="form-control"
+            >
+              <option value="">Select model...</option>
+              <option
+                v-for="m in filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small class="form-help">Selecting a model will auto-set the equipment type</small>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="locationid">Location</label>
+            <select
+              id="locationid"
+              v-model="form.locationid"
+              class="form-control"
+            >
+              <option value="">Select location...</option>
+              <option
+                v-for="l in locations"
+                :key="l.locationid"
+                :value="l.locationid"
+              >
+                {{ l.location }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="businessunitid">Business Unit</label>
+            <select
+              id="businessunitid"
+              v-model="form.businessunitid"
+              class="form-control"
+            >
+              <option value="">Select business unit...</option>
+              <option
+                v-for="bu in businessunits"
+                :key="bu.businessunitid"
+                :value="bu.businessunitid"
+              >
+                {{ bu.businessunit }}
+              </option>
+            </select>
+          </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>
+          <div class="map-location-control">
+            <div v-if="form.mapleft !== null && form.maptop !== null" class="current-position">
+              Position: {{ form.mapleft }}, {{ form.maptop }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapleft !== null ? { left: form.mapleft, top: form.maptop } : null"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Equipment' }}
+          </button>
+          <router-link to="/machines" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<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 ShopFloorMap from '../../components/ShopFloorMap.vue'
+import Modal from '../../components/Modal.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  machinetypeid: '',
+  modelnumberid: '',
+  statusid: '',
+  vendorid: '',
+  locationid: '',
+  businessunitid: '',
+  notes: '',
+  mapleft: null,
+  maptop: null
+})
+
+const machineTypes = ref([])
+const statuses = ref([])
+const vendors = ref([])
+const locations = ref([])
+const models = ref([])
+const businessunits = ref([])
+const pcs = ref([])
+const relationshipTypes = ref([])
+const controllingPcId = ref(null)
+const relationshipTypeId = ref(null)
+const existingRelationshipId = ref(null)
+
+// Filter models by selected 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
+  })
+})
+
+// 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
+    }
+  }
+})
+
+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()
+    ])
+
+    machineTypes.value = mtRes.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 || []
+
+    // Set default relationship type to "Controls" if available
+    const controlsType = relationshipTypes.value.find(t => t.relationshiptype === 'Controls')
+    if (controlsType) {
+      relationshipTypeId.value = controlsType.relationshiptypeid
+    }
+
+    // Load machine if editing
+    if (isEdit.value) {
+      const response = await machinesApi.get(route.params.id)
+      const machine = response.data.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
+      }
+
+      // 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
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapleft = tempMapPosition.value.left
+    form.value.maptop = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapleft = null
+  form.value.maptop = null
+  tempMapPosition.value = null
+}
+
+async function saveMachine() {
+  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,
+      vendorid: form.value.vendorid || null,
+      locationid: form.value.locationid || null,
+      businessunitid: form.value.businessunitid || null,
+      mapleft: form.value.mapleft,
+      maptop: form.value.maptop
+    }
+
+    let machineId = route.params.id
+
+    if (isEdit.value) {
+      await machinesApi.update(route.params.id, data)
+    } else {
+      const response = await machinesApi.create(data)
+      machineId = response.data.data.machineid
+    }
+
+    // Handle relationship (controlling PC)
+    await saveRelationship(machineId)
+
+    router.push('/machines')
+  } catch (err) {
+    console.error('Error saving machine:', err)
+    error.value = err.response?.data?.message || 'Failed to save machine'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function saveRelationship(machineId) {
+  // If no PC selected and no existing relationship, nothing to do
+  if (!controllingPcId.value && !existingRelationshipId.value) {
+    return
+  }
+
+  // If clearing the relationship
+  if (!controllingPcId.value && existingRelationshipId.value) {
+    await machinesApi.deleteRelationship(existingRelationshipId.value)
+    return
+  }
+
+  // If PC is selected
+  if (controllingPcId.value) {
+    // If there's an existing relationship, delete it first
+    if (existingRelationshipId.value) {
+      await machinesApi.deleteRelationship(existingRelationshipId.value)
+    }
+
+    // Create new relationship
+    await machinesApi.createRelationship(machineId, {
+      relatedmachineid: controllingPcId.value,
+      relationshiptypeid: relationshipTypeId.value,
+      direction: 'controlled_by'
+    })
+  }
+}
+</script>
+
+<style scoped>
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #e3f2fd;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-help {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light);
+}
+</style>

frontend/src/views/machines/MachinesList.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Equipment</h2>
+      <router-link to="/machines/new" class="btn btn-primary">Add Equipment</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search equipment..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine #</th>
+                <th>Alias</th>
+                <th>Hostname</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Location</th>
+                <th>Actions</th>
+              </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>
+                <td>
+                  <span class="badge" :class="getStatusClass(machine.status)">
+                    {{ machine.status || 'Unknown' }}
+                  </span>
+                </td>
+                <td>{{ machine.location || '-' }}</td>
+                <td class="actions">
+                  <router-link
+                    :to="`/machines/${machine.machineid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="machines.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No equipment found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { machinesApi } from '../../api'
+
+const machines = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadMachines()
+})
+
+async function loadMachines() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20,
+      category: 'Equipment'
+    }
+    if (search.value) params.search = search.value
+
+    const response = await machinesApi.list(params)
+    machines.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading equipment:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadMachines()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadMachines()
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+</script>