@codingfactory/inventory-locator-client 0.1.0

package/src/components/labels/LabelPreview.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="label-preview">
+    <!-- Format selector -->
+    <div class="label-preview__controls">
+      <InvSelect
+        v-model="selectedFormat"
+        :options="formatOptions"
+        label="Format"
+      />
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="label-preview__loading" role="status">
+      <div class="label-preview__loading-spinner" aria-hidden="true" />
+      <span class="sr-only">Loading label...</span>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="label-preview__error" role="alert">
+      <p class="label-preview__error-text">{{ error }}</p>
+      <InvButton variant="secondary" size="sm" @click="loadLabel">
+        Retry
+      </InvButton>
+    </div>
+
+    <!-- Preview -->
+    <div
+      v-else-if="labelData"
+      class="label-preview__container"
+    >
+      <div
+        class="label-preview__label"
+        :style="labelDimensionStyle"
+      >
+        <!-- Path -->
+        <p class="label-preview__path">{{ labelData.path }}</p>
+
+        <!-- Code (bold) -->
+        <p class="label-preview__code">{{ labelData.location.full_code }}</p>
+
+        <!-- Name -->
+        <p class="label-preview__name">{{ labelData.location.name }}</p>
+
+        <!-- Barcode SVG -->
+        <div
+          v-if="labelData.barcode_svg"
+          class="label-preview__barcode"
+          aria-label="Barcode"
+          v-html="labelData.barcode_svg"
+        />
+
+        <!-- QR code SVG -->
+        <div
+          v-if="labelData.qr_code_svg"
+          class="label-preview__qr"
+          aria-label="QR code"
+          v-html="labelData.qr_code_svg"
+        />
+      </div>
+    </div>
+
+    <!-- Print button -->
+    <div v-if="labelData" class="label-preview__print">
+      <InvButton
+        variant="primary"
+        size="md"
+        :loading="printing"
+        @click="handlePrint"
+      >
+        <template #icon-left>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect x="4" y="1" width="8" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+            <rect x="2" y="6" width="12" height="6" rx="1" stroke="currentColor" stroke-width="1.5" />
+            <rect x="5" y="10" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+          </svg>
+        </template>
+        Print Label
+      </InvButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useLabelPrinting } from '../../composables/useLabelPrinting'
+import type { LabelFormat } from '../../types'
+import InvButton from '../shared/InvButton.vue'
+import InvSelect from '../shared/InvSelect.vue'
+
+const props = withDefaults(defineProps<{
+  locationId: number
+  format?: LabelFormat
+}>(), {
+  format: 'standard',
+})
+
+const emit = defineEmits<{
+  print: []
+}>()
+
+const { labelData, loading, error, fetchLabel, printLabel } = useLabelPrinting()
+
+const selectedFormat = ref<string>(props.format)
+const printing = ref(false)
+
+const formatOptions = [
+  { value: 'standard', label: 'Standard' },
+  { value: 'small', label: 'Small' },
+  { value: 'pallet', label: 'Pallet' },
+]
+
+const labelDimensionStyle = computed(() => {
+  if (!labelData.value?.size) return {}
+  return {
+    width: labelData.value.size.width,
+    height: labelData.value.size.height,
+  }
+})
+
+onMounted(() => loadLabel())
+
+watch(selectedFormat, () => loadLabel())
+
+async function loadLabel() {
+  try {
+    await fetchLabel(props.locationId, selectedFormat.value as LabelFormat)
+  } catch {
+    // Error is displayed in template
+  }
+}
+
+async function handlePrint() {
+  printing.value = true
+  try {
+    await printLabel(props.locationId, selectedFormat.value as LabelFormat)
+    emit('print')
+  } catch {
+    // Error handling is in the composable
+  } finally {
+    printing.value = false
+  }
+}
+</script>
+
+<style scoped>
+.label-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.label-preview__controls {
+  max-width: 200px;
+}
+
+.label-preview__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8, 2rem);
+}
+
+.label-preview__loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--admin-border);
+  border-top-color: var(--color-primary, #2563eb);
+  border-radius: 50%;
+  animation: label-spin 0.8s linear infinite;
+}
+
+@keyframes label-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.label-preview__error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-6, 1.5rem);
+}
+
+.label-preview__error-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--color-error, #dc2626);
+}
+
+.label-preview__container {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4, 1rem);
+  background: var(--admin-content-bg);
+  border-radius: 8px;
+}
+
+.label-preview__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-4, 1rem);
+  background: #fff;
+  border: 2px solid var(--admin-border);
+  border-radius: 4px;
+  color: #000;
+  transform: scale(2);
+  transform-origin: top center;
+  margin-bottom: 100%;
+}
+
+.label-preview__path {
+  margin: 0;
+  font-size: 7px;
+  color: #666;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.label-preview__code {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  text-align: center;
+}
+
+.label-preview__name {
+  margin: 0;
+  font-size: 8px;
+  color: #333;
+  text-align: center;
+}
+
+.label-preview__barcode {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.label-preview__barcode :deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+.label-preview__qr {
+  display: flex;
+  justify-content: center;
+}
+
+.label-preview__qr :deep(svg) {
+  width: 48px;
+  height: 48px;
+}
+
+.label-preview__print {
+  display: flex;
+  justify-content: center;
+}
+
+.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;
+}
+
+@media print {
+  .label-preview__controls,
+  .label-preview__print {
+    display: none;
+  }
+
+  .label-preview__label {
+    transform: none;
+    margin-bottom: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  .label-preview__container {
+    background: none;
+    padding: 0;
+  }
+}
+</style>

package/src/components/locations/InventoryLocatorShell.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="inv-shell">
+    <!-- Header bar -->
+    <header class="inv-shell__header">
+      <div class="inv-shell__header-left">
+        <button
+          type="button"
+          class="inv-shell__menu-toggle"
+          :aria-label="drawerOpen ? 'Close sidebar' : 'Open sidebar'"
+          :aria-expanded="drawerOpen"
+          @click="drawerOpen = !drawerOpen"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+        <h1 class="inv-shell__title">Inventory Locations</h1>
+      </div>
+
+      <div class="inv-shell__header-actions">
+        <div class="inv-shell__search-wrapper">
+          <LocationSearchInput
+            v-model="searchQuery"
+            placeholder="Search locations..."
+            @select="handleSearchSelect"
+          />
+        </div>
+        <InvButton variant="primary" size="sm" @click="showCreateForm = true">
+          <template #icon-left>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </template>
+          New
+        </InvButton>
+        <InvButton variant="secondary" size="sm" @click="handleScan">
+          <template #icon-left>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M7 8h10M7 12h10M7 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </template>
+          Scan
+        </InvButton>
+      </div>
+    </header>
+
+    <div class="inv-shell__body">
+      <!-- Drawer backdrop (tablet/mobile) -->
+      <Transition name="inv-shell-backdrop">
+        <div
+          v-if="drawerOpen && isCompact"
+          class="inv-shell__backdrop"
+          @click="drawerOpen = false"
+        />
+      </Transition>
+
+      <!-- Sidebar / Tree panel -->
+      <aside
+        class="inv-shell__sidebar"
+        :class="{
+          'inv-shell__sidebar--open': drawerOpen,
+          'inv-shell__sidebar--compact': isCompact,
+        }"
+        :aria-hidden="isCompact && !drawerOpen ? 'true' : undefined"
+      >
+        <LocationTree
+          @select="handleTreeSelect"
+          @create="showCreateForm = true"
+        />
+      </aside>
+
+      <!-- Detail panel -->
+      <main class="inv-shell__detail">
+        <LocationDetail
+          v-if="locationStore.selectedLocationId"
+          :location-id="locationStore.selectedLocationId"
+          @navigate="handleNavigate"
+          @deleted="handleDeleted"
+        />
+        <InvEmptyState
+          v-else
+          title="Select a location"
+          description="Choose a location from the tree to view its details, products, and movements."
+        />
+      </main>
+    </div>
+
+    <!-- Create location modal -->
+    <LocationForm
+      :show="showCreateForm"
+      @update:show="showCreateForm = $event"
+      @saved="handleLocationCreated"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, inject } from 'vue'
+import type { Location } from '../../types'
+import { useLocationStore } from '../../stores/locationStore'
+import InvButton from '../shared/InvButton.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationSearchInput from './LocationSearchInput.vue'
+import LocationTree from './LocationTree.vue'
+import LocationDetail from './LocationDetail.vue'
+import LocationForm from './LocationForm.vue'
+
+const locationStore = useLocationStore()
+const router = inject<any>('router', null)
+const route = inject<any>('route', null)
+
+const searchQuery = ref('')
+const showCreateForm = ref(false)
+const drawerOpen = ref(true)
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1200)
+
+const isCompact = computed(() => windowWidth.value < 1024)
+
+function handleResize() {
+  windowWidth.value = window.innerWidth
+  // Auto-open sidebar on desktop
+  if (!isCompact.value) {
+    drawerOpen.value = true
+  }
+}
+
+function handleSearchSelect(location: Location) {
+  searchQuery.value = ''
+  selectAndNavigate(location)
+}
+
+function handleTreeSelect(location: Location) {
+  selectAndNavigate(location)
+  // Close drawer on tablet/mobile after selection
+  if (isCompact.value) {
+    drawerOpen.value = false
+  }
+}
+
+function handleNavigate(location: Location) {
+  selectAndNavigate(location)
+}
+
+function handleDeleted() {
+  locationStore.selectLocation(null)
+  updateUrl(null)
+}
+
+function handleLocationCreated(location: Location) {
+  showCreateForm.value = false
+  selectAndNavigate(location)
+}
+
+function handleScan() {
+  // Emit or navigate to scanner view
+  if (router) {
+    router.push({ name: 'inventory-scan' })
+  }
+}
+
+function selectAndNavigate(location: Location) {
+  locationStore.selectLocation(location.id)
+  // Expand all ancestors
+  expandAncestors(location)
+  updateUrl(location.full_code)
+}
+
+function expandAncestors(location: Location) {
+  if (location.path) {
+    for (const segment of location.path) {
+      if (!locationStore.expandedNodeIds.has(segment.id)) {
+        locationStore.toggleExpand(segment.id)
+      }
+    }
+  }
+}
+
+function updateUrl(code: string | null) {
+  if (!router) return
+  try {
+    if (code) {
+      router.replace({ name: 'inventory-location', params: { code } })
+    } else {
+      router.replace({ name: 'inventory-locations' })
+    }
+  } catch {
+    // Route may not exist, silently ignore
+  }
+}
+
+function readRouteCode(): string | null {
+  if (route?.params?.code) {
+    return route.params.code as string
+  }
+  return null
+}
+
+// URL sync: select location from route on mount
+function syncFromRoute() {
+  const code = readRouteCode()
+  if (code) {
+    // Find by code in the tree
+    const found = findByCode(code)
+    if (found) {
+      locationStore.selectLocation(found.id)
+      expandAncestors(found)
+    }
+    // If not found in tree yet, LocationDetail will handle loading by code
+  }
+}
+
+function findByCode(code: string): Location | null {
+  const search = (nodes: Location[]): Location | null => {
+    for (const node of nodes) {
+      if (node.full_code === code) return node
+      if (node.children) {
+        const found = search(node.children)
+        if (found) return found
+      }
+    }
+    return null
+  }
+  return search(locationStore.roots)
+}
+
+// Watch route changes
+if (route) {
+  watch(
+    () => route.params?.code,
+    (newCode) => {
+      if (newCode) {
+        const found = findByCode(newCode as string)
+        if (found) {
+          locationStore.selectLocation(found.id)
+          expandAncestors(found)
+        }
+      }
+    },
+  )
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  handleResize()
+  syncFromRoute()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.inv-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--admin-content-bg);
+}
+
+/* Header */
+.inv-shell__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-bottom: 1px solid var(--admin-border);
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.inv-shell__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  min-width: 0;
+}
+
+.inv-shell__menu-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--admin-text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.inv-shell__menu-toggle:hover {
+  background: var(--admin-content-bg);
+  color: var(--admin-text-primary);
+}
+
+.inv-shell__menu-toggle:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+@media (max-width: 1023px) {
+  .inv-shell__menu-toggle {
+    display: flex;
+  }
+}
+
+.inv-shell__title {
+  margin: 0;
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.inv-shell__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  flex-shrink: 0;
+}
+
+.inv-shell__search-wrapper {
+  width: 260px;
+}
+
+@media (max-width: 767px) {
+  .inv-shell__search-wrapper {
+    width: 160px;
+  }
+
+  .inv-shell__title {
+    font-size: var(--text-base, 1rem);
+  }
+}
+
+/* Body */
+.inv-shell__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+/* Backdrop for compact mode */
+.inv-shell__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+
+.inv-shell-backdrop-enter-active,
+.inv-shell-backdrop-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.inv-shell-backdrop-enter-from,
+.inv-shell-backdrop-leave-to {
+  opacity: 0;
+}
+
+/* Sidebar */
+.inv-shell__sidebar {
+  width: 300px;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  background: var(--admin-card-bg);
+  border-right: 1px solid var(--admin-border);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.inv-shell__sidebar--compact {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 30;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease;
+  box-shadow: none;
+}
+
+.inv-shell__sidebar--compact.inv-shell__sidebar--open {
+  transform: translateX(0);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+}
+
+/* Detail panel */
+.inv-shell__detail {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+</style>