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/pcs/PCsList.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>PCs</h2>
+      <router-link to="/pcs/new" class="btn btn-primary">Add PC</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search PCs..."
+        @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>Serial Number</th>
+                <th>PC 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>
+                <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>
+                </td>
+                <td>
+                  <span class="badge" :class="getStatusClass(pc.status)">
+                    {{ pc.status || 'Unknown' }}
+                  </span>
+                </td>
+                <td class="actions">
+                  <router-link
+                    :to="`/pcs/${pc.machineid}`"
+                    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
+                </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 pcs = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadPCs()
+})
+
+async function loadPCs() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20,
+      category: 'PC'
+    }
+    if (search.value) params.search = search.value
+
+    const response = await machinesApi.list(params)
+    pcs.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading PCs:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadPCs()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadPCs()
+}
+
+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>
+
+<style scoped>
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.features {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.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>