@codingfactory/inventory-locator-client 0.1.0

package/src/components/products/ProductLocationList.vue

@@ -0,0 +1,215 @@
+<template>
+  <InvCard title="Locations" :loading="loading" no-padding>
+    <template v-if="!loading && locations.length === 0">
+      <InvEmptyState
+        title="No locations tracked"
+        description="This product is not currently tracked at any location."
+      />
+    </template>
+
+    <template v-else-if="!loading">
+      <InvTable
+        :columns="columns"
+        :data="locations"
+        empty-message="No locations found."
+      >
+        <template #cell-path="{ row }">
+          <button
+            type="button"
+            class="pll-location-link"
+            :aria-label="`Navigate to ${row.location?.name ?? 'location'}`"
+            @click="handleNavigate(row)"
+          >
+            <span class="pll-location-path">
+              {{ getLocationPath(row) }}
+            </span>
+          </button>
+        </template>
+
+        <template #cell-code="{ row }">
+          <InvBadge v-if="row.location?.full_code" variant="default" size="sm">
+            {{ row.location.full_code }}
+          </InvBadge>
+          <InvBadge v-else-if="row.location?.code" variant="default" size="sm">
+            {{ row.location.code }}
+          </InvBadge>
+        </template>
+
+        <template #cell-quantity="{ row }">
+          <span class="pll-quantity">{{ formatQuantity(row.quantity) }}</span>
+        </template>
+
+        <template #cell-is_primary="{ row }">
+          <svg
+            v-if="row.is_primary"
+            class="pll-primary-star"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            role="img"
+            aria-label="Primary location"
+          >
+            <path
+              d="M9 1.5L11.3 6.2L16.5 6.9L12.75 10.55L13.6 15.75L9 13.3L4.4 15.75L5.25 10.55L1.5 6.9L6.7 6.2L9 1.5Z"
+              fill="currentColor"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span v-else class="pll-no-primary" aria-label="Not primary location" />
+        </template>
+      </InvTable>
+
+      <div class="pll-footer">
+        <span class="pll-total-label">Total:</span>
+        <span class="pll-total-value">
+          {{ formatQuantity(totalQuantity) }}
+          across {{ locations.length }} location{{ locations.length !== 1 ? 's' : '' }}
+        </span>
+      </div>
+    </template>
+  </InvCard>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { LocationProduct, Location, Column } from '../../types'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import InvCard from '../shared/InvCard.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+
+const props = defineProps<{
+  productId: number | string
+}>()
+
+const emit = defineEmits<{
+  navigate: [location: Location]
+}>()
+
+const { loading, fetchProductLocations } = useLocationProducts()
+
+const locations = ref<LocationProduct[]>([])
+
+const columns: Column[] = [
+  { key: 'path', label: 'Location', sortable: false },
+  { key: 'code', label: 'Code', sortable: false, width: '120px' },
+  { key: 'quantity', label: 'Qty', sortable: false, width: '80px', align: 'right' },
+  { key: 'is_primary', label: 'Primary', sortable: false, width: '80px', align: 'center' },
+]
+
+const totalQuantity = computed(() => {
+  return locations.value.reduce((sum, lp) => sum + lp.quantity, 0)
+})
+
+function formatQuantity(qty: number): string {
+  return Number.isInteger(qty) ? qty.toFixed(0) : qty.toFixed(2)
+}
+
+function getLocationPath(row: LocationProduct): string {
+  if (row.location?.path) {
+    return row.location.path
+      .map((segment) => segment.name)
+      .concat([row.location.name])
+      .join(' > ')
+  }
+  return row.location?.name ?? 'Unknown location'
+}
+
+function handleNavigate(row: LocationProduct) {
+  if (row.location) {
+    emit('navigate', row.location)
+  }
+}
+
+async function loadLocations() {
+  try {
+    locations.value = await fetchProductLocations(props.productId)
+  } catch {
+    // error displayed by composable
+    locations.value = []
+  }
+}
+
+watch(
+  () => props.productId,
+  (id) => {
+    if (id) {
+      loadLocations()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+.pll-location-link {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1, 0.25rem) 0;
+  min-height: 44px;
+  border: none;
+  background: transparent;
+  color: var(--color-primary, #2563eb);
+  font-size: var(--text-sm, 0.875rem);
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+}
+
+.pll-location-link:hover {
+  text-decoration: underline;
+}
+
+.pll-location-link:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.pll-location-path {
+  line-height: 1.4;
+}
+
+.pll-quantity {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.pll-primary-star {
+  color: var(--color-warning, #d97706);
+}
+
+.pll-no-primary {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.pll-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border-top: 1px solid var(--admin-border);
+  background: var(--admin-content-bg);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.pll-total-label {
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.pll-total-value {
+  color: var(--admin-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+</style>