@codingfactory/inventory-locator-client 0.1.0

package/src/components/dashboard/UnlocatedProducts.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="unlocated-products">
+    <div class="unlocated-products__header">
+      <div>
+        <h2 class="unlocated-products__title">Unlocated Products</h2>
+        <p v-if="totalCount > 0" class="unlocated-products__subtitle">
+          {{ totalCount }} product{{ totalCount !== 1 ? 's' : '' }} have no assigned warehouse location
+        </p>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <InvCard v-if="loading && products.length === 0" loading />
+
+    <!-- Table -->
+    <InvCard v-else-if="products.length > 0" no-padding>
+      <InvTable
+        :columns="columns"
+        :data="products"
+        empty-message="All products have assigned locations."
+      >
+        <template #cell-name="{ row }">
+          <span class="unlocated-products__product-name">{{ row.name }}</span>
+        </template>
+        <template #cell-sku="{ row }">
+          <span v-if="row.sku" class="unlocated-products__sku">{{ row.sku }}</span>
+          <span v-else class="unlocated-products__no-sku">no SKU</span>
+        </template>
+        <template #cell-actions="{ row }">
+          <InvButton
+            variant="primary"
+            size="sm"
+            @click="handleLocate(row)"
+          >
+            Locate
+          </InvButton>
+        </template>
+      </InvTable>
+
+      <!-- Load more -->
+      <div v-if="hasMore" class="unlocated-products__load-more">
+        <p class="unlocated-products__showing">
+          Showing {{ products.length }} of {{ totalCount }}
+        </p>
+        <InvButton
+          variant="ghost"
+          size="sm"
+          :loading="loadingMore"
+          @click="loadMore"
+        >
+          Load More
+        </InvButton>
+      </div>
+    </InvCard>
+
+    <!-- Empty -->
+    <InvEmptyState
+      v-else
+      title="All products located"
+      description="Every product in inventory has an assigned warehouse location."
+    />
+
+    <!-- Locate modal -->
+    <InvModal
+      :show="showLocateModal"
+      :title="`Locate: ${locateProduct?.name ?? ''}`"
+      description="Search for a location to assign this product."
+      size="md"
+      @update:show="showLocateModal = $event"
+      @close="closeLocateModal"
+    >
+      <div class="unlocated-products__locate-form">
+        <div class="unlocated-products__locate-search">
+          <label for="locate-search-input" class="unlocated-products__locate-label">
+            Location
+          </label>
+          <input
+            id="locate-search-input"
+            v-model="locateSearchQuery"
+            type="search"
+            class="unlocated-products__locate-input"
+            placeholder="Search by code or name..."
+            @input="handleLocateSearch"
+          />
+        </div>
+
+        <!-- Search results -->
+        <ul
+          v-if="locateSearchResults.length > 0"
+          class="unlocated-products__locate-results"
+          role="listbox"
+          aria-label="Location search results"
+        >
+          <li
+            v-for="loc in locateSearchResults"
+            :key="loc.id"
+            role="option"
+            :aria-selected="selectedLocation?.id === loc.id"
+          >
+            <button
+              type="button"
+              class="unlocated-products__locate-option"
+              :class="{ 'unlocated-products__locate-option--selected': selectedLocation?.id === loc.id }"
+              @click="selectLocateLocation(loc)"
+            >
+              <LocationCodeBadge :code="loc.full_code" />
+              <span class="unlocated-products__locate-option-name">{{ loc.name }}</span>
+              <InvBadge variant="muted" size="sm">{{ loc.type_label }}</InvBadge>
+            </button>
+          </li>
+        </ul>
+
+        <p
+          v-if="locateSearchQuery.length >= 2 && locateSearchResults.length === 0 && !searchLoading"
+          class="unlocated-products__locate-no-results"
+        >
+          No locations found
+        </p>
+
+        <!-- Selected location display -->
+        <div v-if="selectedLocation" class="unlocated-products__locate-selected">
+          <span class="unlocated-products__locate-selected-label">Assign to:</span>
+          <LocationCodeBadge :code="selectedLocation.full_code" />
+          <span>{{ selectedLocation.name }}</span>
+        </div>
+      </div>
+
+      <template #footer>
+        <InvButton variant="ghost" size="sm" @click="closeLocateModal">
+          Cancel
+        </InvButton>
+        <InvButton
+          variant="primary"
+          size="sm"
+          :disabled="!selectedLocation"
+          :loading="assigning"
+          @click="handleAssign"
+        >
+          Assign Location
+        </InvButton>
+      </template>
+    </InvModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { getApiClient, apiUrl } from '../../api/client'
+import { useLocationSearch } from '../../composables/useLocationSearch'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import type { Location, Column } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvModal from '../shared/InvModal.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationCodeBadge from '../locations/LocationCodeBadge.vue'
+
+interface UnlocatedProduct {
+  id: number | string
+  name: string
+  sku: string | null
+}
+
+const props = withDefaults(defineProps<{
+  limit?: number
+}>(), {
+  limit: 50,
+})
+
+const emit = defineEmits<{
+  locate: [product: { id: number | string; name: string }]
+}>()
+
+const locationSearchComposable = useLocationSearch()
+const { addProduct } = useLocationProducts()
+
+const products = ref<UnlocatedProduct[]>([])
+const totalCount = ref(0)
+const loading = ref(false)
+const loadingMore = ref(false)
+const page = ref(1)
+
+// Locate modal state
+const showLocateModal = ref(false)
+const locateProduct = ref<UnlocatedProduct | null>(null)
+const locateSearchQuery = ref('')
+const locateSearchResults = ref<Location[]>([])
+const selectedLocation = ref<Location | null>(null)
+const searchLoading = ref(false)
+const assigning = ref(false)
+
+const columns: Column[] = [
+  { key: 'name', label: 'Product' },
+  { key: 'sku', label: 'SKU', width: '150px' },
+  { key: 'actions', label: '', width: '100px', align: 'right' },
+]
+
+const hasMore = computed(() => products.value.length < totalCount.value)
+
+onMounted(() => fetchProducts())
+
+async function fetchProducts(append = false) {
+  if (append) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+  }
+
+  try {
+    const response = await getApiClient().get(
+      apiUrl(`/dashboard/unlocated-products?limit=${props.limit}&page=${page.value}`)
+    )
+    const data = response.data.data || response.data
+    totalCount.value = response.data.meta?.total ?? data.length
+
+    if (append) {
+      products.value.push(...data)
+    } else {
+      products.value = data
+    }
+  } catch {
+    // Degrade gracefully
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function loadMore() {
+  page.value++
+  fetchProducts(true)
+}
+
+function handleLocate(product: UnlocatedProduct) {
+  locateProduct.value = product
+  showLocateModal.value = true
+  locateSearchQuery.value = ''
+  locateSearchResults.value = []
+  selectedLocation.value = null
+  emit('locate', { id: product.id, name: product.name })
+}
+
+function handleLocateSearch() {
+  searchLoading.value = true
+  locationSearchComposable.search(locateSearchQuery.value)
+
+  // Watch for results (debounced in composable)
+  const checkResults = setInterval(() => {
+    if (!locationSearchComposable.loading.value) {
+      locateSearchResults.value = locationSearchComposable.results.value
+      searchLoading.value = false
+      clearInterval(checkResults)
+    }
+  }, 100)
+
+  // Safety timeout
+  setTimeout(() => {
+    clearInterval(checkResults)
+    searchLoading.value = false
+    locateSearchResults.value = locationSearchComposable.results.value
+  }, 2000)
+}
+
+function selectLocateLocation(location: Location) {
+  selectedLocation.value = location
+  locateSearchResults.value = []
+  locateSearchQuery.value = ''
+}
+
+function closeLocateModal() {
+  showLocateModal.value = false
+  locateProduct.value = null
+  selectedLocation.value = null
+  locateSearchQuery.value = ''
+  locateSearchResults.value = []
+}
+
+async function handleAssign() {
+  if (!selectedLocation.value || !locateProduct.value) return
+
+  assigning.value = true
+  try {
+    await addProduct(selectedLocation.value.id, {
+      product_id: locateProduct.value.id,
+      quantity: 1,
+    })
+
+    // Remove from list
+    products.value = products.value.filter(p => p.id !== locateProduct.value!.id)
+    totalCount.value = Math.max(0, totalCount.value - 1)
+    closeLocateModal()
+  } catch {
+    // Error is in the composable
+  } finally {
+    assigning.value = false
+  }
+}
+</script>
+
+<style scoped>
+.unlocated-products {
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.unlocated-products__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+}
+
+.unlocated-products__title {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+.unlocated-products__subtitle {
+  margin: var(--space-1, 0.25rem) 0 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.unlocated-products__product-name {
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.unlocated-products__sku {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+}
+
+.unlocated-products__no-sku {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+
+.unlocated-products__load-more {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border-top: 1px solid var(--admin-border);
+}
+
+.unlocated-products__showing {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+}
+
+/* Locate modal */
+.unlocated-products__locate-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.unlocated-products__locate-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.unlocated-products__locate-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.unlocated-products__locate-input {
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.unlocated-products__locate-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.unlocated-products__locate-results {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--admin-card-bg);
+}
+
+.unlocated-products__locate-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: none;
+  background: none;
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.1s ease;
+}
+
+.unlocated-products__locate-option:hover,
+.unlocated-products__locate-option--selected {
+  background: var(--admin-content-bg);
+}
+
+.unlocated-products__locate-option:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.unlocated-products__locate-option-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.unlocated-products__locate-no-results {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+  text-align: center;
+  padding: var(--space-3, 0.75rem);
+}
+
+.unlocated-products__locate-selected {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem);
+  background: color-mix(in srgb, var(--color-success, #059669) 8%, var(--admin-card-bg));
+  border: 1px solid color-mix(in srgb, var(--color-success, #059669) 20%, var(--admin-border));
+  border-radius: 6px;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+}
+
+.unlocated-products__locate-selected-label {
+  font-weight: 500;
+  color: var(--color-success, #059669);
+  flex-shrink: 0;
+}
+</style>