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/settings/BusinessUnitsList.vue

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Business Units</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Business Unit</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Business Unit</th>
+                <th>Code</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="bu in items" :key="bu.businessunitid">
+                <td>{{ bu.businessunit }}</td>
+                <td>{{ bu.code || '-' }}</td>
+                <td>{{ bu.description || '-' }}</td>
+                <td class="actions">
+                  <button class="btn btn-secondary btn-sm" @click="openModal(bu)">Edit</button>
+                  <button class="btn btn-danger btn-sm" @click="confirmDelete(bu)">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="items.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No business units found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <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>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editing ? 'Edit Business Unit' : 'Add Business Unit' }}</h3>
+        </div>
+        <form @submit.prevent="save">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="businessunit">Business Unit Name *</label>
+              <input id="businessunit" v-model="form.businessunit" type="text" class="form-control" required />
+            </div>
+            <div class="form-group">
+              <label for="code">Code</label>
+              <input id="code" v-model="form.code" type="text" class="form-control" placeholder="e.g., ENGR, MFG" />
+            </div>
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea id="description" v-model="form.description" class="form-control" rows="3"></textarea>
+            </div>
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header"><h3>Delete Business Unit</h3></div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ toDelete?.businessunit }}</strong>?</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteItem">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { businessunitsApi } from '../../api'
+
+const items = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editing = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const toDelete = ref(null)
+
+const form = ref({ businessunit: '', code: '', description: '' })
+
+onMounted(() => loadData())
+
+async function loadData() {
+  loading.value = true
+  try {
+    const response = await businessunitsApi.list({ page: page.value, perpage: 20 })
+    items.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading business units:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) { page.value = p; loadData() }
+
+function openModal(item = null) {
+  editing.value = item
+  form.value = item ? {
+    businessunit: item.businessunit || '',
+    code: item.code || '',
+    description: item.description || ''
+  } : { businessunit: '', code: '', description: '' }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() { showModal.value = false; editing.value = null }
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    if (editing.value) {
+      await businessunitsApi.update(editing.value.businessunitid, form.value)
+    } else {
+      await businessunitsApi.create(form.value)
+    }
+    closeModal()
+    loadData()
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to save'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(item) { toDelete.value = item; showDeleteModal.value = true }
+
+async function deleteItem() {
+  try {
+    await businessunitsApi.delete(toDelete.value.businessunitid)
+    showDeleteModal.value = false
+    toDelete.value = null
+    loadData()
+  } catch (err) {
+    alert('Failed to delete')
+  }
+}
+</script>