@codingfactory/inventory-locator-client 0.1.0

package/src/components/scanning/ScannerOverlay.vue

@@ -0,0 +1,696 @@
+<template>
+  <div class="scanner-overlay">
+    <!-- Counting mode banner -->
+    <div
+      v-if="countStore.isCountingMode"
+      class="scanner-overlay__counting-banner"
+      role="status"
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        aria-hidden="true"
+      >
+        <rect x="2" y="2" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
+        <path d="M6 6h2v2H6V6zm4 0h2v2h-2V6zm-4 4h2v2H6v-2zm4 0h2v2h-2v-2z" fill="currentColor" />
+      </svg>
+      <span class="scanner-overlay__counting-text">
+        Counting: Session #{{ countStore.activeSessionId }}
+      </span>
+    </div>
+
+    <!-- Header controls -->
+    <div class="scanner-overlay__header">
+      <button
+        type="button"
+        class="scanner-overlay__close-btn"
+        aria-label="Close scanner"
+        @click="handleClose"
+      >
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M18 6L6 18M6 6L18 18"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+
+      <button
+        v-if="scanner.isScanning.value && scanner.isSupported.value"
+        type="button"
+        class="scanner-overlay__flash-btn"
+        :class="{ 'scanner-overlay__flash-btn--active': scanner.flashOn.value }"
+        :aria-label="scanner.flashOn.value ? 'Turn off flash' : 'Turn on flash'"
+        :aria-pressed="scanner.flashOn.value"
+        @click="scanner.toggleFlash()"
+      >
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            :fill="scanner.flashOn.value ? 'currentColor' : 'none'"
+          />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Camera area -->
+    <div v-if="scanner.isSupported.value" class="scanner-overlay__camera-area">
+      <div
+        v-show="scanner.isScanning.value && !scanResult"
+        :id="scannerElementId"
+        class="scanner-overlay__camera-feed"
+      />
+
+      <!-- Scan box overlay guide -->
+      <div
+        v-if="scanner.isScanning.value && !scanResult"
+        class="scanner-overlay__scan-guide"
+        aria-hidden="true"
+      >
+        <div class="scanner-overlay__scan-box">
+          <span class="scanner-overlay__scan-corner scanner-overlay__scan-corner--tl" />
+          <span class="scanner-overlay__scan-corner scanner-overlay__scan-corner--tr" />
+          <span class="scanner-overlay__scan-corner scanner-overlay__scan-corner--bl" />
+          <span class="scanner-overlay__scan-corner scanner-overlay__scan-corner--br" />
+        </div>
+      </div>
+
+      <!-- Camera not started message -->
+      <div
+        v-if="!scanner.isScanning.value && !scanner.error.value && !scanResult"
+        class="scanner-overlay__starting"
+        role="status"
+      >
+        <div class="scanner-overlay__spinner" aria-hidden="true" />
+        <p class="scanner-overlay__starting-text">Starting camera...</p>
+      </div>
+
+      <!-- Camera error -->
+      <div
+        v-if="scanner.error.value && !scanResult"
+        class="scanner-overlay__error"
+        role="alert"
+      >
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+          <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        <p class="scanner-overlay__error-title">Camera access is required for scanning</p>
+        <p class="scanner-overlay__error-desc">
+          Enable camera access in your browser or device settings, or use manual entry below.
+        </p>
+        <InvButton
+          variant="secondary"
+          size="sm"
+          @click="retryCamera"
+        >
+          Try Again
+        </InvButton>
+      </div>
+    </div>
+
+    <!-- No camera fallback (desktop) -->
+    <div
+      v-else
+      class="scanner-overlay__no-camera"
+      role="status"
+    >
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+      >
+        <rect x="2" y="6" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
+        <circle cx="12" cy="13" r="4" stroke="currentColor" stroke-width="1.5" />
+        <path d="M2 8L22 8" stroke="currentColor" stroke-width="1.5" />
+        <path d="M3 3L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+      <p class="scanner-overlay__no-camera-text">
+        No camera detected. Use manual entry to look up locations.
+      </p>
+    </div>
+
+    <!-- Instruction text -->
+    <p
+      v-if="scanner.isSupported.value && scanner.isScanning.value && !scanResult"
+      class="scanner-overlay__instruction"
+    >
+      Point camera at QR code or barcode
+    </p>
+
+    <!-- Scan lookup status -->
+    <div aria-live="polite" class="sr-only">
+      <span v-if="lookupLoading">Looking up scanned code...</span>
+      <span v-if="lookupError">{{ lookupError }}</span>
+      <span v-if="scanResult">Location found: {{ scanResult.name }}</span>
+    </div>
+
+    <!-- Lookup error toast -->
+    <div
+      v-if="lookupError"
+      class="scanner-overlay__toast scanner-overlay__toast--error"
+      role="alert"
+    >
+      <span>{{ lookupError }}</span>
+      <button
+        type="button"
+        class="scanner-overlay__toast-dismiss"
+        aria-label="Dismiss error"
+        @click="dismissError"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Manual entry -->
+    <div class="scanner-overlay__manual">
+      <label for="scanner-manual-input" class="scanner-overlay__manual-label">
+        Or enter code manually:
+      </label>
+      <div class="scanner-overlay__manual-row">
+        <input
+          id="scanner-manual-input"
+          v-model="manualCode"
+          type="text"
+          class="scanner-overlay__manual-input"
+          placeholder="e.g. WH1-A-01"
+          :disabled="lookupLoading"
+          @keydown.enter="handleManualSubmit"
+        />
+        <InvButton
+          variant="primary"
+          size="md"
+          :loading="lookupLoading"
+          :disabled="!manualCode.trim()"
+          @click="handleManualSubmit"
+        >
+          Go
+        </InvButton>
+      </div>
+    </div>
+
+    <!-- Recent scans -->
+    <ScanHistory
+      v-if="!scanResult"
+      :limit="5"
+      class="scanner-overlay__history"
+    />
+
+    <!-- Scan result bottom sheet -->
+    <ScanResult
+      v-if="scanResult"
+      :location="scanResult"
+      :show="!!scanResult"
+      @close="handleResultClose"
+      @navigate="handleResultNavigate"
+      @scan-again="handleScanAgain"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScanner } from '../../composables/useScanner'
+import { useLocations } from '../../composables/useLocations'
+import { useScannerStore } from '../../stores/scannerStore'
+import { useCountStore } from '../../stores/countStore'
+import type { Location } from '../../types'
+import InvButton from '../shared/InvButton.vue'
+import ScanResult from './ScanResult.vue'
+import ScanHistory from './ScanHistory.vue'
+
+const router = useRouter()
+const scanner = useScanner()
+const locations = useLocations()
+const scannerStore = useScannerStore()
+const countStore = useCountStore()
+
+const scannerElementId = 'inv-scanner-feed'
+const manualCode = ref('')
+const scanResult = ref<Location | null>(null)
+const lookupLoading = ref(false)
+const lookupError = ref<string | null>(null)
+
+onMounted(async () => {
+  scannerStore.loadFromSession()
+  if (scanner.isSupported.value) {
+    await startCamera()
+  }
+})
+
+onBeforeUnmount(async () => {
+  await scanner.stopScanning()
+})
+
+async function startCamera() {
+  lookupError.value = null
+  await scanner.startScanning(scannerElementId, handleScanResult)
+}
+
+async function retryCamera() {
+  scanner.error.value = null
+  await startCamera()
+}
+
+async function handleScanResult(code: string) {
+  await scanner.stopScanning()
+  await lookupCode(code)
+}
+
+async function handleManualSubmit() {
+  const code = manualCode.value.trim()
+  if (!code) return
+  await lookupCode(code)
+}
+
+async function lookupCode(code: string) {
+  lookupLoading.value = true
+  lookupError.value = null
+
+  try {
+    const location = await locations.scanLookup(code)
+    if (location) {
+      scanResult.value = location
+      scannerStore.addToHistory({
+        code: location.full_code,
+        locationName: location.name,
+        locationId: location.id,
+      })
+    } else {
+      lookupError.value = `No location found for code "${code}"`
+      if (scanner.isSupported.value) {
+        await startCamera()
+      }
+    }
+  } catch {
+    lookupError.value = 'Could not look up location. Check connection.'
+    if (scanner.isSupported.value) {
+      await startCamera()
+    }
+  } finally {
+    lookupLoading.value = false
+  }
+}
+
+function dismissError() {
+  lookupError.value = null
+}
+
+function handleResultClose() {
+  scanResult.value = null
+}
+
+function handleResultNavigate(location: Location) {
+  scanResult.value = null
+  router.push({
+    name: 'inventory-location',
+    params: { code: location.full_code },
+  })
+}
+
+async function handleScanAgain() {
+  scanResult.value = null
+  manualCode.value = ''
+  if (scanner.isSupported.value) {
+    await startCamera()
+  }
+}
+
+function handleClose() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.scanner-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  display: flex;
+  flex-direction: column;
+  background: var(--admin-bg, #0f172a);
+  color: #fff;
+  overflow: hidden;
+}
+
+.scanner-overlay__counting-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 90%, black);
+  color: #fff;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.scanner-overlay__counting-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scanner-overlay__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  flex-shrink: 0;
+  z-index: 10;
+  position: relative;
+}
+
+.scanner-overlay__close-btn,
+.scanner-overlay__flash-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.scanner-overlay__close-btn:hover,
+.scanner-overlay__flash-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.scanner-overlay__close-btn:focus-visible,
+.scanner-overlay__flash-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.scanner-overlay__flash-btn--active {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.scanner-overlay__camera-area {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.scanner-overlay__camera-feed {
+  width: 100%;
+  height: 100%;
+}
+
+.scanner-overlay__camera-feed :deep(video) {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+
+.scanner-overlay__scan-guide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.scanner-overlay__scan-box {
+  width: 250px;
+  height: 250px;
+  position: relative;
+}
+
+.scanner-overlay__scan-corner {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-color: #fff;
+  border-style: solid;
+  border-width: 0;
+}
+
+.scanner-overlay__scan-corner--tl {
+  top: 0;
+  left: 0;
+  border-top-width: 3px;
+  border-left-width: 3px;
+  border-top-left-radius: 8px;
+}
+
+.scanner-overlay__scan-corner--tr {
+  top: 0;
+  right: 0;
+  border-top-width: 3px;
+  border-right-width: 3px;
+  border-top-right-radius: 8px;
+}
+
+.scanner-overlay__scan-corner--bl {
+  bottom: 0;
+  left: 0;
+  border-bottom-width: 3px;
+  border-left-width: 3px;
+  border-bottom-left-radius: 8px;
+}
+
+.scanner-overlay__scan-corner--br {
+  bottom: 0;
+  right: 0;
+  border-bottom-width: 3px;
+  border-right-width: 3px;
+  border-bottom-right-radius: 8px;
+}
+
+.scanner-overlay__starting {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+}
+
+.scanner-overlay__spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: scanner-spin 0.8s linear infinite;
+}
+
+@keyframes scanner-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.scanner-overlay__starting-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.scanner-overlay__error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-6, 1.5rem);
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.scanner-overlay__error-title {
+  margin: 0;
+  font-size: var(--text-base, 1rem);
+  font-weight: 600;
+  color: #fff;
+}
+
+.scanner-overlay__error-desc {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+.scanner-overlay__no-camera {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-6, 1.5rem);
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+}
+
+.scanner-overlay__no-camera-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+.scanner-overlay__instruction {
+  margin: 0;
+  padding: var(--space-3, 0.75rem);
+  text-align: center;
+  font-size: var(--text-sm, 0.875rem);
+  color: rgba(255, 255, 255, 0.7);
+  flex-shrink: 0;
+}
+
+.scanner-overlay__toast {
+  position: absolute;
+  bottom: 240px;
+  left: var(--space-4, 1rem);
+  right: var(--space-4, 1rem);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border-radius: 8px;
+  font-size: var(--text-sm, 0.875rem);
+  z-index: 20;
+  animation: scanner-toast-in 0.2s ease;
+}
+
+.scanner-overlay__toast--error {
+  background: var(--color-error, #dc2626);
+  color: #fff;
+}
+
+@keyframes scanner-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.scanner-overlay__toast-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.scanner-overlay__toast-dismiss:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.scanner-overlay__toast-dismiss:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.scanner-overlay__manual {
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  flex-shrink: 0;
+}
+
+.scanner-overlay__manual-label {
+  display: block;
+  font-size: var(--text-sm, 0.875rem);
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: var(--space-2, 0.5rem);
+}
+
+.scanner-overlay__manual-row {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+}
+
+.scanner-overlay__manual-input {
+  flex: 1;
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: var(--text-sm, 0.875rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.scanner-overlay__manual-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.scanner-overlay__manual-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
+}
+
+.scanner-overlay__history {
+  flex-shrink: 0;
+  padding: 0 var(--space-4, 1rem) var(--space-4, 1rem);
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>