printedparts stage 7: the kiosk - scan bin, scan badge, keypad, take

Two open endpoints: an item lookup by scanned code and the take POST -
the product's first unauthenticated write, held to the decision
record's bar (decrement-only, badge-attributed server-side, bounded,
physically rate-limited; justification in the plugin README). The
/parts-kiosk route is a full-screen no-auth view beside /shopfloor: a
hidden always-focused input consumes keyboard-wedge scans for
whichever step is active, TouchKeypad (net-new 3x4 grid) takes the
quantity, and a success screen resets after a few seconds. Manual
type-in fallbacks cover damaged labels. Kiosk test proves open access,
the over-take guard, the badge policy, and cache==ledger afterward.

frontend/src/api/index.js

@@ -1159,5 +1159,11 @@ export const printedpartsApi = {
   },
   adjust(printeditemid, data) {
     return api.post(`/printedparts/items/${printeditemid}/adjust`, data)
+  },
+  kioskItem(itemcode) {
+    return api.get(`/printedparts/kiosk/item/${encodeURIComponent(itemcode)}`)
+  },
+  kioskTake(data) {
+    return api.post('/printedparts/kiosk/take', data)
   }
 }

frontend/src/components/TouchKeypad.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="touch-keypad">
+    <button v-for="digit in digits" :key="digit" type="button"
+            class="keypad-button" @click="$emit('digit', digit)">
+      {{ digit }}
+    </button>
+    <button type="button" class="keypad-button keypad-muted"
+            @click="$emit('clear')">C</button>
+    <button type="button" class="keypad-button" @click="$emit('digit', '0')">0</button>
+    <button type="button" class="keypad-button keypad-muted"
+            @click="$emit('backspace')">&lt;</button>
+  </div>
+</template>
+
+<script setup>
+const digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+defineEmits(['digit', 'clear', 'backspace'])
+</script>
+
+<style scoped>
+.touch-keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.6rem;
+  max-width: 20rem;
+}
+.keypad-button {
+  font-size: 1.8rem;
+  padding: 1rem 0;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+}
+.keypad-button:active { background: var(--primary); color: #fff; }
+.keypad-muted { color: var(--text-light); }
+</style>

frontend/src/router/index.js

@@ -65,6 +65,14 @@ const routes = [
     name: 'shopfloor',
     component: () => import('../views/ShopfloorDashboard.vue')
   },
+  {
+    // Touch kiosk for taking 3D-printed parts: scan bin, scan badge, keypad.
+    // Open on purpose - see the decision record in the printedparts proposal.
+    path: '/parts-kiosk',
+    name: 'parts-kiosk',
+    component: () => import('../views/printedparts/PartsKiosk.vue'),
+    meta: { plugin: 'printedparts' }
+  },
   {
     path: '/tv',
     name: 'tv',

frontend/src/views/printedparts/PartsKiosk.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="parts-kiosk" @click="focusWedge">
+    <!-- keyboard-wedge scanners type the code + Enter into this hidden,
+         always-focused input; whichever step is active consumes the scan -->
+    <input ref="wedgeInput" v-model="wedgeBuffer" class="wedge-input"
+           autocomplete="off" @keydown.enter.prevent="onWedgeEnter" />
+
+    <header class="kiosk-header">
+      <h1>3D Printed Parts</h1>
+      <button v-if="step !== 'item'" class="btn btn-secondary" @click="reset">
+        Start over
+      </button>
+    </header>
+
+    <div v-if="error" class="kiosk-error">{{ error }}</div>
+
+    <!-- step 1: scan the bin -->
+    <section v-if="step === 'item'" class="kiosk-step">
+      <p class="kiosk-prompt">Scan the barcode on the bin</p>
+      <p class="kiosk-hint">
+        No scanner?
+        <a href="#" @click.prevent="manualEntry = !manualEntry">Type the code</a>
+      </p>
+      <div v-if="manualEntry" class="manual-row">
+        <input v-model="manualCode" class="form-control" placeholder="3DP-0001"
+               @keydown.enter="lookupItem(manualCode)" />
+        <button class="btn btn-primary" @click="lookupItem(manualCode)">Go</button>
+      </div>
+    </section>
+
+    <!-- step 2: badge -->
+    <section v-else-if="step === 'badge'" class="kiosk-step">
+      <div class="item-card">
+        <img v-if="item.imageurl" :src="withBase(item.imageurl)" class="item-photo" />
+        <div>
+          <h2>{{ item.itemname }}</h2>
+          <p class="kiosk-hint">{{ item.itemcode }} - {{ item.quantityonhand }} on hand</p>
+        </div>
+      </div>
+      <p class="kiosk-prompt">Scan your badge</p>
+      <div class="manual-row">
+        <input v-model="manualBadge" class="form-control" placeholder="or type your SSO"
+               @keydown.enter="acceptBadge(manualBadge)" />
+        <button class="btn btn-primary" @click="acceptBadge(manualBadge)">Next</button>
+      </div>
+    </section>
+
+    <!-- step 3: quantity -->
+    <section v-else-if="step === 'quantity'" class="kiosk-step">
+      <div class="item-card">
+        <img v-if="item.imageurl" :src="withBase(item.imageurl)" class="item-photo" />
+        <div>
+          <h2>{{ item.itemname }}</h2>
+          <p class="kiosk-hint">{{ item.quantityonhand }} on hand</p>
+        </div>
+      </div>
+      <p class="kiosk-prompt">How many are you taking?</p>
+      <div class="quantity-display">{{ quantity || '0' }}</div>
+      <TouchKeypad @digit="quantity += $event"
+                   @clear="quantity = ''"
+                   @backspace="quantity = quantity.slice(0, -1)" />
+      <button class="btn btn-primary take-button" :disabled="!quantity || submitting"
+              @click="submitTake">
+        {{ submitting ? 'Working...' : 'TAKE' }}
+      </button>
+    </section>
+
+    <!-- done -->
+    <section v-else-if="step === 'done'" class="kiosk-step">
+      <p class="kiosk-success">Done - {{ doneMessage }}</p>
+      <p class="kiosk-hint">Starting over in a few seconds...</p>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { printedpartsApi } from '../../api'
+import { withBase } from '../../utils/basePath'
+import TouchKeypad from '../../components/TouchKeypad.vue'
+
+const step = ref('item')
+const item = ref(null)
+const badge = ref('')
+const quantity = ref('')
+const error = ref('')
+const doneMessage = ref('')
+const submitting = ref(false)
+const manualEntry = ref(false)
+const manualCode = ref('')
+const manualBadge = ref('')
+const wedgeInput = ref(null)
+const wedgeBuffer = ref('')
+let resetTimer = null
+
+onMounted(focusWedge)
+onBeforeUnmount(() => clearTimeout(resetTimer))
+
+function focusWedge() {
+  wedgeInput.value?.focus()
+}
+
+function onWedgeEnter() {
+  const scanned = wedgeBuffer.value.trim()
+  wedgeBuffer.value = ''
+  if (!scanned) return
+  if (step.value === 'item') lookupItem(scanned)
+  else if (step.value === 'badge') acceptBadge(scanned)
+}
+
+async function lookupItem(itemcode) {
+  error.value = ''
+  if (!itemcode) return
+  try {
+    const response = await printedpartsApi.kioskItem(itemcode.trim())
+    item.value = response.data.data
+    step.value = 'badge'
+    manualEntry.value = false
+    manualCode.value = ''
+  } catch (lookupError) {
+    error.value = lookupError.response?.data?.data?.error?.message ||
+      'No part matches that barcode'
+  }
+  focusWedge()
+}
+
+function acceptBadge(value) {
+  error.value = ''
+  const scanned = (value || '').trim()
+  if (!scanned) return
+  badge.value = scanned
+  manualBadge.value = ''
+  step.value = 'quantity'
+  focusWedge()
+}
+
+async function submitTake() {
+  submitting.value = true
+  error.value = ''
+  try {
+    const response = await printedpartsApi.kioskTake({
+      itemcode: item.value.itemcode,
+      badge: badge.value,
+      quantity: parseInt(quantity.value, 10)
+    })
+    doneMessage.value = response.data.message
+    step.value = 'done'
+    resetTimer = setTimeout(reset, 4000)
+  } catch (takeError) {
+    error.value = takeError.response?.data?.data?.error?.message ||
+      'Could not complete - see the parts team'
+    if (takeError.response?.status === 422) {
+      // badge problem: go back a step so the next scan retries cleanly
+      step.value = 'badge'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+function reset() {
+  clearTimeout(resetTimer)
+  step.value = 'item'
+  item.value = null
+  badge.value = ''
+  quantity.value = ''
+  error.value = ''
+  doneMessage.value = ''
+  focusWedge()
+}
+</script>
+
+<style scoped>
+.parts-kiosk {
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+.kiosk-header {
+  width: 100%;
+  max-width: 40rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.wedge-input {
+  position: absolute;
+  opacity: 0;
+  height: 1px;
+  width: 1px;
+}
+.kiosk-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  max-width: 40rem;
+  width: 100%;
+}
+.kiosk-prompt { font-size: 1.6rem; font-weight: 600; }
+.kiosk-hint { color: var(--text-light); }
+.kiosk-error {
+  background: var(--danger);
+  color: #fff;
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+}
+.kiosk-success { font-size: 1.6rem; color: var(--success); font-weight: 600; }
+.item-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 0.6rem;
+  padding: 1rem 1.5rem;
+  width: 100%;
+}
+.item-photo {
+  width: 5rem;
+  height: 5rem;
+  object-fit: cover;
+  border-radius: 0.4rem;
+}
+.quantity-display {
+  font-size: 3rem;
+  font-weight: 700;
+  min-width: 8rem;
+  text-align: center;
+  border-bottom: 3px solid var(--primary);
+}
+.take-button {
+  font-size: 1.5rem;
+  padding: 0.9rem 3.5rem;
+}
+.manual-row { display: flex; gap: 0.6rem; }
+</style>