@codingfactory/inventory-locator-client 0.1.0

package/src/components/scanning/ScanHistory.vue

@@ -0,0 +1,146 @@
+<template>
+  <div
+    v-if="displayEntries.length > 0"
+    class="scan-history"
+  >
+    <p class="scan-history__title">Recent scans</p>
+    <ul class="scan-history__list" role="list">
+      <li
+        v-for="entry in displayEntries"
+        :key="entry.code + entry.scannedAt"
+        class="scan-history__item"
+      >
+        <button
+          type="button"
+          class="scan-history__link"
+          :aria-label="`Navigate to ${entry.locationName} (${entry.code})`"
+          @click="handleClick(entry)"
+        >
+          <span class="scan-history__code">{{ entry.code }}</span>
+          <span class="scan-history__name">{{ entry.locationName }}</span>
+          <span class="scan-history__time">{{ formatTimeAgo(entry.scannedAt) }}</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScannerStore } from '../../stores/scannerStore'
+
+const props = withDefaults(defineProps<{
+  limit?: number
+}>(), {
+  limit: 10,
+})
+
+const router = useRouter()
+const scannerStore = useScannerStore()
+
+onMounted(() => {
+  scannerStore.loadFromSession()
+})
+
+const displayEntries = computed(() => {
+  return scannerStore.history.slice(0, props.limit)
+})
+
+function handleClick(entry: { code: string; locationId: number }) {
+  router.push({
+    name: 'inventory-location',
+    params: { code: entry.code },
+  })
+}
+
+function formatTimeAgo(isoDate: string): string {
+  const now = Date.now()
+  const then = new Date(isoDate).getTime()
+  const diffMs = now - then
+
+  const seconds = Math.floor(diffMs / 1000)
+  if (seconds < 60) return 'just now'
+
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes} min ago`
+
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'yesterday'
+  return `${days}d ago`
+}
+</script>
+
+<style scoped>
+.scan-history__title {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.scan-history__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.scan-history__item {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scan-history__item:last-child {
+  border-bottom: none;
+}
+
+.scan-history__link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  width: 100%;
+  padding: var(--space-2, 0.5rem) 0;
+  border: none;
+  background: none;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: var(--text-sm, 0.875rem);
+  cursor: pointer;
+  text-align: left;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+}
+
+.scan-history__link:hover {
+  color: #fff;
+}
+
+.scan-history__link:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.scan-history__code {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.scan-history__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.scan-history__time {
+  flex-shrink: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgba(255, 255, 255, 0.4);
+}
+</style>

package/src/components/scanning/ScanResult.vue

@@ -0,0 +1,350 @@
+<template>
+  <Transition name="scan-result">
+    <div
+      v-if="show"
+      class="scan-result__backdrop"
+      @mousedown.self="emit('close')"
+    >
+      <div
+        ref="sheetRef"
+        class="scan-result"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        @keydown.escape="emit('close')"
+      >
+        <!-- Drag handle -->
+        <div class="scan-result__handle" aria-hidden="true">
+          <span class="scan-result__handle-bar" />
+        </div>
+
+        <!-- Header -->
+        <div class="scan-result__header">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            class="scan-result__check-icon"
+          >
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+            <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          <h2 :id="titleId" class="scan-result__title">Location Found</h2>
+        </div>
+
+        <!-- Location info -->
+        <div class="scan-result__body">
+          <!-- Path breadcrumb -->
+          <div v-if="location.path && location.path.length > 0" class="scan-result__path">
+            <LocationBreadcrumb
+              :path="location.path"
+              @navigate="handleBreadcrumbNavigate"
+            />
+          </div>
+
+          <!-- Code and type -->
+          <div class="scan-result__location-info">
+            <LocationCodeBadge :code="location.full_code" />
+            <InvBadge variant="muted" size="sm">
+              {{ location.type_label }}
+            </InvBadge>
+          </div>
+
+          <!-- Products list -->
+          <div
+            v-if="location.products && location.products.length > 0"
+            class="scan-result__products"
+          >
+            <p class="scan-result__products-label">
+              Products: {{ location.products.length }} item{{ location.products.length !== 1 ? 's' : '' }}
+            </p>
+            <ul class="scan-result__product-list" role="list">
+              <li
+                v-for="product in displayProducts"
+                :key="product.id"
+                class="scan-result__product-item"
+              >
+                <span class="scan-result__product-name">{{ product.product_name }}</span>
+                <span class="scan-result__product-qty">qty: {{ product.quantity }}</span>
+              </li>
+            </ul>
+            <p
+              v-if="location.products.length > 5"
+              class="scan-result__products-more"
+            >
+              + {{ location.products.length - 5 }} more
+            </p>
+          </div>
+
+          <div
+            v-else
+            class="scan-result__no-products"
+          >
+            <p class="scan-result__no-products-text">No products at this location</p>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="scan-result__actions">
+          <InvButton
+            variant="primary"
+            size="md"
+            @click="emit('navigate', location)"
+          >
+            View Details
+          </InvButton>
+          <InvButton
+            variant="secondary"
+            size="md"
+            @click="emit('navigate', location)"
+          >
+            Add Product
+          </InvButton>
+          <InvButton
+            variant="ghost"
+            size="md"
+            @click="emit('scan-again')"
+          >
+            Scan Again
+          </InvButton>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, nextTick, ref, useId } from 'vue'
+import type { Location, PathSegment } from '../../types'
+import InvButton from '../shared/InvButton.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import LocationCodeBadge from '../locations/LocationCodeBadge.vue'
+import LocationBreadcrumb from '../locations/LocationBreadcrumb.vue'
+
+const props = defineProps<{
+  location: Location
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  navigate: [location: Location]
+  'scan-again': []
+}>()
+
+const uid = useId()
+const titleId = `scan-result-title-${uid}`
+const sheetRef = ref<HTMLElement | null>(null)
+
+const displayProducts = computed(() => {
+  if (!props.location.products) return []
+  return props.location.products.slice(0, 5)
+})
+
+watch(() => props.show, async (visible) => {
+  if (visible) {
+    await nextTick()
+    sheetRef.value?.focus()
+  }
+})
+
+function handleBreadcrumbNavigate(segment: PathSegment) {
+  emit('navigate', { ...props.location, full_code: segment.full_code } as Location)
+}
+</script>
+
+<style scoped>
+.scan-result__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9100;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.scan-result {
+  width: 100%;
+  max-width: 560px;
+  max-height: 80vh;
+  background: var(--admin-card-bg, #fff);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  outline: none;
+  color: var(--admin-text-primary);
+}
+
+.scan-result__handle {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3, 0.75rem) 0 var(--space-1, 0.25rem);
+}
+
+.scan-result__handle-bar {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--admin-border);
+}
+
+.scan-result__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
+}
+
+.scan-result__check-icon {
+  color: var(--color-success, #059669);
+  flex-shrink: 0;
+}
+
+.scan-result__title {
+  margin: 0;
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.scan-result__body {
+  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem) var(--space-4, 1rem);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.scan-result__path {
+  margin-bottom: var(--space-3, 0.75rem);
+}
+
+.scan-result__location-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  margin-bottom: var(--space-4, 1rem);
+}
+
+.scan-result__products {
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.scan-result__products-label {
+  margin: 0;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--admin-text-secondary);
+  background: var(--admin-table-header-bg);
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.scan-result__product-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.scan-result__product-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border-bottom: 1px solid var(--admin-border);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.scan-result__product-item:last-child {
+  border-bottom: none;
+}
+
+.scan-result__product-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  color: var(--admin-text-primary);
+}
+
+.scan-result__product-qty {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-secondary);
+}
+
+.scan-result__products-more {
+  margin: 0;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  border-top: 1px solid var(--admin-border);
+}
+
+.scan-result__no-products {
+  padding: var(--space-4, 1rem);
+  text-align: center;
+}
+
+.scan-result__no-products-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+
+.scan-result__actions {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem);
+  border-top: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+.scan-result__actions > * {
+  flex: 1;
+}
+
+/* Slide-up transition */
+.scan-result-enter-active {
+  transition: opacity 0.2s ease;
+}
+
+.scan-result-enter-active .scan-result {
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.scan-result-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.scan-result-leave-active .scan-result {
+  transition: transform 0.15s ease;
+}
+
+.scan-result-enter-from {
+  opacity: 0;
+}
+
+.scan-result-enter-from .scan-result {
+  transform: translateY(100%);
+}
+
+.scan-result-leave-to {
+  opacity: 0;
+}
+
+.scan-result-leave-to .scan-result {
+  transform: translateY(100%);
+}
+</style>